摘要：報(bào)錯(cuò)不報(bào)此外還有個(gè)好處就是簡化回調(diào)函數(shù)正常函數(shù)寫法箭頭函數(shù)寫法改變指向長期以來，語言的對(duì)象一直是一個(gè)令人頭痛的問題，在對(duì)象方法中使用，必須非常小心。

ES6 雖提供了許多新特性，但我們實(shí)際工作中用到頻率較高并不多，根據(jù)二八法則，我們應(yīng)該用百分之八十的精力和時(shí)間，好好專研這百分之二十核心特性，將會(huì)收到事半功倍的奇效！寫文章不容易，請(qǐng)大家多多支持與關(guān)注！本文首發(fā)地址GitHub博客（含思維導(dǎo)圖）

這部分著重介紹：babel 編譯ES6語法，如何用webpack實(shí)現(xiàn)模塊化。

ES6 提供了許多新特性，但并不是所有的瀏覽器都能夠完美支持。下圖是各個(gè)瀏覽器對(duì)ES6兼容性一覽表(以export為例)

由上圖可知，有些瀏覽器對(duì)于ES6并不是很友好，針對(duì) ES6 的兼容性問題，很多團(tuán)隊(duì)為此開發(fā)出了多種語法解析轉(zhuǎn)換工具(比如babel，jsx，traceur 等)，可以把我們寫的 ES6 語法轉(zhuǎn)換成 ES5，相當(dāng)于在 ES6 和瀏覽器之間做了一個(gè)翻譯官。其中Babel是一個(gè)廣泛使用的轉(zhuǎn)碼器，可以將ES6代碼轉(zhuǎn)為ES5代碼，從而在現(xiàn)有環(huán)境執(zhí)行。

·首先要先安裝node.js，運(yùn)行npm init，然后會(huì)生成package.json文件
·npm install --save-dev babel-core babel-preset-es2015 babel-preset-latest
·創(chuàng)建并配置.babelrc文件//存放在項(xiàng)目的根目錄下，與node_modules同級(jí)
·npm install -g babel-cli
·babel-version

Babel的配置文件是.babelrc，存放在項(xiàng)目的根目錄下。該文件用來設(shè)置轉(zhuǎn)碼規(guī)則和插件，具體內(nèi)容如下：

//.babelrc文件
{
    "presets": ["es2015", "latest"],
    "plugins": []
}

·創(chuàng)建./src/index.js
·內(nèi)容：[1,2,3].map(item=>item+1）；
·運(yùn)行babel./src/index.js

運(yùn)行后得到以下部分，說明已經(jīng)成功配置了babel

"use strict";
[1, 2, 3].map(function (item) {
  return item + 1;
});

現(xiàn)今的很多網(wǎng)頁其實(shí)可以看做是功能豐富的應(yīng)用，它們擁有著復(fù)雜的JavaScript代碼和一大堆依賴包，模快化工具就應(yīng)運(yùn)而生了，其中webpack 功能強(qiáng)大深受人們喜愛。
Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js），Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件，使用loaders處理它們，最后打包為一個(gè)（或多個(gè)）瀏覽器可識(shí)別的JavaScript文件。

·npm install webpack babel-loader --save-dev
·創(chuàng)建并配置 webpack.config.js//webpack.config.js文件與package.json同級(jí)
·配置 package.json中的scripts
·運(yùn)行 npm start

//配置 webpack.config.js  針對(duì).js結(jié)尾的文件除了node_modules都用babel解析
module.exports = {
    entry: "./src/index.js",
    output: {
        path: __dirname,
        filename: "./build/bundle.js"
    },
    module: {
        rules: [{
            test: /.js?$/,
            exclude: /(node_modules)/,
            loader: "babel-loader"
        }]
    }
}

//配置 package.json中的scripts
"scripts": {
    "start": "webpack",
    "test": "echo "Error: no test specified" && exit 1"
  }

ES5 只有全局作用域和函數(shù)作用域（例如，我們必須將代碼包在函數(shù)內(nèi)來限制作用域），這導(dǎo)致很多問題：

情況1：內(nèi)層變量覆蓋外層變量

var tmp = new Date();
function f() {
  console.log(tmp); //undefined
  if (false) {   
    var tmp = "hello world";
  }
}

情況2：變量泄露，成為全局變量

var s = "hello";
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

ES6 提供 let 和 const 來代替 var 聲明變量，新的聲明方式支持用大括號(hào)表示的塊級(jí)作用域，這會(huì)帶來一些好處：

1.不再需要立即執(zhí)行的函數(shù)表達(dá)式(IIFE)
在 ES5 中，我們需要構(gòu)造一個(gè)立即執(zhí)行的函數(shù)表達(dá)式去保證我們不污染全局作用域。在 ES6中， 我們可以使用更簡單的大括號(hào)（{}），然后使用 const 或者 let 代替 var 來達(dá)到同樣的效果。

2.循環(huán)體中的閉包不再有問題
在 ES5 中，如果循環(huán)體內(nèi)有產(chǎn)生一個(gè)閉包，訪問閉包外的變量，會(huì)產(chǎn)生問題。在 ES6，你可以使用 “l(fā)et” 來避免問題。

3.防止重復(fù)聲明變量
ES6 不允許在同一個(gè)作用域內(nèi)用 let 或 const 重復(fù)聲明同名變量。這對(duì)于防止在不同的 js 庫中存在重復(fù)聲明的函數(shù)表達(dá)式十分有幫助。

如果一個(gè)對(duì)象的所有鍵名都是正整數(shù)或零，并且有l(wèi)ength屬性，那么這個(gè)對(duì)象就很像數(shù)組，稱為偽數(shù)組。典型的偽數(shù)組有函數(shù)的arguments對(duì)象，以及大多數(shù) DOM 元素集，還有字符串。

...
測試1


測試2


測試3

針對(duì)偽數(shù)組，沒有數(shù)組一般方法，直接遍歷便會(huì)出錯(cuò),ES6新增Array.from()方法來提供一種明確清晰的方式以解決這方面的需求。

Array.from(btns).forEach(item=>console.log(item))將偽數(shù)組轉(zhuǎn)換為數(shù)組

當(dāng)調(diào)用 new Array( )構(gòu)造器時(shí)，根據(jù)傳入?yún)?shù)的類型與數(shù)量的不同，實(shí)際上會(huì)導(dǎo)致一些不同的結(jié)果， 例如：

let items = new Array(2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // undefined
console.log(items[1]) ;

let items = new Array(1, 2) ;
console.log(items.length) ; // 2
console.log(items[0]) ; // 1
console.log(items[1]) ; // 2

當(dāng)使用單個(gè)數(shù)值參數(shù)來調(diào)用 Array 構(gòu)造器時(shí)，數(shù)組的長度屬性會(huì)被設(shè)置為該參數(shù)。 如果使用多個(gè)參數(shù)(無論是否為數(shù)值類型)來調(diào)用，這些參數(shù)也會(huì)成為目標(biāo)數(shù)組的項(xiàng)。數(shù)組的這種行為既混亂又有風(fēng)險(xiǎn)，因?yàn)橛袝r(shí)可能不會(huì)留意所傳參數(shù)的類型。

ES6 引入了Array.of( )方法來解決這個(gè)問題。該方法的作用非常類似Array構(gòu)造器，但在使用單個(gè)數(shù)值參數(shù)的時(shí)候并不會(huì)導(dǎo)致特殊結(jié)果。Array.of( )方法總會(huì)創(chuàng)建一個(gè)包含所有傳入?yún)?shù)的數(shù)組，而不管參數(shù)的數(shù)量與類型：

let items = Array.of(1, 2);
console.log(items.length); // 2
console.log(items[0]); // 1
console.log(items[1]); // 2
items = Array.of(2);
console.log(items.length); // 1
console.log(items[0]); // 2

Array.of基本上可以用來替代Array()或newArray()，并且不存在由于參數(shù)不同而導(dǎo)致的重載，而且他們的行為非常統(tǒng)一。

數(shù)組實(shí)例的find方法，用于找出第一個(gè)符合條件的數(shù)組成員。它的參數(shù)是一個(gè)回調(diào)函數(shù)，所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)，直到找出第一個(gè)返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。

[1, 4, -5, 10].find((n) => n < 0) // -5

數(shù)組實(shí)例的findIndex方法的用法與find方法非常類似，返回第一個(gè)符合條件的數(shù)組成員的位置，如果所有成員都不符合條件，則返回-1。

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

Array.prototype.includes方法返回一個(gè)布爾值，表示某個(gè)數(shù)組是否包含給定的值。該方法的第二個(gè)參數(shù)表示搜索的起始位置，默認(rèn)為0。如果第二個(gè)參數(shù)為負(fù)數(shù)，則表示倒數(shù)的位置，如果這時(shí)它大于數(shù)組長度（比如第二個(gè)參數(shù)為-4，但數(shù)組長度為3），則會(huì)重置為從0開始。

[1, 2, 3].includes(2)   // true
[1, 2, 3].includes(3, -1); // true
[1, 2, 3, 5, 1].includes(1, 2); // true

沒有該方法之前，我們通常使用數(shù)組的indexOf方法，檢查是否包含某個(gè)值。indexOf方法有兩個(gè)缺點(diǎn)，一是不夠語義化，它的含義是找到參數(shù)值的第一個(gè)出現(xiàn)位置，所以要去比較是否不等于-1，表達(dá)起來不夠直觀。二是，它內(nèi)部使用嚴(yán)格相等運(yùn)算符（===）進(jìn)行判斷，這會(huì)導(dǎo)致對(duì)NaN的誤判。

[NaN].indexOf(NaN) // -1
[NaN].includes(NaN) // true

ES6 提供entries()，keys()和values(),用于遍歷數(shù)組。它們都返回一個(gè)遍歷器對(duì)象，可以用for...of循環(huán)進(jìn)行遍歷，唯一的區(qū)別是keys()是對(duì)鍵名的遍歷、values()是對(duì)鍵值的遍歷，entries()是對(duì)鍵值對(duì)的遍歷。

for (let index of ["a", "b"].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ["a", "b"].values()) {
  console.log(elem);
}
// "a"
// "b"

for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

ES6 允許使用“箭頭”（=>）定義函數(shù)。它主要有兩個(gè)作用：縮減代碼和改變this指向，接下來我們?cè)敿?xì)介紹：

const double1 = function(number){
   return number * 2;   //ES5寫法
}
const double2 = (number) => {
 return number * 2;    //ES6寫法
}
const double4 = number => number * 2; //可以進(jìn)一步簡化

多個(gè)參數(shù)記得加括號(hào)

 const double6 = (number,number2) => number + number2;

如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號(hào)將它們括起來，并且使用return語句返回。

 const double = (number,number2) => {
   sum = number + number2 
   return sum;
 }

由于大括號(hào)被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在對(duì)象外面加上括號(hào)，否則會(huì)報(bào)錯(cuò)。

// 報(bào)錯(cuò)
let getTempItem = id => { id: id, name: "Temp" };
// 不報(bào)
let getTempItem = id => ({ id: id, name: "Temp" });

此外還有個(gè)好處就是簡化回調(diào)函數(shù)

// 正常函數(shù)寫法
[1,2,3].map(function (x) {
  return x * x;
});
// 箭頭函數(shù)寫法
[1,2,3].map(x => x * x);//[1, 4, 9]

長期以來，JavaScript 語言的this對(duì)象一直是一個(gè)令人頭痛的問題，在對(duì)象方法中使用this，必須非常小心。箭頭函數(shù)”綁定”this，很大程度上解決了這個(gè)困擾。我們不妨先看一個(gè)例子：

const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    return this.members.map(function(member){
      return `${member}隸屬于${this.teamName}小組`;    // this不知道該指向誰了
    })
  }
}
console.log(team.teamSummary());//["Henry隸屬于undefined小組", "Elyse隸屬于undefined小組"]

teamSummary函數(shù)里面又嵌了個(gè)函數(shù)，這導(dǎo)致內(nèi)部的this的指向發(fā)生了錯(cuò)亂。
那如何修改：

方法一、let self = this

const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    let self = this;
    return this.members.map(function(member){
      return `${member}隸屬于${self.teamName}小組`;
    })
  }
}
console.log(team.teamSummary());//["Henry隸屬于es6小組", "Elyse隸屬于es6小組"]

方法二、bind函數(shù)

const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    return this.members.map(function(member){
      // this不知道該指向誰了
      return `${member}隸屬于${this.teamName}小組`;
    }.bind(this))
  }
}
console.log(team.teamSummary());//["Henry隸屬于es6小組", "Elyse隸屬于es6小組"]

方法三、 箭頭函數(shù)

const team = {
  members:["Henry","Elyse"],
  teamName:"es6",
  teamSummary:function(){
    return this.members.map((member) => {
      // this指向的就是team對(duì)象
      return `${member}隸屬于${this.teamName}小組`;
    })
  }
}
console.log(team.teamSummary());//["Henry隸屬于es6小組", "Elyse隸屬于es6小組"]

（1）函數(shù)體內(nèi)的this對(duì)象，就是定義時(shí)所在的對(duì)象，而不是使用時(shí)所在的對(duì)象。

（2）不可以當(dāng)作構(gòu)造函數(shù)，也就是說，不可以使用new命令，否則會(huì)拋出一個(gè)錯(cuò)誤。

（3）不可以使用arguments對(duì)象，該對(duì)象在函數(shù)體內(nèi)不存在。如果要用，可以用 rest 參數(shù)代替。

（4）不可以使用yield命令，因此箭頭函數(shù)不能用作 Generator 函數(shù)。

ES6 引入 rest 參數(shù)（形式為...變量名），用于獲取函數(shù)的多余參數(shù)，這樣就不需要使用arguments對(duì)象了。

rest 參數(shù)搭配的變量是一個(gè)數(shù)組，該變量將多余的參數(shù)放入數(shù)組中。
我們舉個(gè)例子：如何實(shí)現(xiàn)一個(gè)求和函數(shù)？

傳統(tǒng)寫法：

function addNumbers(a,b,c,d,e){
  var numbers = [a,b,c,d,e];
  return numbers.reduce((sum,number) => {
    return sum + number;
  },0)
 }
 console.log(addNumbers(1,2,3,4,5));//15

ES6寫法：

 function addNumbers(...numbers){
  return numbers.reduce((sum,number) => {
    return sum + number;
  },0)
 }
 console.log(addNumbers(1,2,3,4,5));//15

也可以與解構(gòu)賦值組合使用

var array = [1,2,3,4,5,6];
var [a,b,...c] = array;
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]

rest 參數(shù)還可以與箭頭函數(shù)結(jié)合

const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)// [1,2,3,4,5]  

注意：①每個(gè)函數(shù)最多只能聲明一個(gè)rest參數(shù)，而且 rest參數(shù)必須是最后一個(gè)參數(shù)，否則報(bào)錯(cuò)。

②rest參數(shù)不能用于對(duì)象字面量setter之中

let object = {
    set name(...value){   //報(bào)錯(cuò)
        //執(zhí)行一些邏輯
    }
}

與剩余參數(shù)關(guān)聯(lián)最密切的就是擴(kuò)展運(yùn)算符。剩余參數(shù)允許你把多個(gè)獨(dú)立的參數(shù)合并到一個(gè)數(shù)組中；而擴(kuò)展運(yùn)算符則允許將一個(gè)數(shù)組分割，并將各個(gè)項(xiàng)作為分離的參數(shù)傳給函數(shù)。

當(dāng)用在字符串或數(shù)組前面時(shí)稱為擴(kuò)展運(yùn)算符,個(gè)人覺得可以理解為rest參數(shù)的逆運(yùn)算，用于將數(shù)組或字符串進(jìn)行拆解。有些時(shí)候，函數(shù)不允許傳入數(shù)組，此時(shí)使用展開運(yùn)算符就很方便，不信的話，咱們看個(gè)例子：Math.max()方法，它接受任意數(shù)量的參數(shù)，并會(huì)返回其中的最大值。

let value1 = 25,                
let value2 = 50;
console.log(Math.max(value1, value2));    //    50

但若想處理數(shù)組中的值，此時(shí)該如何找到最大值？Math.max()方法并不允許你傳入一個(gè)數(shù)組。其實(shí)你可以像使用rest參數(shù)那樣在該數(shù)組前添加...,并直接將其傳遞給 Math.max()

let values = [25,50,75,    100]
//等價(jià)于console.log(Math.max(25,50,75,100));
console.log(Math.max(...values));    //100

擴(kuò)展運(yùn)算符還可以與其他參數(shù)混用

let values = [-25,-50,-75,-100]
console.log(Math.max(...values,0));    //0

擴(kuò)展運(yùn)算符拆解字符串與數(shù)組

var array = [1,2,3,4,5];
console.log(...array);//1 2 3 4 5
var str = "String";
console.log(...str);//S t r i n g

還可以實(shí)現(xiàn)拼接

var defaultColors = ["red","greed"];
var favoriteColors = ["orange","yellow"];
var fallColors = ["fire red","fall orange"];
console.log(["blue","green",...fallColors,...defaultColors,...favoriteColors]
//["blue", "green", "fire red", "fall orange", "red", "greed", "orange", "yellow"]

ES6 新增了解構(gòu)，這是將一個(gè)數(shù)據(jù)結(jié)構(gòu)分解為更小的部分的過程。

在ES5及更早版本中，從對(duì)象或數(shù)組中獲取信息、并將特定數(shù)據(jù)存入本地變量，需要書寫許多并且相似的代碼。例如：

 var expense = {
   type: "es6",
   amount:"45"
 };
 var type = expense.type;
 var amount = expense.amount;
 console.log(type,amount);

此代碼提取了expense對(duì)象的type與amount值，并將其存在同名的本地變量上。雖然 這段代碼看起來簡單，但想象一下若有大量變量需要處理，你就必須逐個(gè)為其賦值；并且若有一個(gè)嵌套的數(shù)據(jù)結(jié)構(gòu)需要遍歷以尋找信息，你可能會(huì)為了一點(diǎn)數(shù)據(jù)而挖掘整個(gè)結(jié)構(gòu)。

這就是ES6為何要給對(duì)象與數(shù)組添加解構(gòu)。當(dāng)把數(shù)據(jù)結(jié)構(gòu)分解為更小的部分時(shí)，從中提取你要的數(shù)據(jù)會(huì)變得容易許多。

上個(gè)例子中如果采用對(duì)象解構(gòu)的方法，就很容易獲取expense對(duì)象的type與amount值。

const { type,amount } = expense;
console.log(type,amount);

我們?cè)賮砜磦€(gè)例子：

let node = {type:"Identifier",    name:"foo"},    
type = "Literal",name = 5;
({type,name}= node);//    使用解構(gòu)來分配不同的值 
console.log(type); //    "Identifier" 
console.log(name); //    "foo"

注意:你必須用圓括號(hào)包裹解構(gòu)賦值語句，這是因?yàn)楸┞兜幕ɡㄌ?hào)會(huì)被解析為代碼塊語句，而塊語句不允許在賦值操作符（即等號(hào)）左側(cè)出現(xiàn)。圓括號(hào)標(biāo)示了里面的花括號(hào)并不是塊語句、而應(yīng)該被解釋為表達(dá)式，從而允許完成賦值操作。

默認(rèn)值：
可以選擇性地定義一個(gè)默認(rèn)值，以便在指定屬性不存在時(shí)使用該值。若要這么做，需要在 屬性名后面添加一個(gè)等號(hào)并指定默認(rèn)值，就像這樣：

let node = {
  type: "Identifier",
  name: "foo"
};
let {
  type,
  name,
  value = true
} = node;
console.log(type); //    "Identifier" 
console.log(name); //    "foo" 
console.log(value); //    true

嵌套對(duì)象解構(gòu)：
使用類似于對(duì)象字面量的語法，可以深入到嵌套的對(duì)象結(jié)構(gòu)中去提取你想要的數(shù)據(jù)。

let node = {
  type: "Identifier",
  name: "foo",
  loc: {
    start: {
      line: 1,
      column: 1
    },
    end: {
      line: 1,
      column: 4
    }
  }
};
let { loc: { start }} = node;
console.log(start.line); //    1 
console.log(start.column); //    1

本例中的解構(gòu)模式使用了花括號(hào)，表示應(yīng)當(dāng)下行到node對(duì)象的loc屬性內(nèi)部去尋找start屬性。

必須傳值的解構(gòu)參數(shù)

function setCookie(name, value, {
  secure,
  path,
  domain,
  expires
}) {
  //    設(shè)置cookie的代碼 
}
  setCookie("type", "js");//報(bào)錯(cuò)

在此函數(shù)內(nèi)，name與value參數(shù)是必需的，而secure、path、domain與expires則不是。默認(rèn)情況下調(diào)用函數(shù)時(shí)未給參數(shù)解構(gòu)傳值會(huì)拋出錯(cuò)誤。像上例中如果setCookie不傳第三個(gè)參數(shù)，就會(huì)報(bào)錯(cuò)。若解構(gòu)參數(shù)是可選的，可以給解構(gòu)的參數(shù)提供默認(rèn)值來處理這種錯(cuò)誤。

function setCookie(name, value, {
  secure,
  path,
  domain,
  expires
} = {}) {}
setCookie("type", "js");//不會(huì)報(bào)錯(cuò)

const names = ["Henry","Bucky","Emily"];
const [name1,name2,name3] = names;
console.log(name1,name2,name3);//Henry Bucky Emily
const [name,...rest] = names;//結(jié)合展開運(yùn)算符
console.log(rest);//["Bucky", "Emily"]

用{}解構(gòu)返回?cái)?shù)組個(gè)數(shù)

const {length} = names;
console.log(length);//3

數(shù)組解構(gòu)也可以用于賦值上下文，但不需要用小括號(hào)包裹表達(dá)式。這點(diǎn)跟對(duì)象解構(gòu)的約定不同。

let colors = ["red", "green", "blue"],
  firstColor = "black",
  secondColor = "purple";
[firstColor, secondColor] = colors;
console.log(firstColor); //    "red" 
console.log(secondColor);    // "green"

默認(rèn)值：數(shù)組解構(gòu)賦值同樣允許在數(shù)組任意位置指定默認(rèn)值。當(dāng)指定位置的項(xiàng)不存在、或其值為undefined，那么該默認(rèn)值就會(huì)被使用。

let colors = ["red"];
let [firstColor, secondColor = "green"] = colors;
console.log(firstColor); //    "red" 
console.log(secondColor);//    "green"

與rest參數(shù)搭配

在ES5中常常使用concat()方法來克隆數(shù)組，例如：

//在ES5中克隆數(shù)組 
var colors = ["red", "green", "blue"];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

在ES6中，你可以使用剩余項(xiàng)的語法來達(dá)到同樣效果

//在ES6中克隆數(shù)組 
let colors = ["red", "green", "blue"];
let [...clonedColors] = colors;
console.log(clonedColors); //[red,green,blue]

接下我們看個(gè)例子：如何將數(shù)組轉(zhuǎn)化為對(duì)象

const points = [
  [4,5],
  [10,1],
  [0,40]
];
//期望得到的數(shù)據(jù)格式如下，如何實(shí)現(xiàn)？
// [
//   {x:4,y:5},
//   {x:10,y:1},
//   {x:0,y:40}
// ]
let newPoints = points.map(pair => {
  const [x,y] = pair;
  return {x,y}
})
//還可以通過以下辦法，更為簡便
let newPoints = points.map(([x,y]) => {
  return {x,y}
})
console.log(newPoints);

混合解構(gòu)

const people = [
  {name:"Henry",age:20},
  {name:"Bucky",age:25},
  {name:"Emily",age:30}
];
//es5 寫法 
var age = people[0].age;
console.log(age);
//es6 解構(gòu)
const [age] = people;
console.log(age);//第一次解構(gòu)數(shù)組 {name:"Henry",age:20}
const [{age}] = people;//再一次解構(gòu)對(duì)象
console.log(age);//20

當(dāng)使用解構(gòu)來配合var、let、const來聲明變量時(shí)，必須提供初始化程序（即等號(hào)右邊的值）。下面的代碼都會(huì)因?yàn)槿笔С跏蓟绦蚨鴴伋稣Z法錯(cuò)誤：

var { type, name }; // 語法錯(cuò)誤！ 
let { type, name }; // 語法錯(cuò)誤！
const { type, name }; // 語法錯(cuò)誤！

模板字符串是增強(qiáng)版的字符串，用反引號(hào)（`）標(biāo)識(shí)。**它可以當(dāng)作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。
模板字符串中嵌入變量和函數(shù)，需要將變量名寫在${}之中。**

let name = "Henry";
function makeUppercase(word){
  return word.toUpperCase();
}
let template = 
  `
  
${makeUppercase("Hello")}, ${name}!
//可以存放函數(shù)和變量
  
感謝大家收看我們的視頻, ES6為我們提供了很多遍歷好用的方法和語法!
  

    
1
    
2
    
3
    
4
    
5
  
  `;
document.getElementById("template").innerHTML = template;

再舉個(gè)例子，工作中常用到ElementUI庫，在自定義一個(gè)彈出框時(shí)，使用模板字符串就很方便:

   await this.$alert(
          `
確認(rèn)是否升級(jí)${
            this.lectureName
          }
(若已存在講義套件，升級(jí)后請(qǐng)重新生成)
`,
          {
            dangerouslyUseHTMLString: true
          }
        )

從概念上講，在 ES6 之前的 JS 中并沒有和其他面向?qū)ο笳Z言那樣的“類”的概念。長時(shí)間里，人們把使用 new 關(guān)鍵字通過函數(shù)（也叫構(gòu)造器）構(gòu)造對(duì)象當(dāng)做“類”來使用。由于 JS 不支持原生的類，而只是通過原型來模擬，各種模擬類的方式相對(duì)于傳統(tǒng)的面向?qū)ο蠓绞絹碚f非常混亂，尤其是處理當(dāng)子類繼承父類、子類要調(diào)用父類的方法等等需求時(shí)。
ES6提供了更接近傳統(tǒng)語言的寫法，引入了Class（類）這個(gè)概念，作為對(duì)象的模板。通過class關(guān)鍵字，可以定義類。但是類只是基于原型的面向?qū)ο竽Ｊ降恼Z法糖。

//傳統(tǒng)構(gòu)造函數(shù)
function MathHandle(x,y){
  this.x=x；
  this.y=y；
}
MathHandle.prototype.add =function（）{
  return this.x+this.y；
}；
var m=new MathHandle(1,2）；
console.log(m.add()）

//class語法
class MathHandle {
 constructor(x,y){
  this.x=x；
  this.y=y；
}
 add(){
   return this.x+this.y；
  }
}
const m=new MathHandle(1,2);
console.log(m.add()）

這兩者有什么聯(lián)系？其實(shí)這兩者本質(zhì)是一樣的，只不過是語法糖寫法上有區(qū)別。所謂語法糖是指計(jì)算機(jī)語言中添加的某種語法，這種語法對(duì)語言的功能沒有影響，但是更方便程序員使用。比如這里class語法糖讓程序更加簡潔，有更高的可讀性。

typeof MathHandle //"function"
MathHandle===MathHandle.prototype.constructor //true

//傳統(tǒng)構(gòu)造函數(shù)繼承
function Animal() {
    this.eat = function () {
        alert("Animal eat")
    }
}
function Dog() {
    this.bark = function () {
        alert("Dog bark")
    }
}
Dog.prototype = new Animal()// 綁定原型，實(shí)現(xiàn)繼承
var hashiqi = new Dog()
hashiqi.bark()//Dog bark
hashiqi.eat()//Animal eat

//ES6繼承
class Animal {
    constructor(name) {
        this.name = name
    }
    eat() {
        alert(this.name + " eat")
    }
}
class Dog extends Animal {
    constructor(name) {
        super(name) // 有extend就必須要有super，它代表父類的構(gòu)造函數(shù)，即Animal中的constructor
        this.name = name
    }
    say() {
        alert(this.name + " say")
    }
}
const dog = new Dog("哈士奇")
dog.say()//哈士奇 say
dog.eat()//哈士奇 eat

Class之間可以通過extends關(guān)鍵字實(shí)現(xiàn)繼承，這比ES5的通過修改原型鏈實(shí)現(xiàn)繼承，要清晰和方便很多。

Class 在語法上更加貼合面向?qū)ο蟮膶懛?/p>

Class 實(shí)現(xiàn)繼承更加易讀、易理解，對(duì)初學(xué)者更加友好

本質(zhì)還是語法糖，使用prototype

在JavaScript的世界中，所有代碼都是單線程執(zhí)行的。由于這個(gè)“缺陷”，導(dǎo)致JavaScript的所有網(wǎng)絡(luò)操作，瀏覽器事件，都必須是異步執(zhí)行。Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案(回調(diào)函數(shù)和事件)更合理和更強(qiáng)大。

ES6中的promise的出現(xiàn)給我們很好的解決了回調(diào)地獄的問題，所謂的回調(diào)地獄是指當(dāng)太多的異步步驟需要一步一步執(zhí)行，或者一個(gè)函數(shù)里有太多的異步操作，這時(shí)候就會(huì)產(chǎn)生大量嵌套的回調(diào)，使代碼嵌套太深而難以閱讀和維護(hù)。ES6認(rèn)識(shí)到了這點(diǎn)問題，現(xiàn)在promise的使用，完美解決了這個(gè)問題。

一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從pending變?yōu)閒ulfilled和從pending變?yōu)閞ejected。promise 對(duì)象初始化狀態(tài)為 pending ；當(dāng)調(diào)用resolve(成功)，會(huì)由pending => fulfilled ；當(dāng)調(diào)用reject(失敗)，會(huì)由pending => rejected。具體流程見下圖：

new Promise一個(gè)實(shí)例，而且要 return

new Promise 時(shí)要傳入函數(shù)，函數(shù)有resolve reject 兩個(gè)參數(shù)

成功時(shí)執(zhí)行 resolve，失敗時(shí)執(zhí)行reject

then 監(jiān)聽結(jié)果

function loadImg(src){
   const promise=new Promise(function(resolve,reject){
     var img=document.createElement（"img"）
     img.onload=function(){
        resolve(img)
   }
     img.onerror=function（）{
        reject()
   }
    img.src=src
 })
  return promise//返回一個(gè)promise實(shí)例
}
var src="http://www.imooc.com/static/img/index/logo_new.png"
var result=loadImg(src)
result.then(function(img){
    console.log(img.width)//resolved(成功)時(shí)候的回調(diào)函數(shù)
},function(){
    console.log("failed")//rejected(失敗)時(shí)候的回調(diào)函數(shù)
})
result.then(function(img){
    console.log(img.height)
})

promise會(huì)讓代碼變得更容易維護(hù)，像寫同步代碼一樣寫異步代碼,同時(shí)業(yè)務(wù)邏輯也更易懂。

JavaScript 原有的表示“集合”的數(shù)據(jù)結(jié)構(gòu)，主要是數(shù)組（Array）和對(duì)象（Object），ES6 又添加了Map和Set。這樣就需要一種統(tǒng)一的接口機(jī)制，來處理所有不同的數(shù)據(jù)結(jié)構(gòu)。遍歷器（Iterator）就是這樣一種機(jī)制。它是一種接口，為各種不同的數(shù)據(jù)結(jié)構(gòu)提供統(tǒng)一的訪問機(jī)制。任何數(shù)據(jù)結(jié)構(gòu)只要部署 Iterator 接口，就可以完成遍歷操作（即依次處理該數(shù)據(jù)結(jié)構(gòu)的所有成員）。

為各種數(shù)據(jù)結(jié)構(gòu)，提供一個(gè)統(tǒng)一的、簡便的訪問接口；

使得數(shù)據(jù)結(jié)構(gòu)的成員能夠按某種次序排列

ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán)，Iterator接口主要供for...of消費(fèi)。

Array

set容器

map容器

String

函數(shù)的 arguments 對(duì)象

NodeList 對(duì)象

let arr3 = [1, 2, "kobe", true];
for(let i of arr3){
   console.log(i); // 1 2 kobe true
}

let str = "abcd";
for(let item of str){
   console.log(item); // a b c d
}   

var engines = new Set(["Gecko", "Trident", "Webkit", "Webkit"]);
for (var e of engines) {
  console.log(e);
}
// Gecko
// Trident
// Webkit    

for of 循環(huán)不僅支持?jǐn)?shù)組、大多數(shù)偽數(shù)組對(duì)象，也支持字符串遍歷，此外還支持 Map 和 Set 對(duì)象遍歷。

for in循環(huán)可以遍歷字符串、對(duì)象、數(shù)組，不能遍歷Set/Map

forEach 循環(huán)不能遍歷字符串、對(duì)象,可以遍歷Set/Map

ES6 在語言標(biāo)準(zhǔn)的層面上，實(shí)現(xiàn)了模塊功能，而且實(shí)現(xiàn)得相當(dāng)簡單，旨在成為瀏覽器和服務(wù)器通用的模塊解決方案。其模塊功能主要由兩個(gè)命令構(gòu)成：export和import。export命令用于規(guī)定模塊的對(duì)外接口，import命令用于輸入其他模塊提供的功能。

/** 定義模塊 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };
/** 引用模塊 **/
import { basicNum, add } from "./math";
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

如上例所示，使用import命令的時(shí)候，用戶需要知道所要加載的變量名或函數(shù)名，否則無法加載。為了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，為模塊指定默認(rèn)輸出。

// export-default.js
export default function () {
  console.log("foo");
}

上面代碼是一個(gè)模塊文件export-default.js，它的默認(rèn)輸出是一個(gè)函數(shù)。
其他模塊加載該模塊時(shí)，import命令可以為該匿名函數(shù)指定任意名字。

// import-default.js
import customName from "./export-default";
customName(); // "foo"

上面代碼的import命令，可以用任意名稱指向export-default.js輸出的方法，這時(shí)就不需要知道原模塊輸出的函數(shù)名。需要注意的是，這時(shí)import命令后面，不使用大括號(hào)。

如果覺得文章對(duì)你有些許幫助，歡迎在我的GitHub博客點(diǎn)贊和關(guān)注，感激不盡！