社招准备【每天两道算法+面经总结】

试水题 什么时候开始学前端的、怎么学习前端的、看过什么书es6有什么新特性
答案：

新增了let/const，与var相比，let和const 不能重复声明变量,声明的变量不会挂载到window上，具有块级作用域，不能变量提升存在暂时性死区。Symbol是es6引进的一种新的基本数据类型，表示独一无二的值，可以用作属性名(作为对象属性名时，不能用点运算符，可以用 [ ] )，用来解决命名冲突的问题，并且可以有效的避免对象属性被修改。比如，在某个class类中定义一个内部方法，可以使用Symbol用作方法名，避免子类对该方法进行重写。

const myMethod = Symbol('myMethod')
class myClass {
  constructor(context) {
 	// 初始化
  }

  // myMethod
  [myMethod](options) {}

  doSomeThing(event) {
     if (event) {
       this[myMethod]()
     }
  }
}

export default myClass

解构赋值新增了展开运算符模版字符串是增强版字符串，用反引号标识，可以当做普通字符串使用，也可以用来定义多行字符串或者在字符串中嵌入变量提供新的数据集合–set、map。set(集合）类似于数组，但成员的值都是唯一的。Map(字典)类似于对象,可以看作升级版的对象，用来存放键值对的集合，但是“键” 的范围不限于字符串，可以是各种类型的值（包括对象）。新增了箭头函数，箭头函数本身没有this，但是在它声明时可以捕获其声明环境的this供自己使用，this一旦确认，不能改变，可以用来解决闭包中使用普通函数导致的this指向不明确的问题。箭头函数不能作为构造函数来实例化对象，会报错。箭头函数没有原型对象。【引申题：1. 说一下浏览器环境下this指向问题 2. 那你了解node环境下this的指向吗 3. js闭包】ES6通过class关键字，可以定义类。ES6的class本质上是构造函数的一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而己，用法几乎与java的class相同了。函数声明和类声明之间的区别在于, 函数声明会提升，类声明不会。【引申题：使用es5改写es6的class】

知识点:
1) class 声明类
2) constructor 定义构造函数，用来初始化对象属性，通过new生成实例对象时，constructor() 方法会被自动调用，默认返回对象实例。如果没有定义constructor构造函数，JavaScript 将添加一个不可见的空构造方法。
3) extends 继承父类，父类的静态方法和属性不能被实例继承，但会被子类继承
4) super() 方法引用父类的构造方法。通过在构造方法中调用 super() 方法，我们调用了父类的构造方法，这样就可以访问父类的属性和方法。
5) static定义静态方法和属性，静态方法和静态属性属于类，不属于实例对象，只能通过 类名.XX / 类名.XX() 来调用。
6) 父类方法可以重写
7) 类中我们可以使用 getter 和 setter 来获取和设置值

promise是es6中用来解决异步编程的一种方式。通过链式调用的方式, 可以解决回调地狱问题。项目中常用的axios就是把ajax使用promise封装了一下。一个promise可能有三种状态：等待（pending）、已完成（fulfilled / resolved）、已拒绝（rejected）。一个promise可以从pending 状态转换为 fulfilled / resolved状态，也可以从 pending 状态转换为 rejected 状态，只有这两种情况，并且状态不可逆【引申题：1. js事件循环机制（js是单线程的，怎么实现异步） 2. promise代码执行顺序 3.promise.all函数的作用，如果有一个任务error的话其他任务还会执行吗（其他任务正常执行，只是最后返回的promise状态为rejected）4. 手写一个promise.all函数 5. 手写一个并发调度器（// JS 实现一个带并发限制的异步调度器 Scheduler，保证同时运行的任务最多有两个）6. 手写promise A+规范】新增了Proxy和Reflect。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问或者 *** 作，都必须先通过这层拦截，这样可以针对Proxy实例进行 *** 作，而不是直接针对目标对象target进行 *** 作。Reflect 对象的方法与 Proxy 对象的方法一一对应。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。Reflect的作用就是确保对象的原生行为能够正常进行【引申题：1. 了解过vue3吗，介绍一下vue3响应式原理 2. 介绍一下vue2的响应式原理 3. 通过学习vue2和vue3，你觉得他们有什么区别 4. 说说你对mvvm的理解】

节流与防抖的区别【引申题：1. 手写一个节流函数 2. 手写一个防抖函数】
节流：在一段时间间隔内，无论触发多少次事件，只执行一次
防抖：在事件被触发n秒后再执行，如果在这n秒内又被触发，则重新计时。即在连续触发的事件中，只有最后一次的触发才执行

介绍一下从输入url到浏览器页面渲染出内容的过程

查找本地缓存，如果有结束，没有发起请求进行DNS 解析，将url转化成ip地址。如果请求协议是 HTTPS，先建立建立 SSL/TLS 连接。然后TCP/IP三次握手使得浏览器与服务器建立连接建立连接后，浏览器发送请求，服务器返回数据浏览器获取到服务器的数据，准备渲染进程，进行页面渲染

解析html，构建DOM树构建cssom树将dom树和cssom树组合成渲染树根据渲染树进行布局绘制整个页面

浏览器与服务器进行四次挥手断开连接

tcp的握手与挥手

说说对虚拟dom的理解【引申题：1. 手写题—虚拟dom与真实dom相互转换】
说简单点虚拟 DOM 就是一个普通的 JavaScript 对象，包含了 tag、props、children 三个属性。用js对象模拟DOM节点的好处是，页面的更新可以先全部反映在js对象上， *** 作js对象的速度比直接 *** 作dom的速度要快。等更新完后，再将最终的js对象映射成真实的DOM，可以提高性能。

v-if和v-show的区别，使用场景是什么
v-if是动态的向DOM树中添加或删除DOM元素，当初始条件不成立时，v-if不会渲染DOM元素；不管初始条件是什么，v-show总会渲染元素，但是只是简单地基于 CSS 的display:none进行切换，设置当前DOM的显示和隐藏。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

css选择器、选择器的权重、哪些属性是可继承的、那些属性是不可继承