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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市猎塞,隨后出現(xiàn)的幾起案子试读,更是在濱河造成了極大的恐慌,老刑警劉巖荠耽,帶你破解...
    沈念sama閱讀 216,843評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钩骇,死亡現(xiàn)場離奇詭異,居然都是意外死亡铝量,警方通過查閱死者的電腦和手機倘屹,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,538評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來慢叨,“玉大人纽匙,你說我怎么就攤上這事〔宓” “怎么了哄辣?”我有些...
    開封第一講書人閱讀 163,187評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長赠尾。 經(jīng)常有香客問我力穗,道長,這世上最難降的妖魔是什么气嫁? 我笑而不...
    開封第一講書人閱讀 58,264評論 1 292
  • 正文 為了忘掉前任当窗,我火速辦了婚禮,結果婚禮上寸宵,老公的妹妹穿的比我還像新娘崖面。我一直安慰自己元咙,他們只是感情好,可當我...
    茶點故事閱讀 67,289評論 6 390
  • 文/花漫 我一把揭開白布巫员。 她就那樣靜靜地躺著庶香,像睡著了一般。 火紅的嫁衣襯著肌膚如雪简识。 梳的紋絲不亂的頭發(fā)上赶掖,一...
    開封第一講書人閱讀 51,231評論 1 299
  • 那天,我揣著相機與錄音七扰,去河邊找鬼奢赂。 笑死,一個胖子當著我的面吹牛颈走,可吹牛的內容都是我干的膳灶。 我是一名探鬼主播,決...
    沈念sama閱讀 40,116評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼立由,長吁一口氣:“原來是場噩夢啊……” “哼轧钓!你這毒婦竟也來了?” 一聲冷哼從身側響起拆吆,我...
    開封第一講書人閱讀 38,945評論 0 275
  • 序言:老撾萬榮一對情侶失蹤聋迎,失蹤者是張志新(化名)和其女友劉穎脂矫,沒想到半個月后枣耀,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,367評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡庭再,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,581評論 2 333
  • 正文 我和宋清朗相戀三年捞奕,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拄轻。...
    茶點故事閱讀 39,754評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡颅围,死狀恐怖,靈堂內的尸體忽然破棺而出恨搓,到底是詐尸還是另有隱情院促,我是刑警寧澤削祈,帶...
    沈念sama閱讀 35,458評論 5 344
  • 正文 年R本政府宣布疤苹,位于F島的核電站弹澎,受9級特大地震影響雹锣,放射性物質發(fā)生泄漏伊滋。R本人自食惡果不足惜冯痢,卻給世界環(huán)境...
    茶點故事閱讀 41,068評論 3 327
  • 文/蒙蒙 一阻课、第九天 我趴在偏房一處隱蔽的房頂上張望缕允。 院中可真熱鬧宪郊,春花似錦掂恕、人聲如沸拖陆。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,692評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽依啰。三九已至,卻和暖如春店枣,著一層夾襖步出監(jiān)牢的瞬間孔飒,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,842評論 1 269
  • 我被黑心中介騙來泰國打工艰争, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留坏瞄,地道東北人。 一個月前我還...
    沈念sama閱讀 47,797評論 2 369
  • 正文 我出身青樓甩卓,卻偏偏與公主長得像鸠匀,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子逾柿,可洞房花燭夜當晚...
    茶點故事閱讀 44,654評論 2 354