摘要：這也是前端面試經(jīng)常詢問(wèn)的問(wèn)題，經(jīng)常問(wèn)你出現(xiàn)了哪些新的特性，平時(shí)又使用過(guò)那些。

這也是前端面試經(jīng)常詢問(wèn)的問(wèn)題，經(jīng)常問(wèn)你es6出現(xiàn)了哪些新的特性，平時(shí)又使用過(guò)那些。在編寫此教程的時(shí)候，第一句話往往就是面試常常問(wèn)到的地方，然后后面就是他的詳細(xì)解釋，面試要求的內(nèi)容我會(huì)用*標(biāo)記出來(lái)。寫技術(shù)文檔是真的累啊，雖然是看別人的文檔，但是你得看很多，而且還得自己總結(jié)啊。所以說(shuō)要是覺(jué)得對(duì)你有用還是幫我點(diǎn)個(gè)star吧https://github.com/skychenbo

1、箭頭函數(shù)需要注意的地方
2、ES6 let、const
3、set數(shù)據(jù)結(jié)構(gòu)
4、promise對(duì)象的用法,手寫一個(gè)promise
5、class的理解
6、模版語(yǔ)法的理解
7、rest參數(shù)
8、    module體系

*當(dāng)要求動(dòng)態(tài)上下文的時(shí)候，就不能夠使用箭頭函數(shù)。也就是this的固定化
1、在使用=>定義函數(shù)的時(shí)候，this的指向是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象
2、不能夠用作構(gòu)造函數(shù)，這就是說(shuō)，不能夠使用new命令，否則就會(huì)拋出一個(gè)錯(cuò)誤
3、不能夠使用arguments對(duì)象
4、不能使用yield命令
這是一道當(dāng)年很困惑我的一道題不知道你在第一眼能不能看出其結(jié)果,this的指向總是讓人困擾，但是有了=>以后媽媽再也不用擔(dān)心你使用this了

class Animal {
    constructor(){
        this.type = "animal"
    }
    says(say) {
        setTimeout(function () {
            console.log(this.type + "says" + say)
        },1000)
    }
}
var animal = new Animal()
animal.says("hi") // undefined says hi

我們?cè)賮?lái)看看=>的情況

class Animal() {
    constructor() {
        this.type = "animal"
    }
    says(say) {
        setTimeout(() => {
            console.log(this.type + " says " + say)
        }, 1000)
    }
}
var animal = new Animal()
animal.says("hi") // animal says hi

ES6 let、const
*let是更完美的var，不是全局變量，具有塊級(jí)函數(shù)作用域,大多數(shù)情況不會(huì)發(fā)生變量提升。const定義常量值，不能夠重新賦值，如果值是一個(gè)對(duì)象，可以改變對(duì)象里邊的屬性值
let
1、let聲明的變量具有塊級(jí)作用域
2、let聲明的變量不能通過(guò)window.變量名進(jìn)行訪問(wèn)
3、形如for(let x..)的循環(huán)是每次迭代都為x創(chuàng)建新的綁定
下面是var帶來(lái)的不合理場(chǎng)景

var a = []
for (var i = 0; i < i; i++) {
    a[i] = function () {
        console.log(i)
    }
}
a[5]() // 10

在上述代碼中，變量i是var聲明的，在全局范圍類都有效。所以每一次循環(huán)，新的i值都會(huì)覆蓋舊值，導(dǎo)致最后輸出都是10
而如果對(duì)循環(huán)使用let語(yǔ)句的情況，那么每次迭代都是為x創(chuàng)建新的綁定代碼如下

var a = []
for (let i = 0; i < i; i++) {
    a[i] = function () {
        console.log(i)
    }
}
a[5]() // 5

當(dāng)然除了這種方式讓數(shù)組中的各個(gè)元素分別是不同的函數(shù)，我們還可以采用閉包和立即函數(shù)兩種方法
這是閉包的方法

function showNum(i) {
    return function () {
        console.log(i)
    }
}
var a = []
for (var i = 0; i < 5; i++) {
    a[i] = showNum(i)
}

這是立即函數(shù)的方法

var a = []
for (var i = 0; i < 5; i++) {
    a[i] = (function (i) {
        return function () {
            console.log(i)
        }
    })(i)
}
a[2]()

*es6方法,Set本身是一個(gè)構(gòu)造函數(shù)，它類似于數(shù)組，但是成員值都是唯一的

const set = new Set([1,2,3,4,4])
[...set] // [1,2,3,4]
Array.from(new Set())是將set進(jìn)行去重

promise是一個(gè)構(gòu)造函數(shù)，下面是一個(gè)簡(jiǎn)單實(shí)例

var promise = new Promise((resolve,reject) => {
    if (操作成功) {
        resolve(value)
    } else {
        reject(error)
    }
})
promise.then(function (value) {
    // success
},function (value) {
    // failure
})

*class語(yǔ)法相對(duì)原型、構(gòu)造函數(shù)、繼承更接近傳統(tǒng)語(yǔ)法，它的寫法能夠讓對(duì)象原型的寫法更加清晰、面向?qū)ο缶幊痰恼Z(yǔ)法更加通俗
這是class的具體用法

class Animal {
    constructor () {
        this.type = "animal"
    }
    says(say) {
        console.log(this.type + "says" + say)
    }
}
 let animal = new Animal()
 animal.says("hello") // animal says hello

 class Cat extends Animal {
     constructor() {
         super()
         this.type = "cat"
     }
 }
 let cat = new Cat()
 cat.says("hello") // cat says hello

可以看出在使用extend的時(shí)候結(jié)構(gòu)輸出是cat says hello 而不是animal says hello。說(shuō)明contructor內(nèi)部定義的方法和屬性是實(shí)例對(duì)象自己的，不能通過(guò)extends 進(jìn)行繼承。在class cat中出現(xiàn)了super(),這是什么呢
在ES6中，子類的構(gòu)造函數(shù)必須含有super函數(shù)，super表示的是調(diào)用父類的構(gòu)造函數(shù)，雖然是父類的構(gòu)造函數(shù)，但是this指向的卻是cat

Object.assign 方法

var n = Object.assign(a,b,c)向n中添加a,b,c的屬性

*就是這種形式${varible},在以往的時(shí)候我們?cè)谶B接字符串和變量的時(shí)候需要使用這種方式"string" + varible + "string"但是有了模版語(yǔ)言后我們可以使用string${varible}string這種進(jìn)行連接

*es6引入rest參數(shù)，用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了
ex:

function add(...values) {
    let sum = 0
    for(var val of values) {
        sum += val
    }
    return sum
}

*歷史上js是沒(méi)有module體系，無(wú)法將一個(gè)大程序拆分成一些小的程序。在es6之前，有commonJs,AMD兩種
CommonJS是如何書(shū)寫的呢

const animal = require("./content.js")
    // content.js
    module.exports = "a cat"

require.js是這樣做的
// content.js

define("content.js", function () {
    return "A cat"
})

require(["./content.js"], function (animal) {
    console.log(animal) // a cat
})

ES6的語(yǔ)法（在我用的vue中，就使用的是這個(gè)）

import animal from "./content"
// content.js
export default "a cat"

es6 import的其他用法
在vue中可以 import animal from "./content"
animal這個(gè)值可以根據(jù)你的喜歡而改變，但是有一個(gè)問(wèn)題就是如果一旦引入的是函數(shù)或者變量時(shí)，你就必須和content中的名字保持一致，可以參照
import { say, type } from "./content"
常用的還有一種寫法
import * as content from "./content"
這種寫法就是表示所有的輸出值都在這個(gè)對(duì)象上