1. ES6新增的方法

• let和const，解構(gòu)賦值、模板字符串、箭頭函數(shù)。

• Symbol、Map、Set三種常用的數(shù)據(jù)類型。

• Proxy重新定義了數(shù)據(jù)劫持的能力

• Reflect定義了一套標(biāo)準(zhǔn)化的數(shù)據(jù)操作的方式

• Promise確實(shí)的解決了異步邏輯嵌套及回調(diào)地獄問題。定義了異步邏輯的三種狀態(tài)pending、rejected、fullfilled, 搭配then、catch、all、race等方法以及async await語法糖，大量簡化了異步操作。

• Generator函數(shù)，可以將異步邏輯劃片執(zhí)行。

  • Generator 函數(shù)是 ES6 提供的一種異步編程解決方案

  • Generator 函數(shù)是一個(gè)狀態(tài)機(jī)，封裝了多個(gè)內(nèi)部狀態(tài)。

  • 執(zhí)行 Generator 函數(shù)會返回一個(gè)遍歷器對象，也就是說，Generator 函數(shù)除了狀態(tài)機(jī)，還是一個(gè)遍歷器對象生成函數(shù)。返回的遍歷器對象，可以依次遍歷 Generator 函數(shù)內(nèi)部的每一個(gè)狀態(tài)。

• 新增了class類的概念

• ES6 Modules

2. var, let, const的區(qū)別

? ? ?ES6新增了定義變量的關(guān)鍵字 let和const， 分別用于定義塊級變量和常量

? ? ?let， const不會聲明提前， 存在暫時(shí)性死區(qū)

? ? ?外部無法使用到內(nèi)部的let和const定義的變量， 存在塊級作用域限制]

const 定義的常量， 無法更改。

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

3. 箭頭函數(shù)

箭頭函數(shù)是ES6推出的，所以在低版本瀏覽器是有兼容問題的，語法簡介明了，邏輯更清晰。

箭頭函數(shù)沒有自己的this，this指向外部的this，并且this會在創(chuàng)建的時(shí)候就綁定好.

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

// 在箭頭函數(shù)定義的位置往上數(shù)，這一行是可以打印出 this 的
// 因?yàn)檫@里的 this 是 window
// 所以箭頭函數(shù)內(nèi)部的 this 就是 window
const obj = {
  fn: function () {
 ?  console.log(this)
  },
  // 這個(gè)位置是箭頭函數(shù)的上一行，但是不能打印出 this
  fun: () => {
 ?  // 箭頭函數(shù)內(nèi)部的 this 是書寫箭頭函數(shù)的上一行一個(gè)可以打印出 this 的位置
 ?  console.log(this)
  }
}
?
obj.fn()
obj.fun()

4. 解構(gòu)

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

5 ... 展開合并

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

6. promise

    //異步處理方案
    1. 回調(diào)函數(shù)
 ? ?2. Promise
 ? ?3. generator 生成器 yield 
 ? ?4. async await
?
    //解決回調(diào)地獄 ，嵌套金字塔
    
    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,)
        console.log(c);
    }
    
    test()
    
    //所有的異步都結(jié)束
    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()`方法很像，只有一點(diǎn)不同，就是`Promise.any()`不會因?yàn)槟硞€(gè) Promise 變成`rejected`狀態(tài)而結(jié)束，必須等到所有參數(shù) Promise 變成`rejected`狀態(tài)才會結(jié)束。

7 .class (語法糖 => 構(gòu)造函數(shù),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區(qū)別？
    //ES6可以導(dǎo)入某幾個(gè)接口 import {a} from './module.js' + webpack- tree shaking 搖樹優(yōu)化
?
    //commonJS 導(dǎo)入整個(gè)文件

9. 異步遍歷器生成函數(shù)(大廠面試)

Generator 函數(shù)返回一個(gè)同步遍歷器，異步 Generator 函數(shù)的作用，是返回一個(gè)異步遍歷器對象。在語法上，異步 Generator 函數(shù)就是async函數(shù)與 Generator 函數(shù)的結(jié)合。文章來源地址http://www.zghlxwxcb.cn/news/detail-823694.html

function timer(t) {
 ? ? ?return new Promise(resolve => {
 ? ? ? ? ?setTimeout(() => {
 ? ? ? ? ? ? ?resolve(t)
 ? ? ? ?  }, t)
 ? ?  })
 }
?
?
async function* fn() {
 ? ?yield timer(1000)//任務(wù)1
 ? ?yield timer(2000)//任務(wù)2
 ? ?yield timer(3000)//任務(wù)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();

到了這里，關(guān)于ES6-ES13用法（高頻面試題）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！