ES6-前世此生（0）

一、ECMAScript是什麼？ 和 JavaScript 有着怎樣的關係？

1996 年 11 月，Netscape 創造了javascript並將其提交給了標準化組織 ECMA，次年，ECMA 發佈 262 號標準文件（ECMA-262）的初版，規定了瀏覽器腳本語言的標準，並將這種語言稱爲 ECMAScript，這個版本就是 1.0 版。

ECMAScript更新了6個版本，最新正式版 ES6（ECMAScript 6）是 JavaScript 語言的下一代標準，早已在 2015 年 6 月正式發佈。要問二者之間的關係，能夠用 ECMAScript 是 JavaScript 語言的國際標準，JavaScript 是 ECMAScript 的實現這句話來形容。

說的通俗易懂點：若是說設計圖是標準，蓋好的房子是實現，那麼 ECMAScript就是設計圖，JavaScript是蓋好的房子。

二、歷史進化過程

感悟：長路漫漫，吾將上下而求索！

三、ES6兼容性分析

3.1 橫向對比

（1）桌面端瀏覽器對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）移動端瀏覽器對ES2015的支持狀況

• iOS：10.0 版起即可以支持 99% 的 ES6 新特性。
• Android：基本不支持 ES6 新特性（5.1 僅支持 25%）

（3）服務器對ES2015的支持狀況

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

3.2 縱向對比

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

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

結論：如今的Chrome瀏覽器對ES6的支持已經作的至關棒了，可是有些低版本的瀏覽器仍是不支持ES6的語法，例如IE8及其如下，說的就是你，不用再懷疑。

四、爲何學習ES6？

若是把前端開發比做成伐木頭，那麼ES3是斧頭，ES5是鋼鋸，而ES6則是電鋸，隨着前端項目日趨複雜和移動端愈來愈主流，Vue、React、Angular等技術棧的大行其道，ES6 成爲前端開發人員必須掌握的基本技能。掌握了ES6 不只僅可以更加便捷的開發、大幅度的提升工做效率，更可以爲學習Vue、React、Angular等技術棧甚至是NodeJS打下堅實的基礎。

說的這麼666，那麼……

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

例一：

在ES5中，咱們不得不使用如下方法來表示多行字符串：　

var str ='<div id="ul1">'+
            '<li>青年問禪師：</li>'+
            '<li>「大師終日答疑解惑、普渡衆生，如何不爲俗物所擾，靜心修行？」</li>'+
            '<li>禪師微微一笑：「我天天晚上睡覺前都關機！」</li>'+
        '</div>';

然而在ES6中，僅僅用反引號就能夠解決了：　　

var str = `<div id="ul1">
        <li>青年問禪師：</li>
        <li>「大師終日答疑解惑、普渡衆生，如何不爲俗物所擾，靜心修行？」</li>
        <li>禪師微微一笑：「我天天晚上睡覺前都關機！」</li>
  </div>`;

例二：

在ES5中實現對象拷貝效果：

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中實現對象拷貝效果：

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

一樣實現一個對象拷貝效果，用ES5寫須要20多行代碼，可是用ES6寫，只須要 1 行代碼！！！

固然，ES6還有不少強大的新特性等着咱們去學習，ES6引入的新特性是ES5沒法比擬的！

4.2 ES6的新功能簡介

ES6過渡版本，ES4激進被廢掉，ES5遺留不少問題，而ES6 兼容性還好，代碼簡潔，易用。

（1）塊級做用域綁定

1 let聲明

2 const聲明Constant Declarations

3 循環中的塊級綁定

4 循環中的函數

（2）函數的新增特性

1 帶默認參數的函數

2 默認參數對 arguments 對象的影響

3 默認參數表達式 Default Parameter Expressions

4 未命名參數問題

5 函數中的擴展運算符

（3）全新的函數箭頭函數

1 箭頭函數語法

2 使用箭頭函數實現函數自執行

3 箭頭函數中無this綁定No this Binding

4 無arguments綁定

（4）對象功能的擴展

1 對象類別

2 對象字面量的語法擴展

2.1 簡寫的屬性初始化

2.2 簡寫的方法聲明

2.3 在字面量中動態計算屬性名

3 新增的方法

3.1 Objectis

3.2 Object assign

（5）字符串功能的加強

1 查找子字符串

2 repeat方法

3 字符串模板字面量

3.1 基本語法

3.2 多行字符串

3.3 字符串置換

3.4 模板標籤

3.4.1 什麼是模板標籤

3.4.2 定義模板標籤

（6）解構

1 解構的實用性

2 對象解構

2.1 對象解構的基本形式

2.2 解構賦值表達式

2.3 對象解構時的默認值

2.4 賦值給不一樣的變量名

3 數組解構

3.1 數組解構基本語法

3.2 解構表達式

（7）新的基本類型Symbol

1 建立Symbol

2 識別Symbol

3 Symbol做爲屬性名

4 Symbol屬性名的遍歷

5 Symbolfor字符串和SymbolkeyForsymbol類型的值

（8）Set數據結構

1 建立Set和並添加元素

2 Set中不能添加劇復元素

3 使用數組初始化Set

4 判斷一個值是否在Set中

5 移除Set中的元素

6 遍歷Set

7 將Set轉換爲數組

（9）Map數據結構

1 建立Map對象和Map的基本的存取操做

2 Map與Set相似的3個方法

3 初始化Map

4 Map的forEach方法

（10）迭代器和forof循環

1 循環問題

2 什麼是迭代器

3 生成器函數

4 生成器函數表達式

5 可迭代類型和for-of迭代循環

6 訪問可迭代類型的默認迭代器

7 自定義可迭代類型

（11）類

1 ES5以前的模擬的類

2 ES6中基本的類聲明

2 匿名類表達式

3 具名類表達式

4 做爲一等公民的類型

5 動態計算類成員的命名

6 靜態成員

7 ES6中的繼承

7.1 繼承的基本寫法

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

7.3 靜態方法也能夠繼承

使用ES6以後，能夠節約不少開發時間，用來。。。

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

針對 ES6 的兼容性問題，不少團隊爲此開發出了多種語法解析轉換工具，把咱們寫的 ES6 語法轉換成 ES5，至關於在 ES6 和瀏覽器之間作了一個翻譯官。比較通用的工具方案有 babel，jsx，traceur，es6-shim 等。下一節，咱們將具體講解該部分的知識。

六、總結

經過本節，咱們瞭解了ECMAScript的發展進化史，以及ES6的一些新特性。

隨着JavaScript應用領域愈來愈廣， 以及ES6 優雅的編程風格和模式、強大的功能，愈來愈多的程序正在使用ES6更好地實現。

是否是對學習ES6充滿了動力？OK，下節課開始，咱們就講講如何搭建ES6的開發環境搭建，進行ES6開發。