2020前端一些大厂面经系列———ES6

接上篇

ES6

1. ES6有哪些新特性？（滴滴，腾讯）

如果问到这个问题，就把自己熟悉的重要特性简单讲一下，之后面试官就会从你讲的这些里抽出一些知识点来提问，只知道名字的新特性就最好不要提了

• let const：两个特征：一是块级作用域（在指定块的作用域之外无法访问的变量），二是暂时性死区（let 和 const 声明的变量不会被提升到作用域顶部）
• 对象的解构赋值

  var obj = {
   name:'Joh',
   age:22
  };
  var {name, id='999', age} = obj;
  console.log(name, id ,age); // Joh 999 22
  

• 字符串新方法 startsWith endsWIth repeat includes
• 数组新方法： Array.from find findIndex fill entries keys values includes
• 对象的扩展：Object.assign Object.entries Object.keys Object.values
• 箭头函数: 箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，有几点差异,见题目6
• Set Map：Set 是一种叫做集合的数据结构，类似于数组，但成员是唯一且无序的，没有重复的值；Map 是一种叫做字典的数据结构，以 [key, value] 的形式储存数据。
• Promise：简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。它有三个基本状态（Pending，Fulfilled，Rejected），四个基本方法（resolve，reject，then，catch）
• generator：看起来就像一个可以记住状态的函数，运行的过程中，如果遇到了yield就会把yield后边的值返回，然后函数暂停执行直到下一个next()方法开始执行，函数才会从上次暂停的位置重新开始。详细了解戳这里
• aynsc：见题目4
• Class和继承: class是指类，它和ES5中的构造函数十分相似，绝大部分功能都是一致的，但是class的写法，能让对象原型的功能更加清晰，更加符合面向对象语言的特点。
  看一个类的简单的例子：

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
    sayPoint() { // 若在之前加上static，
    // 则为静态方法，而静态方法是指class上的方法不会被实例继承
        console.log(`x: ${this.x}, y: ${this.y}`);
    }
}

了解ES6继承与ES5继承差别戳这里

2. axios与Ajax有哪些不同点 ？（滴滴）
Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范
它有以下几条特性：

• 从 node.js 创建 http 请求
• 支持 Promise API
• 客户端支持防止CSRF(每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒网站拿不到cookie中的key，因此后台可以轻松辨别是否是假冒网站误导输入)
• 提供了一些并发请求的接口（重要，方便了很多的操作）axios.all([axios.get('url1'),axios.get('url2')])

3. Promise是什么？（腾讯）
戳这里了解一下
4. 讲一讲async/await（腾讯）
是generator的语法糖，await 操作符用于等待一个Promise 对象。

• 凡是在前面添加了async的函数在执行后都会自动返回一个Promise对象
• await必须在async函数里使用，不能单独使用

• await后面需要跟Promise对象，不然就没有意义，而且await后面的Promise对象不必写then，因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。
  来看一个例子：

function fn() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('success')
        })
    })
}

async test() {
    let result = await fn() //因为fn会返回一个Promise对象
    console.log(result)    //这里会打出Promise成功后传递过来的'success'
}

test()

5. let var作用域题目（字节跳动）

for (var i = 0; i <10; i++) {  
  setTimeout(function() {  // 同步注册回调函数到 异步的 宏任务队列。
    console.log(i);        // 执行此代码时，同步代码for循环已经执行完成
  }, 0);
}
// 输出结果
10   共10个
// 这里面的知识点有JS的事件循环机制，setTimeout的机制等

// i虽然在全局作用域声明，但是在for循环体局部作用域中使用的时候，变量会被固定，不受外界干扰。
for (let i = 0; i < 10; i++) { 
  setTimeout(function() {
    console.log(i);    //  i 是循环体内局部作用域，不受外界影响。
  }, 0);
}
// 输出结果：
0  1  2  3  4  5  6  7  8 9

var： 遇到有var的作用域，在任何语句执行前都已经完成了声明和初始化，也就是变量提升而且拿到undefined的原因由来
let： 解析器进入一个块级作用域，发现let关键字，变量只是先完成声明，并没有到初始化那一步。此时如果在此作用域提前访问，则报错xx is not defined，这就是暂时性死区的由来。等到解析到有let那一行的时候，才会进入初始化阶段。如果let的那一行是赋值操作，则初始化和赋值同时进行（const、class都是同let一样的道理）

6. 箭头函数和普通函数的区别有哪些？（滴滴）

• 箭头函数没有 this，它只取决包裹箭头函数的第一个普通函数的 this。（因此无法使用 apply / call / bind 直接修改 this 值， 可以改变普通函数作用域中this的指向可以改变箭头函数的this，eg. function closure(){()=>{//code }}，在此例中，我们通过改变封包环境closure.bind(another)()，来改变箭头函数this的指向）。
• 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替。
• 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
• 不可以使用 new 命令，因为：没有自己的 this，无法调用 call，apply。
  没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto。
  下一篇在这里： 2020前端一些大厂面经系列———网络（上）

面经系列：
2020前端一些大厂面经系列———HTML，CSS，算法
2020前端一些大厂面经系列———JS
2020前端一些大厂面经系列———ES6
2020前端一些大厂面经系列———网络（上）
2020前端一些大厂面经系列———网络（下）
2020前端一些大厂面经系列———vue,node
2020前端一些大厂面经系列———综合实战篇