摘要：但是，的本質(zhì)仍然是函數(shù)，是構(gòu)造函數(shù)的另外一種寫法。報(bào)錯(cuò)原生構(gòu)造函數(shù)的繼承對(duì)于一些原生的構(gòu)造函數(shù)，比如，，，等，在是無(wú)法通過(guò)方法實(shí)現(xiàn)原生函數(shù)的內(nèi)部屬性，原生函數(shù)內(nèi)部的無(wú)法綁定，內(nèi)部屬性獲得不了。

在沒有學(xué)習(xí) ES6 之前，學(xué)習(xí) React，真的是一件非常痛苦的事情。即使之前你對(duì) ES5 有著很好的基礎(chǔ)，包括閉包、函數(shù)、原型鏈和繼承，但是 React 中已經(jīng)普遍使用 ES6 的語(yǔ)法，包括 modules、class、箭頭函數(shù)等，還有 JSX 語(yǔ)法。所以，在學(xué)習(xí) React 之前一定要先學(xué)習(xí) ES6。

關(guān)于 ES6 你必須要知道的一個(gè)教程，ECMAScript 6入門。這本書對(duì)于 ES6 的講解非常詳細(xì)，一步一步跟著來(lái)，絕對(duì)會(huì)對(duì) ES6 的語(yǔ)法都了解到。

學(xué)習(xí) ES6，還要知道一個(gè) ES6 的語(yǔ)法編譯器，Babel。ES6 出來(lái)很久了，并不是所有瀏覽器都支持，Babel 就可以把 ES6 代碼轉(zhuǎn)換成 ES5，讓所有瀏覽器都支持你寫的代碼。Babel 內(nèi)嵌了對(duì) JSX 的支持，學(xué)習(xí) React 必備。在線實(shí)驗(yàn)是一個(gè) Babel 的在線編譯器，可以用來(lái)練習(xí) ES6 語(yǔ)法，并實(shí)時(shí)觀測(cè)轉(zhuǎn)換成 ES5 的代碼效果。

準(zhǔn)備工作做完了，接下來(lái)開始今天的主題，你不得不學(xué)的 ES6！

講真，自從出了箭頭函數(shù)之后，再也不用擔(dān)心 this 問題了，而且就簡(jiǎn)化代碼這一方面來(lái)說(shuō)，箭頭函數(shù)可謂是裝逼神器。

箭頭函數(shù)有幾點(diǎn)需要注意，如果 return 值就只有一行表達(dá)式，可以省去 return，默認(rèn)表示該行是返回值，否則需要加一個(gè)大括號(hào)和 return。如果參數(shù)只有一個(gè)，也可以省去括號(hào)，兩個(gè)則需要加上括號(hào)。比如下面的例子：

var f = v => v*2;
// 等價(jià)于
var f = function(v){
  return v*2;
}

// 判斷偶數(shù)
var isEven = n => n % 2 == 0;

// 需要加 return
var = (a, b) => {
  if(a >= b)
    return a;
  return b;
}

還有 this 的問題，我覺得這篇文章說(shuō)的非常好。普通函數(shù)的 this 是可變的，我們把函數(shù)歸為兩種狀態(tài)，一種是定義時(shí)，一種是執(zhí)行時(shí)，如果仔細(xì)研究會(huì)發(fā)現(xiàn)，函數(shù)中的 this 始終是指向函數(shù)執(zhí)行時(shí)所在的對(duì)象。比如全局函數(shù)執(zhí)行時(shí)，this 執(zhí)行 window，對(duì)象的方法執(zhí)行時(shí)，this 執(zhí)行該對(duì)象，這就是函數(shù) this 的可變。而箭頭函數(shù)中的 this 是固定的，看下面的例子：

function obj(){
  setTimeout(()=>console.log(this.id), 20);
}
var id = 1;
obj.call({id: 2}); // 2

執(zhí)行的結(jié)果是 2 而不是全局的 1，表示 setTimeout 函數(shù)執(zhí)行的時(shí)候，this 指向的不是 window，這和普通函數(shù)是有區(qū)別的。

實(shí)際上，箭頭函數(shù)并沒有 this 對(duì)象，將箭頭函數(shù)轉(zhuǎn)成 ES5 會(huì)發(fā)現(xiàn)：

// ES6
function obj() {
  setTimeout(()=>console.log(this.id), 20);
}

// ES5
function foo() {
  var _this = this;
  setTimeout(function () {
    console.log(_this.id);
  }, 20);
}

通過(guò) call aply 等方法是無(wú)法綁定 箭頭函數(shù)中的 this：

var f = () => this.x;
var x = 1;
f.call({x: 2}); // 1

對(duì) this 的一個(gè)總結(jié)就是 在對(duì)象的方法中直接使用箭頭函數(shù)，會(huì)指向 window，其他箭頭函數(shù) this 會(huì)指向上一層的 this，箭頭函數(shù)并沒有存儲(chǔ) this：

var obj = {
  id: 1,
  foo: ()=>{
    return this.id;
  }
}
var id = 2;
obj.foo(); // 2

除了 this 之外，箭頭函數(shù)的 arguments 也是不存在，不能使用 new 來(lái)構(gòu)造，也不能使用 yield 命令。

盼星星盼月亮，終于盼來(lái)了 JS 的繼承。但是 ES6 中的繼承和已經(jīng)很完善的 ES5 中流行的繼承庫(kù)，到底有多少差異？

先來(lái)看一個(gè)例子：

//定義類
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  // 注意函數(shù)構(gòu)造的方式
  toString() {
    return "(" + this.x + ", " + this.y + ")";
  }
}
var p1 = new Point(5, 5);
p1.toString(); //"(5, 5)"

typeof Point // function
p1.constructor == Point //true

直接使用 class 關(guān)鍵字，constructor 作為構(gòu)造方法，函數(shù)可以直接 toString(){} 的方式。

但是，class 的本質(zhì)仍然是函數(shù)，是構(gòu)造函數(shù)的另外一種寫法。既然 class 的本質(zhì)是函數(shù)，那么必不可少的一些 proto，prototype 方法也是存在的。

通過(guò)關(guān)鍵字 extends 可以實(shí)現(xiàn) class 的繼承，

class Square extends Point{
  constructor(x){
    super(x, x);
  }
  toString(){
    return super.toString() + "Square!";
  }
}
var s1 = new Square(4);
s1.toString(); //"(4, 4)Square!"
s1 instanceof Point // true
s1 instanceof Square // true

既然說(shuō)到了繼承，對(duì) es5 中繼承了解到小伙伴，肯定會(huì)疑惑關(guān)于 class 中的 proto 和 prototype 是一個(gè)什么樣的關(guān)系。

子類的 proto 指向父類，子類的 prototype 的 proto 指向父類的 prototype，這和 ES5 并沒有區(qū)別。

Square.__proto__ === Point
// true
Square.prototype.__proto__ === Point.prototype
// true

在 Java 等語(yǔ)言中，是有 super 繼承父類函數(shù)，JS 中更加靈活，可以用作父類的構(gòu)造函數(shù)，又可以用作對(duì)象。

子類的 constructor 必須要調(diào)用 super 方法，且只能在 constructor 方法中調(diào)用，其他地方調(diào)用會(huì)報(bào)錯(cuò)。

class A {
  constructor(a){
    this.x = a;
  }
}
A.prototype.y = 2;
class B extends A{
  constructor(a){
    super();
  }
  getY(){
    super() // 報(bào)錯(cuò)
    return super.y
  }
}

對(duì)于一些原生的構(gòu)造函數(shù)，比如 Array，Error，Object，String 等，在 ES5 是無(wú)法通過(guò) Object.create 方法實(shí)現(xiàn)原生函數(shù)的內(nèi)部屬性，原生函數(shù)內(nèi)部的 this 無(wú)法綁定，內(nèi)部屬性獲得不了。原生構(gòu)造函數(shù)的繼承。

ES6 的 class 可以解決這個(gè)問題。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined

extends 關(guān)鍵字不僅可以用來(lái)繼承類，還能用來(lái)繼承原生的構(gòu)造函數(shù)，在原生函數(shù)的基礎(chǔ)上，自定義自己的函數(shù)。

ES6 支持 static 關(guān)鍵字，該關(guān)鍵字定義的方法，不會(huì)被實(shí)例繼承，但可以被子類繼承：

class A{
  static add(x, y){
    return x + y;
 }
}
A.add(1, 2);
var a = new A();
a.add()// error
class B extends A{}
B.add(2, 2)// 4 

ES6 之前，JS 一直沒有 modules 體系，解決外部包的問題通過(guò) CommonJS 和 AMD 模塊加載方案，一個(gè)用于服務(wù)器，一個(gè)用于瀏覽器。ES6 提出的 modules （import／export）方案完全可以取代 CommonJS 和 AMD 成為瀏覽器和服務(wù)器通用的模塊解決方案。

關(guān)于模塊，就只有兩個(gè)命令，import 用于導(dǎo)入其他模塊，export 用于輸出模塊。

// profile.js
var firstName = "Michael";
var lastName = "Jackson";
var year = 1958;

export {firstName, lastName, year};

// main.js
import {firstName, lastName, year} from "./profile";
console.log(firstName, lastName) // Michael Jackson

import 加載的模塊可以只加載用到的，但是必須使用同名的原則，可以用 as 來(lái)解決名字問題，同樣，as 也可以解決 export 問題：

//main.js
import { lastName as surname } from "./profile";
console.log(surname); // Jackson

//profile.js
export {firstName as name}

export 可以輸出的內(nèi)容很多，包括變量、函數(shù)、類，貌似都可以輸出，還可以借助 export default 來(lái)加載默認(rèn)輸出。

//default.js
function add(a, b){
  return a + b;
}
export default add;
// 實(shí)際上
export {add as default};

// main.js
import add from "./default"
//實(shí)際上 add 名字可以隨便起
import {default as add} from "./default"

這部分 ES6模塊加載的實(shí)質(zhì) 完全只能參考了，因?yàn)閷?duì)模塊加載用的不多，沒有一點(diǎn)經(jīng)驗(yàn)，但是看到作者提到了拷貝和引用，感覺逼格很高的樣子。

ES6模塊加載的機(jī)制，與CommonJS模塊完全不同。CommonJS模塊輸出的是一個(gè)值的拷貝，而ES6模塊輸出的是值的引用。

比如一個(gè) CommonJS 加載的例子：

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};

// main.js
var mod = require("./lib");

console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

這個(gè)值會(huì)被 mod 緩存，而取不到原始的值。

ES6 中不一樣，它只是生成一個(gè)引用，當(dāng)真正需要的時(shí)候，才會(huì)到模塊里去取值，

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}

// main.js
import { counter, incCounter } from "./lib";
console.log(counter); // 3
incCounter();
console.log(counter); // 4

循環(huán)加載也比較有意思，經(jīng)常能看到 nodejs 中出現(xiàn)加載同一個(gè)模塊，而循環(huán)加載卻不常見，nodejs 使用 CommonJS 模塊機(jī)制，CommonJS 的循環(huán)加載采用的是加載多少，輸出多少，就像是我們平時(shí)打了斷點(diǎn)一樣，會(huì)跳到另外一個(gè)文件，執(zhí)行完在跳回來(lái)。

//a.js
exports.done = "1";
var a = require("./b.js");
console.log("half a=%s", a);
exports.done = "3";
console.log("done a");

//b.js
exports.done = "2";
var b = require("./a.js");
console.log("half b=%s", b);
exports.done = "4";
console.log("done b");

//main.js
var a = require("./a.js");
var b = require("./b.js");
console.log("all done! a=%s,b=%s",a,b)

node main.js 的結(jié)果：

half a=2
done a
half b=3
done b
all done! a=3,b=4

這就是 CommonJS 所謂的循環(huán)加載。

而 ES6 采用的加載模式也不一樣，因?yàn)槭褂脛?dòng)態(tài)引用，必須要開發(fā)者保證能 import 到值：

// a.js如下
import {bar} from "./b.js";
console.log("a.js");
console.log(bar);
export let foo = "foo";

// b.js
import {foo} from "./a.js";
console.log("b.js");
console.log(foo);
export let bar = "bar";

結(jié)果：

$ babel-node a.js
b.js
undefined
a.js
bar

循環(huán)加載稍有不慎，就會(huì) underfined。

ES6 在字符串上面可是下了不少功夫，先是解決了字符 unicode 的 bug，增加了一些處理多字節(jié)字符串 codePointAt 函數(shù)，還多了字符串的遍歷接口 for...of，這個(gè)遍歷借口有點(diǎn)仿造 python 的感覺。只要有迭代器功能的對(duì)象，都可以用 for...of 來(lái)遍歷。

ES6 添加了一些有意思的函數(shù)，比如 repeat()，前幾天比較火的文章‘五道經(jīng)典的前端面試題’，就有提到一個(gè)在字符串上實(shí)現(xiàn)原生的重復(fù)方法，這里的 repeat 可以直接解決。

關(guān)于字符串上的新內(nèi)容，非常有幫助的還是模版字符串。之前在 js 中跨行的字符串實(shí)現(xiàn)起來(lái)很別扭，而 python 可以用三個(gè)反引號(hào)來(lái)實(shí)現(xiàn)。

ES6 中的模版字符串使用需要注意以下內(nèi)容：

// ` 可以跨行
var html = `
  

    
first
    
second
  
`

//${} 調(diào)用變量和函數(shù)
var name = "window";
var str = `my name is ${name};`;
// my name is window;

var add = (a, b)=> a+b;
var str = `2 + 3 = ${add(2,3)}`;
// "2 + 3 = 5"

用過(guò) ejs 、swig 或 hbs 等模版，它們可以嵌入 js 代碼，ES6 的模版字符串也可以。使用 <%...%> 放置 JavaScript 代碼，使用 <%= ... %> 輸出 JavaScript 表達(dá)式。

var template = `
  

    <% data.forEach(function(item){ %>
      
<%= item %>
    <% }) %>
  
`

下面就可以寫正則表達(dá)式替換掉自定義字符并執(zhí)行函數(shù)：

function compile(str){
  var evalExpr = /<%=(.+?)%>/g;
  var expr = /<%([sS]+?)%>/g;
  str = str.replace(evalExpr, "`); 
  join( $1 ); 
  join(`")
    .replace(expr, "`); 
 $1 
  join(`");
  str = "join(`" + str + "`);";
  var script = `
    (function parse(data){
      var output = "";

      function join(html){
        output += html;
      }

      ${ str }

      return output;
    })
  `
  return script;
}
var strParse = eval(compile(template));
// 使用
var html = strParse(["shanghai", "beijing", "nanjing"]);
//  
    
//    
shanghai
//    
beijing
//    
nanjing
//  

通過(guò)兩次使用字符串模版，并使用 eval 函數(shù)，一個(gè) ES6 簡(jiǎn)易模版就這樣完成了。

ES5 通過(guò) var 來(lái)申明變量，ES6 新添 let 和 const，且作用域是 塊級(jí)作用域。

let 使用和 var 非常類似，let 不存在變量提升，也不允許重復(fù)申明，let 的聲明只能在它所在的代碼塊有效，比如 for 循環(huán)，非常適合使用 let：

for(let i = 0; i < data.length; i++){
  console.log(data[i]);
}
console.log(i); // error

如果用 var 來(lái)申明 i，最后不會(huì)報(bào)錯(cuò)。之前學(xué)閉包的時(shí)候，有一個(gè)利用閉包解決循環(huán)的問題，用 let 可以解決:

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

const 就是申明常量用的，一旦申明即被鎖定，后面無(wú)法更改。

const PI = 3.14;
PI = 3; //error

let 和 const 都是塊級(jí)作用域，塊級(jí)作用域可以任意嵌套，且 {} 內(nèi)定義的變量，外層作用域是無(wú)法獲得的，且內(nèi)外層的作用域可以同名。

function fn() {
  let n = 1;
  if (true) {
    let n = 2;
  }
  console.log(n); // 1
}

解構(gòu)賦值真的很好用，但是我每次都忘記使用。ES6 解構(gòu)賦值基本語(yǔ)法 var [a, b, c] = [1, 2, 3];，從數(shù)組中取值，并按照先后次序來(lái)賦值。如果解構(gòu)賦值不成功，就會(huì)返回 underfined，解構(gòu)賦值也允許指定默認(rèn)值：

var [a, b] = [1];
b // undefined

// 指定默認(rèn)值
var [a, b = 2] = [1];
b // 2

除了數(shù)組，對(duì)象也可以解構(gòu)賦值，但是數(shù)組是有順序的，而對(duì)象沒有順序，如果想要成功賦值，必須與對(duì)象屬性同名，才能成功賦值，否則返回 underfined：

var {a, b} = {a: 1, b: 2};
a // 1
b // 2

var {a, c} = {a: 1, b: 2};
c // undefined

字符串的解構(gòu)賦值比較有意思，既可以把字符串當(dāng)作可以迭代的數(shù)組，又可以當(dāng)作對(duì)象，比如：

var [a1,a2,a3,a4,a5] = "hello";
a2 // e

var {length : len} = "hello";
len // 5

函數(shù)參數(shù)的解構(gòu)賦值，看一個(gè) forEach 的例子：

var data = [[1, 2], [3, 4]];
data.forEach(([a, b]) => console.log(a+b));
// 3
// 7

一直以來(lái)，回掉問題都是一件令人頭疼的事，調(diào)試的時(shí)候感覺代碼跳來(lái)跳去，玩著玩著就暈了。ES6 提供 Promise 對(duì)象（函數(shù)），專門用來(lái)處理回掉。

var promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

resolve 和 reject 是兩個(gè)異步操作調(diào)用函數(shù)，當(dāng)異步操作完成時(shí)，調(diào)用 resolve，error 則調(diào)用 reject，這兩個(gè)函數(shù)的功能就是把參數(shù)傳遞給回掉函數(shù)。then 函數(shù)用來(lái)處理成功或失敗狀態(tài)。

function loadImageAsync(url) {
  var p = new Promise(function(resolve, reject) {
    var image = new Image();

    image.onload = function() {
      resolve(image);
    };

    image.onerror = function() {
      reject(url);
    };

    image.src = url;
  });
  p.then(function(image){
    document.body.appendChild(image);
  }, function(url){
    throw new Error("Could not load "+ url);
  })
}

loadImageAsync("http://yuren.space/images/bg.gif");

上面是一個(gè)用 Promise 實(shí)現(xiàn)的異步加載圖片的函數(shù)。

Python 中有 for in 運(yùn)算符，ES6 就搞了個(gè) for...of。當(dāng)使用 for...of 循環(huán)遍歷某種數(shù)據(jù)結(jié)構(gòu)時(shí)，該循環(huán)會(huì)自動(dòng)去尋找 Iterator 接口。一種數(shù)據(jù)結(jié)構(gòu)只要部署了 Iterator 接口，我們就稱這種數(shù)據(jù)結(jié)構(gòu)是可遍歷的，對(duì)象、數(shù)組、字符串都是可遍歷的。

var str = "hello";
for(let i of str){
  console.log(i);
}
// "h" "e" "l" "l" "o"

...也非常好用，可以直接把可遍歷對(duì)象直接轉(zhuǎn)換成數(shù)組：

var str = "hello";
[...str] //["h", "e", "l", "l", "o"]

let arr = ["b", "c"];
["a", ...arr, "d"] 
// ["a", "b", "c", "d"]

有了 ... 之后，方便對(duì)非數(shù)組可遍歷的對(duì)象進(jìn)行轉(zhuǎn)換，比如 arguments 和 querySelectAll 的結(jié)果：

[...arguments] // Array

var selects = document.querySelectAll("a");
[...selects] // Array

ES6 新增 Set 集合對(duì)象，其實(shí)像其他語(yǔ)言早都支持了，不過(guò)，吃瓜群眾，不覺明厲，以后，再遇到數(shù)組去重算法題，就可以：

[...(new Set([1, 2, 2, 3]))];
//[1, 2, 3]

Set 方法分為操作和遍歷，操作方法有 add-添加成員， delete-刪除成員， has-擁有判斷返回布爾值， clear-清空集合。

遍歷操作有 keys()，values()，entries()，forEach()，...，for of，map 和 filter 函數(shù)也可以用于 Set，不過(guò)要進(jìn)行巧妙操作，先轉(zhuǎn)換成數(shù)組，在進(jìn)行操作：

let set = new Set([1,2,3]);
set = new Set([...set].map(a => a*2));
// Set {2, 4, 6}

Map 用來(lái)解決對(duì)象只接受字符串作為鍵名，Map 類似于對(duì)象，也是鍵值對(duì)集合，但是“鍵”的范圍不限于字符串，各種類型的值（包括對(duì)象）都可以當(dāng)作鍵。

Map 可以通過(guò) [set、 get、 has、 delete] 方法來(lái)操作：

var m = new Map();
var arr = [1, 2];
m.set(arr, "array");
m.get(arr); // "array"

m.has(arr) // true
m.delete(arr) // true
m.has(arr) // false

參數(shù)默認(rèn)這個(gè)功能使用起來(lái)還是比較方便的，以前參數(shù)都是通過(guò) || 來(lái)實(shí)現(xiàn)默認(rèn)，現(xiàn)在可以使用默認(rèn)參數(shù)。不過(guò)這個(gè)功能在 Python 等語(yǔ)言中已經(jīng)是支持的。

// 以前寫代碼
var sayHello = function(name){
  var name = name || "world";
  console.log("hello " + name);
}

//參數(shù)默認(rèn)
var sayHello = function(name = "world"){
  console.log("hello " + name);
}

sayHello() // "hello world"
sayHello("ES6") // "hello ES6"

對(duì)于不定參數(shù)，以前都是對(duì) arguments 對(duì)象處理，且 arguments 對(duì)象還是個(gè)偽數(shù)組，現(xiàn)在方便了：

var add = function(...arr){
  console.log(arr.constructor.name) // Array
  return arr.reduce((a, b) => a+b, 0);
}
add(1,2,3) // 6

總之，對(duì)于 ES6 的學(xué)習(xí)還是要活用，當(dāng)我看了一遍 ECMAScript 6入門時(shí)候，感覺知識(shí)點(diǎn)還是很多，有點(diǎn)亂。當(dāng)接觸了 react 之后，發(fā)現(xiàn)很多語(yǔ)法都非常的熟悉，于是就從頭溫習(xí)了 ES6，并整理了這篇文章?？赡?，你還不知道，這篇文章，大部分都是參考阮一峰老師的。共勉！

ECMAScript 6入門
30分鐘掌握ES6/ES2015核心內(nèi)容（上）
30分鐘掌握ES6/ES2015核心內(nèi)容（下）
ES6 學(xué)習(xí)筆記
ES6新特性概覽
ES6js.com 官網(wǎng)

歡迎來(lái)我博客交流。