ES11-ECMAScript2020-史上最全教學

ECMAScript版本介紹

ECMAScript 是什么

這套規(guī)范是由 sun 和 netspace共同提出的以ECMA-262為標準和基礎的一套javascript 語言規(guī)范。
這是JavaScript基本語法規(guī)則的規(guī)范镰惦，其中定義了迷守，語法，關鍵字旺入，保留字盒犹。

ECMAScript 發(fā)展史

1998 年 ECMAScript 2.0 發(fā)布
1999 年 ECMAScript 3.0 發(fā)布
2007 年提出了 ECMAScript 4.0 因為太激進被各大瀏覽器廠商及互聯(lián)網(wǎng)公司聯(lián)合抵制，最終沒有發(fā)布眨业。
2008 年放棄4.0計劃急膀，改為3.1優(yōu)化計劃，只做了小部分更新龄捡，我們現(xiàn)在寫的最早的版本大概就是 3.1 版本了卓嫂。
2009 年發(fā)布了ES5
2011 年修正了ES5 發(fā)布了 ES5.1 這個標準是目前國標版本，也就是說所有的2011年之后的瀏覽器必須支持的版本聘殖。
2015 年經(jīng)過 2013 年多次波折和延期發(fā)布晨雳，終于發(fā)布了ES6 版本。
因為ES6版本發(fā)生了加大的變更奸腺，同時太多的想法也在慢慢計劃和實施餐禁，所以ECMAScript 從2015年起，每年都會更新一版突照。
ES2015 以后的版本我們通常稱之為ES6 +

版本迭代的那些事

其實版本的迭代,無外乎讓自己變得更優(yōu)秀帮非，一個語言如果想要變得更優(yōu)秀，那么其實有兩條路可以走讹蘑。一條路是變得盡可能強大末盔，盡可能可靠像是 c ++ 和 java 。另外一個是盡可能降低學習成本座慰，讓你幾乎無所不能的同時可以肆無忌憚的發(fā)揮自己的想象陨舱，做的最好的當然就是JavaScript。

老話說的好版仔，不積跬步無以至千里游盲，不積小流误墓，無以成江海。
雖然自打 ES2015 以來益缎，每年的 ECMAScript 更新都不會太多谜慌，但是我們還是要時刻學習時刻進步，讓我們的語法理解永遠領先瀏覽器链峭。
站的更高才能看得更遠畦娄。
閑話就不敘了又沾，看下正文內容

ECMAScript版本的更新無外乎圍繞這以下幾方面展開

解決低性能封裝

因為javascript語言本身的特性導致JavaScript編程的自由度非常高(其實就是語言本身的規(guī)定較少)弊仪，所以很多的封裝并不成熟
為了提高開發(fā)人員工作效率，在新的JS版本之中提供了非常多新的API
如 ES5 版本的 forEach , indexOf , ES6 + 的 padStart ,falt 等非常多的API

降低開發(fā)人員入門門檻

JavaScript本身在設計的時候沒有考慮到很多的功能杖刷，導致很多可以極大提升開發(fā)效率的API励饵，在編程初期因為語言本身沒有提供，自己也沒有足夠的能力封裝滑燃，這樣很多強大的API沒法使用役听。
比如 jQuery 的 $.Deferred 對象是用來解決回調地獄問題的，現(xiàn)在有了 Promise 表窘，就不必引入龐大的jQuery庫或者自己封裝了典予。
再比如 jQuery 里面的對象合并功能 $.extend 也被替換成了 Object.assign
類似的API有非常多，總而言之新版本降低了開發(fā)人員的入門門檻乐严。

修正語言在設計之初沒有考慮的問題

比如ES5之中提供的嚴格模式瘤袖，提高代碼的執(zhí)行效率，減少了很多烏龍代碼昂验，降低了代碼的維護成本捂敌。
ES6之中新增的塊級作用域，讓JS不用每次使用作用域都需要用到函數(shù)既琴。

干掉了JS之中某些非常惡心的寫法

比如async , await 占婉， class這樣的關鍵字，解決了非常之難寫的回調函數(shù)甫恩。提供了非常香甜的語法糖逆济。

提供了以前不支持的新東西

常量，新的數(shù)據(jù)結構磺箕， Set, Map纹腌，這個不用擔心在ES6之后就基本已經(jīng)補齊了開發(fā)所需，幾乎追平了主流語言滞磺，所以對我們來說這種新東西學一個少一個升薯。
某些新的可以使用的特性，比如在 class 之中添加了 # 還有 static 這類的新東西
再比如說新增的各種運算符 ** , ?., ?? ..

來自ECMAScript的深情告白 : 其實所有語言版本的更新都是為了讓我們更快速击困，更有效率的完成我們的開發(fā)工作涎劈，JavaScript這個語言像是窮苦出身的孩子广凸，天賦一般，成績一般蛛枚，但是在自己不屑的努力下谅海，終于在這個時代占據(jù)了屬于自己的重要一席，因為JavaScript的每一次改變都是為了更好的自己和更方便使用它的你蹦浦。

一句話: 新東西來了扭吁，學就完了。

ES2020版本的新特性

提供了新的API :

Promise的allSettled
原本的Promise.all 在某一個程序報錯后盲镶，會終止其余程序執(zhí)行侥袜，但是allSettled不會終止其程序執(zhí)行，屬于一個優(yōu)化版的Promise.all溉贿。
正則的matchAll
原本的match方法分成兩種返回形式 :
- 1. 匹配到的數(shù)據(jù)只有一個枫吧，以對象的形式返回詳情 : { input : xxx , xxxx.}
- 1. 匹配到的數(shù)據(jù)有多個，以數(shù)組的形式返回所有匹配到的數(shù)據(jù)宇色。
現(xiàn)在的matchAll 可以匹配所有的項并以詳情的形式返回一個數(shù)組對象九杂。
globalThis
因為 web端的全局對象是 window， nodejs的全局對象是global 宣蠕，為了統(tǒng)一兩者的使用例隆，所以es2020 建立了新的關鍵字 globalThis。
這個關鍵字實現(xiàn)了 window===globalThis 還有 global===globalThis抢蚀。

新的語法規(guī)則镀层，修正了之前的不足

運算符類 :

可選鏈式調用 : 其實就是對 . 取出運算的優(yōu)化，避免的取出運算的報錯思币。

    // 我們聲明一個對象
    var obj = { a : 10 }
    // 如果使用正常的取出運算符 , 在取出為undefined或者null的時候鹿响，JavaScript會給我們報出一個類型錯誤
    
    // 例如 : 
    
    obj.c.a 
    // 這個連續(xù)運算就會報出類型錯誤 : TypeError : Cannot read property 'a' of undefined 
    // 因為 obj.c 運算那結果為 undefined 
    // undefined.a 就出現(xiàn)了配合undefined的取出運算。

因為JavaScript是單線程的原因谷饿，所有在報錯的時候惶我，會導致代碼終止執(zhí)行，為了避免類似的報錯出現(xiàn)博投，讓我們可以用更優(yōu)雅從容的方式解決錯誤邏輯绸贡，ES2020給我們提供了可選鏈式調用運算 ?.
具體使用

    var obj = { a : 10 }
    obj.c?.a 
    // 這個運算第一步obj.c 還是 undefined 
    //所以第二步的運算是 undefined?.a
    
    // 這個運算符，在進行取出的時候毅哗，會判定前面的值是否為 undefined 或者 null 如果是听怕，那么則返回undefine ,不會報錯。
    //我們在使用對象的時候可以規(guī)避開報錯虑绵。

這種運算尿瞭，不建議在開發(fā)階段使用，因為這可能導致無法正常排查錯誤翅睛。
建議在項目上線后在敏感區(qū)域替換声搁，確保在字段查詢?yōu)榭盏那闆r下黑竞，或者數(shù)據(jù)返回錯誤的情況下程序可以正常運行。
空值合并
我們在處理默認參數(shù)的情況下都是用 || 運算疏旨，利用其短路特性進行處理很魂。
我們來看一下短路運算在設置默認參數(shù)的時候會發(fā)生什么問題

    // 如果我們想要給函數(shù)的參數(shù)設置默認值，那么我們就可以使用這樣的方式檐涝。
    function foo( option ){
        option = option || "hello world"
    }
    // 這個運算的涵義很簡單遏匆，如果option 傳入的參數(shù)經(jīng)過轉換為true,那么則直接返回option ， 不會繼續(xù)運算谁榜。
    // 如果傳入的參數(shù)轉換為false幅聘，那么我們就把option設置為默認值"hello world"

根據(jù)JavaScript數(shù)據(jù)類型的轉換規(guī)則，我們應該了解惰爬，如果我們傳入的實參為 "",0,false,null 則無法正常賦值為傳入的參數(shù)喊暖，因為這些類型都會被轉換為 false惫企，直接觸發(fā)|| 運算的短路撕瞧。
在 ES2020 中我們可以把 || 運算替換成 ??運算，實現(xiàn)空值的合并,這個合并可以兼容數(shù)字0狞尔。
注意 : 這個合并是不能同時兼容undfeind類型和null類型的

    function foo( option ){
        option = option ?? "hello worold"
    }

這樣則可以讓option的默認值為任意值丛版。

class類 :

class 靜態(tài)字段
其實class這個東西一直都存在一定的不足，因為在ES6增加了class關鍵字之后偏序，確實沒有提供static這樣的方法页畦，那么很多類的觸發(fā)器就要內置，會導致一些尷尬的問題研儒。

    class Foo{
        init(){
            // 觸發(fā)功能;
            
        }
    }

這個 Foo 類在其他位置需要使用的時候豫缨，我們需要兩個步驟，第一個步驟先去 let foo, 第二個步驟 let foo = new Foo() 實例我們當前的構造函數(shù)端朵。
多了一個全局變量好芭，為了最大程度的節(jié)省全局命名空間，class給我們提供了static字段
這個字段可以讓我們在任意位置訪問類之中的內容冲呢。

    class Foo{
        static init(){
            // 觸發(fā)調用當前類
        }
    }

在這里我們使用init功能只需要 Foo.init() 即可舍败。
class 私有字段
如果涉及到命名空間可能的沖突，在自己的類內部定義一下方法可以使用敬拓，私有字段邻薯。
定義的方式是 : #名稱=值

    class Foo{
        #hello="hello world";
        init(){
            console.log(this.#hello) // hello world
        }
    }
    let foo = new Foo();
    foo.init();
    console.log(foo.#hello)// 報錯 ;

語法規(guī)則類

頂級await
在之前的版本上我們使用await 關鍵字需要在 async定義的函數(shù)之中使用，所以我們在頁面初始情況下需要加載數(shù)據(jù)的話乘凸，就要使用匿名函數(shù)厕诡，變成如下形式 :

    (async ()=>{
        await res = fetch("xxx");
    })()

那么在ES2020支持了頂級await之后，我們的代碼就少了這種無用的包裹营勤，更加簡潔的實現(xiàn)了數(shù)據(jù)的加載灵嫌，我們甚至可以在代碼執(zhí)行之前信柿，定義必要的依賴引入

    await res = fetch("xxx");

在JS解析規(guī)則上來講，后面的內容都會放在回調函數(shù)里醒第，所以渔嚷，如果我們需要優(yōu)先加載數(shù)據(jù)完全可以使用這樣的全局await對數(shù)據(jù)進行加載,急劇的簡化了我們的開發(fā)成本。
動態(tài)引入
這個語法規(guī)則稠曼，之前是僅在webpack之中支持的,ES2020 在原生的解析器之中支持了這種寫法形病，其意義也是相當于在web端支持了 COMMONJS 的同步 require 方式。
具體語法如下 :

    import (xxxx).then(function(res){
            console.log(res);
    })

參數(shù)之中的錯誤拋出
很遺憾沒法測試霞幅，因為截止目前為止我們的瀏覽器不支持這種最新的語法漠吻。
但是他可以讓我們自定義跟多的錯誤，至少算是少些了一個邏輯司恳。

    let foo = ( arg = throw new TypeError("參數(shù)類型錯誤"))=>{
        
    }

try catch
這個用法單純的就是對原版本try catch學習成本的降低途乃。
在ES2020之中我們的try catch 可以不在catch之中傳遞參數(shù)了。

   try {
      return JSON.parse(await readFile(optionalConfigFilePath))
    } catch {
      return {}
    }

如果你對本文感興趣扔傅，或者想要獲得更多的課程資料可以添加QQ : 931673916 耍共，或者email : 931673916@qq.com
最后附上學習腦圖 :

ES2020.mindmap.png