ES6-前世今生（0）

LeviDing 發布于2019-08-26 13:41 / 2553人閱讀

摘要：更新了個版本，最新正式版是語言的下一代標準，早已在年月正式發布。基本不支持移動端瀏覽器對的支持情況版起便可以支持的新特性。比較通用的工具方案有，，，等。

1、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是蓋好的房子。

2、歷史進化過程

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

3、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及其以下，說的就是你，不用再懷疑。

4、為什么學習ES6？

如果把前端開發比作成伐木頭，那么ES3是斧頭，ES5是鋼鋸，而ES6則是電鋸，隨著前端項目日趨復雜和移動端越來越主流，Vue、React、Angular等技術棧的大行其道，ES6 成為前端開發人員必須掌握的基本技能。掌握了ES6 不僅僅能夠更加便捷的開發、大幅度的提高工作效率，更能夠為學習Vue、React、Angular等技術棧甚至是NodeJS打下堅實的基礎。

說的這么666，那么……

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

例一：

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

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

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

    var str = `
        青年問禪師：
        “大師終日答疑解惑、普渡眾生，如何不為俗物所擾，靜心修行？”
        禪師微微一笑：“我每天晚上睡覺前都關機！”
  `;

例二：

在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之后，可以節約很多開發時間，用來。。。

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

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

6、總結

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

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

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

云服務器 GPU云服務器 webrtc 前世今生前世 ES6 es6-系列

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109308.html

JavaScript異步流程控制的前世今生

摘要：后面跟著的應該是一個對象其他返回值也可以，只是會立即執行捕獲錯誤參考文章函數的含義與用法 JavaScript異步流程控制的前世今生 showImg(https://segmentfault.com/img/remote/1460000012892876?w=600&h=338); javascript在設計之初.為了避免資源管理復雜問題(多個線程同時操作dom,以哪個為準),因此被設...

劉明 2019-08-22 13:53 評論0 收藏0
React Mixin 的前世今生

摘要：但非常不幸，并不原生支持。這個單詞相信都很熟悉，高階函數在函數式編程是一個基本概念，它描述的是這樣一種函數，接受函數作為輸入，或是輸出一個函數。比如常用的工具方法都是高階函數。恰與的定義完全一致。這種不同很可能會導致問題的產生。在 React component 構建過程中，常常有這樣的場景，有一類功能要被不同的 Component 公用，然后看得到文檔經常提到 Mixin（混入） ...

姘存按 2019-08-21 10:49 評論0 收藏0
Web技術的前世今生（二）

摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經有一段日子了。傳送門技術的前世今生一技術的前世今生三前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》平靜的生活已經有一段日子了。這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。哼，...

Stardustsky 2019-08-30 15:55 評論0 收藏0
Web技術的前世今生（二）

摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經有一段日子了。傳送門技術的前世今生一技術的前世今生三前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》平靜的生活已經有一段日子了。這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。哼，...

hyuan 2019-08-02 13:59 評論0 收藏0
Web技術的前世今生（二）

摘要：前言我是，如果你還不認識我，不妨先看看技術的前世今生一平靜的生活已經有一段日子了。傳送門技術的前世今生一技術的前世今生三前言：我是JavaScript，如果你還不認識我，不妨先看看《Web技術的前世今生（一）》平靜的生活已經有一段日子了。這一天，HTML大哥面露不悅地走過來問我： Js，你是打算和我們分家嗎？大哥，您這說的哪里話，我什么地方做的不對么？我一臉茫然地回答道。哼，...

justjavac 2019-08-23 14:19 評論0 收藏0