ES6-ES13用法（高频面试题）

1. ES6新增的方法

• let和const，解构赋值、模板字符串、箭头函数。

• Symbol、Map、Set三种常用的数据类型。

• Proxy重新定义了数据劫持的能力

• Reflect定义了一套标准化的数据操作的方式

• Promise确实的解决了异步逻辑嵌套及回调地狱问题。定义了异步逻辑的三种状态pending、rejected、fullfilled, 搭配then、catch、all、race等方法以及async await语法糖，大量简化了异步操作。

• Generator函数，可以将异步逻辑划片执行。

  • Generator 函数是 ES6 提供的一种异步编程解决方案

  • Generator 函数是一个状态机，封装了多个内部状态。

  • 执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

• 新增了class类的概念

• ES6 Modules

2. var, let, const的区别

ES6新增了定义变量的关键字 let和const， 分别用于定义块级变量和常量

let， const不会声明提前， 存在暂时性死区

外部无法使用到内部的let和const定义的变量， 存在块级作用域限制]

const 定义的常量， 无法更改。

  if(true){
       let name ="kerwin"
   }
   
   const obj = {name:"kerwin"}
   obj.name="xiaoming"
   // obj = {name:"xioamng"}
   // obj= 'dwadwa'

3. 箭头函数

箭头函数是ES6推出的，所以在低版本浏览器是有兼容问题的，语法简介明了，逻辑更清晰。

箭头函数没有自己的this，this指向外部的this，并且this会在创建的时候就绑定好.

const fn1 = function() {
  console.log(this)
}
fn1() // window
const obj = {  
  name: 'tom',  
  fn2 () {    
    fn1() // window    
    console.log(this) // obj  
  }
}
obj.fn2()
​

// 在箭头函数定义的位置往上数，这一行是可以打印出 this 的
// 因为这里的 this 是 window
// 所以箭头函数内部的 this 就是 window
const obj = {
  fn: function () {
    console.log(this)
  },
  // 这个位置是箭头函数的上一行，但是不能打印出 this
  fun: () => {
    // 箭头函数内部的 this 是书写箭头函数的上一行一个可以打印出 this 的位置
    console.log(this)
  }
}
​
obj.fn()
obj.fun()

4. 解构

	let {type,payload} = data;  // {type:"",payload:""}

5 ... 展开合并

    [...arr1,...arr2]   
    {...obj1,...obj2} 

6. promise

    //异步处理方案
    1. 回调函数
    2. Promise
    3. generator 生成器 yield 
    4. async await
​
    //解决回调地狱 ，嵌套金字塔
    
    function test1(){
        return new Promise((resolve,rejet)=>{
            setTimeout(() => {
                resolve("123")
            }, 2000)
        })
    }
    
    test1().then(res=>{
    
    }).catch(error=>{
    
    })
    // pending reject fullfilled
    
    axios.get("1.php").then(res=>{
        return axios.get(2.php,{res})
    }).then(res=>{
        return axios.get(3.php)
    }).then(res=>{
        console.log(res.data)
    }).catch(error=>{
        console.log(error)
    })
    async await 写起来
    
    async function test(){
        var a = await axios.get(1);
        var b= await axios.get(2,{a});
        var c= await axios.get(3,{b})
        console.log(c);
    }
    
    test()
    
    //所有的异步都结束
    Promise.all([axios.get(1),axios.get(2)]).then(res=>{
        //loading隐藏
    }).catch(error=>{
    
    })
    
    Promise.race([axios.get(1),axios.get(2)])
​
    `Promise.any()`跟`Promise.race()`方法很像，只有一点不同，就是`Promise.any()`不会因为某个 Promise 变成`rejected`状态而结束，必须等到所有参数 Promise 变成`rejected`状态才会结束。

7 .class (语法糖 => 构造函数,babel-loader)

   class Person{
        constructor(name,age) {
          this.name = name;
          this.age =age;
        }
        say=()=>{
    
        }
    }
    
    class Test extends person{
        constructor(name,age,location) {
          super(name,age);
          this.location = location;
        }
       
    }

8 .模块化

   import obj from "./a" ;  
    export default aaa;
    
    import {test} from "./b" ; 
    export {test} ; 
    export var test =function(){}

 
​
    AMD - 前端 异步加载 - 提前下载， 提前加载 require.js
    CMD -  异步加载 - 提前下载 ， 按需加载 -- 玉伯 -sea.js
    CommonJs -同步加载（webpack）
        require("./b")    
        =>module.exports 
        =>exports
    ES6 - 模块化
    
    //ES6 和 commonJS区别？
    //ES6可以导入某几个接口 import {a} from './module.js' + webpack- tree shaking 摇树优化
​
    //commonJS 导入整个文件

9. 异步遍历器生成函数(大厂面试)

Generator 函数返回一个同步遍历器，异步 Generator 函数的作用，是返回一个异步遍历器对象。在语法上，异步 Generator 函数就是async函数与 Generator 函数的结合。

function timer(t) {
      return new Promise(resolve => {
          setTimeout(() => {
              resolve(t)
          }, t)
      })
 }
​
​
async function* fn() {
    yield timer(1000)//任务1
    yield timer(2000)//任务2
    yield timer(3000)//任务3
}
​
// 使用一下 for await ...of
async function fn1() {
    for await(const val of fn()) {
        console.log("start",Date.now())
        console.log(val);
        console.log("end",Date.now())
    }
}
fn1();