摘要：更新了個(gè)版本，最新正式版是語(yǔ)言的下一代標(biāo)準(zhǔn)，早已在年月正式發(fā)布?；静恢С忠苿?dòng)端瀏覽器對(duì)的支持情況版起便可以支持的新特性。比較通用的工具方案有，，，等。

1、ECMAScript是什么？ 和 JavaScript 有著怎樣的關(guān)系？

1996 年 11 月，Netscape 創(chuàng)造了javascript并將其提交給了標(biāo)準(zhǔn)化組織 ECMA，次年，ECMA 發(fā)布 262 號(hào)標(biāo)準(zhǔn)文件（ECMA-262）的第一版，規(guī)定了瀏覽器腳本語(yǔ)言的標(biāo)準(zhǔn)，并將這種語(yǔ)言稱為 ECMAScript，這個(gè)版本就是 1.0 版。

ECMAScript更新了6個(gè)版本，最新正式版 ES6（ECMAScript 6）是 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)，早已在 2015 年 6 月正式發(fā)布。要問(wèn)兩者之間的關(guān)系，可以用 ECMAScript 是 JavaScript 語(yǔ)言的國(guó)際標(biāo)準(zhǔn)，JavaScript 是 ECMAScript 的實(shí)現(xiàn)這句話來(lái)形容。

說(shuō)的通俗易懂點(diǎn)：如果說(shuō)設(shè)計(jì)圖是標(biāo)準(zhǔn)，蓋好的房子是實(shí)現(xiàn)，那么 ECMAScript就是設(shè)計(jì)圖，JavaScript是蓋好的房子。

2、歷史進(jìn)化過(guò)程

感悟：長(zhǎng)路漫漫，吾將上下而求索！

3、ES6兼容性分析

3.1 橫向?qū)Ρ?/p>

（1）桌面端瀏覽器對(duì)ES2015的支持情況

Chrome：51 版起便可以支持 97% 的 ES6 新特性。

Firefox：53 版起便可以支持 97% 的 ES6 新特性。

Safari：10 版起便可以支持 99% 的 ES6 新特性。

IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

（2）移動(dòng)端瀏覽器對(duì)ES2015的支持情況

iOS：10.0 版起便可以支持 99% 的 ES6 新特性。

Android：基本不支持 ES6 新特性（5.1 僅支持 25%）

（3）服務(wù)器對(duì)ES2015的支持情況

Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

3.2 縱向?qū)Ρ?/p>

引用地址 https://caniuse.com/#search=es6

引用地址 https://caniuse.com/#search=es5

結(jié)論：現(xiàn)在的Chrome瀏覽器對(duì)ES6的支持已經(jīng)做的相當(dāng)棒了，但是有些低版本的瀏覽器還是不支持ES6的語(yǔ)法，例如IE8及其以下，說(shuō)的就是你，不用再懷疑。

4、為什么學(xué)習(xí)ES6？

如果把前端開(kāi)發(fā)比作成伐木頭，那么ES3是斧頭，ES5是鋼鋸，而ES6則是電鋸，隨著前端項(xiàng)目日趨復(fù)雜和移動(dòng)端越來(lái)越主流，Vue、React、Angular等技術(shù)棧的大行其道，ES6 成為前端開(kāi)發(fā)人員必須掌握的基本技能。掌握了ES6 不僅僅能夠更加便捷的開(kāi)發(fā)、大幅度的提高工作效率，更能夠?yàn)閷W(xué)習(xí)Vue、React、Angular等技術(shù)棧甚至是NodeJS打下堅(jiān)實(shí)的基礎(chǔ)。

說(shuō)的這么666，那么……

4.1 使用ES6編程，到底好在哪里？

例一：

在ES5中，我們不得不使用以下方法來(lái)表示多行字符串：　

var str ="
"+
            "
青年問(wèn)禪師：
"+
            "
“大師終日答疑解惑、普渡眾生，如何不為俗物所擾，靜心修行？”
"+
            "
禪師微微一笑：“我每天晚上睡覺(jué)前都關(guān)機(jī)！”
"+
        "
";

然而在ES6中，僅僅用反引號(hào)就可以解決了：　　

    var str = `

        
青年問(wèn)禪師：
        
“大師終日答疑解惑、普渡眾生，如何不為俗物所擾，靜心修行？”
        
禪師微微一笑：“我每天晚上睡覺(jué)前都關(guān)機(jī)！”
  
`;

例二：

在ES5中實(shí)現(xiàn)對(duì)象拷貝效果：

var createAssigner = function(keysFunc, undefinedOnly) {
    return function(obj) {
      var length = arguments.length;
      if (length < 2 || obj == null) return obj;
      for (var index = 1; index < length; index++) {
        var source = arguments[index],
            keys = keysFunc(source),
            l = keys.length;     
        for (var i = 0; i < l; i++) {
          var key = keys[i];
          if (!undefinedOnly || obj[key] === void 0) obj[key] = source[key];
        }
      }
      return obj;
    };
  };
var allKeys = function(obj){
    var keys = [];
    for(var key in obj) keys.push(key);
    return keys;
}
var extend = createAssigner(allKeys);
extend({a:111},{b:222});

在ES6中實(shí)現(xiàn)對(duì)象拷貝效果：

Object.assign({a:111},{b:222});

同樣實(shí)現(xiàn)一個(gè)對(duì)象拷貝效果，用ES5寫需要20多行代碼，但是用ES6寫，只需要 1 行代碼?。?！

當(dāng)然，ES6還有很多強(qiáng)大的新特性等著我們?nèi)W(xué)習(xí)，ES6引入的新特性是ES5無(wú)法比擬的！

4.2 ES6的新功能簡(jiǎn)介

ES6過(guò)渡版本，ES4激進(jìn)被廢掉，ES5遺留很多問(wèn)題，而ES6 兼容性還好，代碼簡(jiǎn)潔，易用。

（1）塊級(jí)作用域綁定

1 let聲明

2 const聲明Constant Declarations

3 循環(huán)中的塊級(jí)綁定

4 循環(huán)中的函數(shù)

（2）函數(shù)的新增特性

1 帶默認(rèn)參數(shù)的函數(shù)

2 默認(rèn)參數(shù)對(duì) arguments 對(duì)象的影響

3 默認(rèn)參數(shù)表達(dá)式 Default Parameter Expressions

4 未命名參數(shù)問(wèn)題

5 函數(shù)中的擴(kuò)展運(yùn)算符

（3）全新的函數(shù)箭頭函數(shù)

1 箭頭函數(shù)語(yǔ)法

2 使用箭頭函數(shù)實(shí)現(xiàn)函數(shù)自執(zhí)行

3 箭頭函數(shù)中無(wú)this綁定No this Binding

4 無(wú)arguments綁定

（4）對(duì)象功能的擴(kuò)展

1 對(duì)象類別

2 對(duì)象字面量的語(yǔ)法擴(kuò)展

2.1 簡(jiǎn)寫的屬性初始化

2.2 簡(jiǎn)寫的方法聲明

2.3 在字面量中動(dòng)態(tài)計(jì)算屬性名

3 新增的方法

3.1 Objectis

3.2 Object assign

（5）字符串功能的增強(qiáng)

1 查找子字符串

2 repeat方法

3 字符串模板字面量

3.1 基本語(yǔ)法

3.2 多行字符串

3.3 字符串置換

3.4 模板標(biāo)簽

3.4.1 什么是模板標(biāo)簽

3.4.2 定義模板標(biāo)簽

（6）解構(gòu)

1 解構(gòu)的實(shí)用性

2 對(duì)象解構(gòu)

2.1 對(duì)象解構(gòu)的基本形式

2.2 解構(gòu)賦值表達(dá)式

2.3 對(duì)象解構(gòu)時(shí)的默認(rèn)值

2.4 賦值給不同的變量名

3 數(shù)組解構(gòu)

3.1 數(shù)組解構(gòu)基本語(yǔ)法

3.2 解構(gòu)表達(dá)式

（7）新的基本類型Symbol

1 創(chuàng)建Symbol

2 識(shí)別Symbol

3 Symbol作為屬性名

4 Symbol屬性名的遍歷

5 Symbolfor字符串和SymbolkeyForsymbol類型的值

（8）Set數(shù)據(jù)結(jié)構(gòu)

1 創(chuàng)建Set和并添加元素

2 Set中不能添加重復(fù)元素

3 使用數(shù)組初始化Set

4 判斷一個(gè)值是否在Set中

5 移除Set中的元素

6 遍歷Set

7 將Set轉(zhuǎn)換為數(shù)組

（9）Map數(shù)據(jù)結(jié)構(gòu)

1 創(chuàng)建Map對(duì)象和Map的基本的存取操作

2 Map與Set類似的3個(gè)方法

3 初始化Map

4 Map的forEach方法

（10）迭代器和forof循環(huán)

1 循環(huán)問(wèn)題

2 什么是迭代器

3 生成器函數(shù)

4 生成器函數(shù)表達(dá)式

5 可迭代類型和for-of迭代循環(huán)

6 訪問(wèn)可迭代類型的默認(rèn)迭代器

7 自定義可迭代類型

（11）類

1 ES5之前的模擬的類

2 ES6中基本的類聲明

2 匿名類表達(dá)式

3 具名類表達(dá)式

4 作為一等公民的類型

5 動(dòng)態(tài)計(jì)算類成員的命名

6 靜態(tài)成員

7 ES6中的繼承

7.1 繼承的基本寫法

7.2 在子類中屏蔽父類的方法

7.3 靜態(tài)方法也可以繼承

使用ES6之后，可以節(jié)約很多開(kāi)發(fā)時(shí)間，用來(lái)。。。

5、 如何使用ES6的新特性，又能保證瀏覽器的兼容？

針對(duì) ES6 的兼容性問(wèn)題，很多團(tuán)隊(duì)為此開(kāi)發(fā)出了多種語(yǔ)法解析轉(zhuǎn)換工具，把我們寫的 ES6 語(yǔ)法轉(zhuǎn)換成 ES5，相當(dāng)于在 ES6 和瀏覽器之間做了一個(gè)翻譯官。比較通用的工具方案有 babel，jsx，traceur，es6-shim 等。下一節(jié)，我們將具體講解該部分的知識(shí)。

6、總結(jié)

通過(guò)本節(jié)，我們了解了ECMAScript的發(fā)展進(jìn)化史，以及ES6的一些新特性。

隨著JavaScript應(yīng)用領(lǐng)域越來(lái)越廣， 以及ES6 優(yōu)雅的編程風(fēng)格和模式、強(qiáng)大的功能，越來(lái)越多的程序正在使用ES6更好地實(shí)現(xiàn)。

是不是對(duì)學(xué)習(xí)ES6充滿了動(dòng)力？OK，下節(jié)課開(kāi)始，我們就講講如何搭建ES6的開(kāi)發(fā)環(huán)境搭建，進(jìn)行ES6開(kāi)發(fā)。