我們繼續(xù)上一篇的ES重點內容。

ES2020 ( ES11 )

1.? 可選鏈操作符

????●?在 JavaScript 的操作中, 我們經常會訪問一些屬性, 但是如果他的前置是未定義的呢 ? 是不是就會報錯了呢
????●?這個時候我們不確定他的前置是不是確實存在, 那么我們怎么辦呢 ?
????●?只能是任由他報錯, 如果要做一些容錯處理, 那么只能是 try catch 了, 但是這樣的代碼太難受了看起來
????●?在 ES2020 中出現(xiàn)了一個新的運算符, 可選鏈運算符 ( ?. ), 幫我們解決了這個問題
???●?意義 : 當前置是 undefined 的時候, 不在繼續(xù)向后訪問屬性, 直接返回 undefined

2.? 空值運算符 ( ?? )

●?這是一個非常簡單的操作符, 和 || 操作符差不多, 但是又不太一樣
●?只有當運算符左側是 null 或者 undefined 的時候, 才會返回右側的操作數(shù)據(jù), 否則就返回左側的操作數(shù)據(jù)
????????|| 運算符
????????如果左側為 假值 的時候, 就會返回右側的數(shù)據(jù)
?????????? 運算符
????????只有左側為 null 或 undefined 的時候, 才會返回右側的數(shù)據(jù)

3.? 類的私有變量

????●?在 ES2020 中, 擴展了類的私有變量
????●?當你創(chuàng)建一個類以后, 你可能希望這個類在不同位置使用, 但是你又不希望類里面的某個或者某些屬性可以全局使用, 而只是在類內部使用
????●?此時, 你可以在類里面定義該屬性的時候使用一個 哈希符號

4.? Promise 方法擴展 : Promise.allSettled()

????●?當我們在使用多實例 promise 的時候, 特別是當這些 promise 實例之間還有互相依賴的關系的時候, 我們需要拿到每一個 promise 的結果
????●?現(xiàn)在, ES2020 為我們提供了一個 allSettled 方法, 可以實現(xiàn)這個功能

5.? 數(shù)據(jù)類型擴展 : bigInt

????●?我們在 JS 的開發(fā)中, 一般不會涉及到非常大的數(shù)字, 以前我們也沒有想過有一天我們也要涉及一些極其大的數(shù)字
????●?但是當有一天我們真的遇到了, 發(fā)現(xiàn)我們沒辦法準確的把握這些數(shù)字了
????●?因為 js 能處理的最大的數(shù)字就是 2 的 53 次方
????●?來看下面一個例子

? ? ●?我們會發(fā)現(xiàn), 對于一些過于大的數(shù)字, 把握的不是很準確了, 這就會導致我們的程序出現(xiàn)一些不可控的問題
????●?在 ES2020 的語法規(guī)范中, 提出了一種新的數(shù)據(jù)結構, 叫做 bigInt 表示大整數(shù), 專門用來處理過大的數(shù)字的問題
????●?在書寫的時候也是非常簡單的, 只需要在數(shù)字的末尾加上一個 n, 那么該數(shù)據(jù)就表示是一個大整數(shù)類型

? ? ●?我們需要注意的就是, 大整數(shù)類型不能和其他數(shù)值類型進行運算

? ? ●?此時我們再來看到之前的例子

6.? 模塊化擴展 : 動態(tài)導入

????●?以前我們的模塊化實現(xiàn)規(guī)范, 只能是前置導入, 不管一個外部文件, 我們需要用到多少東西, 也不管我們需要在什么時候使用, 那么都需要先完整導入進來再說
????●?ES2020 我們支持了動態(tài)導入環(huán)境, 尤其是我們結合了 async 和 awiat 語法以后, 變得簡單了很多
????●?語法: import( '地址' )
????●?例子 :
????????○?utils.js

? ? ? ? ○?index.js

ES2021 ( ES12 )

1.? 字符串擴展 : String.prototype.replaceAll()

????●?語法 : 字符串.replaceAll( 換下字符, 換上字符 )
????●?作用 : 將所有換下字符全部替換

2.? 數(shù)值分隔符

????●?在書寫數(shù)值的時候, 可以以 下劃線(_) 作為分隔符書寫
????●?目的就是更直觀地看到數(shù)字的大小

? ? ? ? ○?這個數(shù)字是多少呢, 一億 ? 十億 ? 一百億 ?
????????○?好難一眼看出來

? ? ? ? ?○?現(xiàn)在呢, 是不是直觀了好多
3.? 邏輯運算符的賦值表達式????
????●?以前, 我們的賦值表達式其實有 += -= 之類的內容
????●?現(xiàn)在只不過是在 ES2021 中, 將 邏輯運算符與賦值表達式合作了

? ? ●?簡單解釋一下工作原理

4.? Promise 擴展 : Promise.any 方法

????●?是 Promise 的全局靜態(tài)方法之一, 可以同時放置多個 promise 實例并行執(zhí)行
????●?只要任何一個 promise 實例成功了, 那么就返回這個成功的值
????●?如果所有的 promise 實例都失敗了, 那么最終走入失敗

ES2022 ( ES13 )

1.? 類的字段聲明

????●?以前, 我們在書寫類的時候, 只能在構造器( constructor ) 內進行字段的聲明

? ? ●?在 ES2022 中, 我們可以直接在類中定義字段了, 消除了必須要在構造器內定義字段

2.? await 運算符擴展

????●?以前, 我們的 await 運算符必須書寫在函數(shù)內, 并且函數(shù)還有有 async 關鍵字
????●?現(xiàn)在, 在 ES2020 的語法規(guī)范中, await 關鍵字可以直接在全局使用了

3.? 數(shù)組擴展 : Array.prototype.at() 方法

????●?語法 : 數(shù)組.at( 索引 )
????●?其實就是通過索引訪問數(shù)組內某一個數(shù)據(jù)
????●?但是比我們的 數(shù)組[索引] 更強大一些

4.? 數(shù)組擴展 : Array.prototype.findLast()和findLastIndex()

????●?其實和之前的 find() 和 findIndex() 方法用法一樣
????●?只不過是從數(shù)組的末尾開始向前檢索

5.? 正則擴展 : 匹配索引

????●?以前, 我們在正則匹配的時候, 只能拿到符合要求的字符串片段的開始索引
????●?現(xiàn)在, 在 ES2022 的語法規(guī)范中, 我們可以給正則添加一個 d 修飾符, 來獲取到符合要求的字符串片段的開始索引和結束索引

? ? ●?我們可以同時拿到這一段字符串的開始索引和結束索引, 分別是 [6] 和 [11]

ES2023 ( ES14 )

1.? 數(shù)組方法擴展 : toReversed() 和 toSorted() 和 toSpliced()

????●?他們的使用方法和語法于原先的 reverse() sort() splice() 是一樣的
????●?只不過, 原先的方法會直接在原始數(shù)組上操作
????●?ES2023 擴展的幾個方法, 不會改變原始數(shù)組, 而是以返回值的形式返回改變后的數(shù)組
????●?以 toReversed() 為例 :

? ? ●?其他的方法和 toReversed() 方法是一個道理

2.? 其他

????●?ES2023 還在計劃引入一些新的內容
? ? 管道操作符 |>
? ????? Record
????? ? tuple
????? ? Iteration Helpers
????? ? Better Intl Support
? ? ●?只不過目前還處在計劃中
? ? ●?等到徹底發(fā)布了, 瀏覽器也可以支持了, 我會再次更新, 給大家分享最新的技術點

- End?-