●?我們從很多年前就知道 ES6, 也就是官方發(fā)布的 ES2015

●?從 2015 年開(kāi)始, 官方覺(jué)得大家命名太亂了, 所以決定以年份命名

●?但是大家還是習(xí)慣了叫做 ES6, 不過(guò)這不重要

●?重要的是, ES6 關(guān)注的人非常多, 大家也會(huì)主動(dòng)去關(guān)注

●?但是從 2016 年以后, 每年官方都會(huì)出現(xiàn)新的語(yǔ)法, 那么大家又有多少關(guān)注呢

ES2016 ( ES7 )

●?更新的內(nèi)容并不多, 更像是在基于 ES2015( ES6 ) 的補(bǔ)充內(nèi)容

1.? 數(shù)組方法擴(kuò)展

●?Array.prototype.includes()

●?語(yǔ)法 : Array.prototype.includes( search[, fromIndex] )

●?返回值 : 布爾值

●?基礎(chǔ)應(yīng)用 : 判斷數(shù)組是否包含指定內(nèi)容

●?通過(guò)第二個(gè)參數(shù)確定查詢(xún)起始索引位置

●?第二個(gè)參數(shù)也可以填寫(xiě)負(fù)整數(shù), 表示倒數(shù)第幾個(gè)開(kāi)始檢索

●?冷知識(shí) : includes 方法可以檢測(cè)到 NaN 這玩意兒~~

2.? 運(yùn)算符擴(kuò)展 : 冪運(yùn)算符

●?** 符號(hào)

●?是一個(gè)取冪的符號(hào), 等價(jià)于 Math.pow() 方法

ES2017 ( ES8 )

●?更新的內(nèi)容也不是很多, 也是為了 ES2015( ES6 ) 做了一些補(bǔ)充擴(kuò)展

1.? 異步解決方案的語(yǔ)法糖 async / await

●?兩個(gè)關(guān)鍵字 async 和 await

●?用于對(duì) Promise 的優(yōu)化書(shū)寫(xiě)方案

●?async

○?書(shū)寫(xiě)在函數(shù)前面

○?為了在該函數(shù)內(nèi)可以使用 await 關(guān)鍵字

●?await

○?需要書(shū)寫(xiě)在一個(gè)有 async 關(guān)鍵字的函數(shù)內(nèi)

○?用于等待 Promise 的結(jié)果

○?可以捕獲到 Promise 成功的狀態(tài)

●?例子 :

○?當(dāng) fn 調(diào)用的時(shí)候, 因?yàn)?ajax 方法內(nèi)封裝返回的是一個(gè) Promise 對(duì)象

○?因?yàn)槭褂昧?async / await 關(guān)鍵字

○?所以會(huì)在這一段異步代碼結(jié)束后, 把 success 的結(jié)果給到 res 以后, 再繼續(xù)向后執(zhí)行代碼

2.? 對(duì)象擴(kuò)展 : Object.values()

●?Object.values()

●?用于獲取到對(duì)象內(nèi)的每一個(gè) 值

●?返回值 : 是一個(gè)數(shù)組, 包含對(duì)象內(nèi)每一個(gè)值

3.? 對(duì)象擴(kuò)展 : Object.entries()

●?Object.entries()

●?用于將給定對(duì)象的可枚舉屬性轉(zhuǎn)化為一個(gè)包含鍵值對(duì)的數(shù)組

●?返回值 : 是一個(gè)二維數(shù)組, 和 for ... in 遍歷出來(lái)的順序是一樣的

4.? 對(duì)象擴(kuò)展 : Object.getOwnPropertyDescriptors()

●?Object.getOwnPropertyDescriptors( 對(duì)象 )

●?返回對(duì)象內(nèi)每一個(gè)自身屬性的描述詳細(xì)信息

●?信息內(nèi)可能包含的值為 configurable / enumerable / wrieable / value / get / set

5.? 字符串方法擴(kuò)展

●?String.prototype.padStart() / String.prototype.padEnd()

●?用于填充字符串, 分別是在 開(kāi)始位置填充 和 結(jié)束位置填充

●?語(yǔ)法 :

○?String.prototype.padStart( length, str )

○?String.prototype.padEnd( length, str )

●?注意 : 如果你的 length 小于字符串本身的 length, 那么不進(jìn)行填充, 返回原始字符串

●?示例 :

●?String.prototype.padEnd() 方法的語(yǔ)法和參數(shù)是一樣的, 只不過(guò)是填充在結(jié)尾位置

6.? 尾逗號(hào)擴(kuò)展

●?在函數(shù)定義和調(diào)用的時(shí)候, 可以在參數(shù)結(jié)尾位置添加一個(gè)逗號(hào)而不報(bào)錯(cuò)

ES2018 ( ES9 )

1.? 異步擴(kuò)展 : for await of

●?用于遍歷異步的 Iterator 接口

2.? Promise 方法擴(kuò)展 : Promise.prototype.finally()

●?表示 Promise 完成

●?不管一個(gè) Promise 最終是轉(zhuǎn)換到 fulfilled 或者 rejected 狀態(tài), 在執(zhí)行完 then 或者 catch 回調(diào)以后, 都會(huì)執(zhí)行一下 finally 回調(diào)

3.? 對(duì)象的擴(kuò)展運(yùn)算符 : ...

●?可以用于從一個(gè)對(duì)象內(nèi)取值, 相當(dāng)于將目標(biāo)對(duì)象內(nèi)的所有可遍歷但是尚未被獲取的屬性, 分配到一個(gè)新的對(duì)象上, 一般用于解構(gòu)賦值

○?注意 : ... 運(yùn)算符一定要放在最后

4.? 正則擴(kuò)展 : dotAll 模式

●?正則內(nèi)的 點(diǎn)(.)

我們都知道, 在正則表達(dá)式內(nèi) 點(diǎn)(.) 是一個(gè)非常特殊的字符

表示的是任意字符, 但是有兩個(gè)例外

1.? 四個(gè)自己的 UTF-16 字符, 不過(guò)這個(gè)可以用 u 修飾符解決

2.? 終止符, 點(diǎn)( . ) 表示不了

U+000A 換行符 ( \n )

U+000D 回車(chē)符 ( \r )

U+2028 行分隔符

U+2029 段分隔符

●?現(xiàn)在擴(kuò)展了一個(gè) s 修飾符

當(dāng)你在書(shū)寫(xiě)正則表達(dá)式的時(shí)候, 如果用了 s 修飾符

表示進(jìn)入了 dotAll 模式, 既 點(diǎn)(.) 可以表示一切字符, 沒(méi)有例外

●?配合 s 修飾符, 正則還給出了一個(gè) dotAll 屬性, 用來(lái)指出當(dāng)前正則是否處在 dotAll 模式

5.? 正則擴(kuò)展 : 具名組匹配

●?在正則表達(dá)式內(nèi), 小括號(hào) 可以表示一個(gè)單獨(dú)的小分組進(jìn)行單獨(dú)捕獲

●?在使用 exec 方法的時(shí)候, 會(huì)把每一個(gè) 小括號(hào) 的內(nèi)容單獨(dú)捕獲出來(lái)

●?這就是以前正則捕獲的結(jié)果

會(huì)發(fā)現(xiàn), 可以把每一個(gè)小分組內(nèi)容捕獲出來(lái), 但是我們用起來(lái)的時(shí)候不是很方便

如果我想單獨(dú)使用小分組單獨(dú)捕獲出來(lái)的內(nèi)容

res[0]

res[1]

res[2]

●?現(xiàn)在, 添加了正則內(nèi)小分組命名的能力, 我們可以給每一個(gè)小分組起名字

●?語(yǔ)法 : (?<名字>正則)

ES2019 ( ES10 )

1.? 數(shù)組擴(kuò)展 : Array.prototype.flat() 和 Array.prototype.flatMap()

●?Array.prototype.flat( 數(shù)字 ) 方法用于數(shù)組扁平化

●?參數(shù)表示扁平化時(shí)的遞歸深度, 默認(rèn)是 1

●?Array.prototype.flatMap() 方法也是用于扁平化

這個(gè)方就相當(dāng)于是一個(gè)對(duì)組通過(guò) map 映射, 然后通過(guò) flat 扁平化

但是他的扁平深度只能是 1

arr.flatMap()

等價(jià)于

arr.map().flat(1)

2.? 對(duì)象擴(kuò)展 : Object.fromEntries()

●?利用給定的鍵值對(duì)構(gòu)建一個(gè)對(duì)象數(shù)據(jù)結(jié)構(gòu)

●?它的功能剛好和 Object.entries() 是相反的

3.? 字符串?dāng)U展 : String.prototype.trimStart() 和 trimEnd()

●?這兩個(gè)方法其實(shí)以前就有過(guò), 叫做 trimLeft() 和 trimRight()

●?只不過(guò)在 ES2019 中, 名稱(chēng)被更改為 trimStart 和 trimEnd 只是為了看起來(lái)更直觀

●?trimStart() 修剪字符串的開(kāi)頭空白

●?trimEnd() 修剪字符串的結(jié)尾空白

4.? Symbol 擴(kuò)展 : Symbol.prototype.description

●?我們?cè)趧?chuàng)建 Symbol 的時(shí)候, 其實(shí)是可以添加一個(gè)描述的

●?但是將來(lái)你如果想要取會(huì)這個(gè)描述就比較麻煩了

以前

我們只能利用 toString 方法, 拿到 Symbol 的字符串

然后自己從字符串中把我們定義 Symbol 的時(shí)候添加的描述拿回來(lái)

○?我們自己從 origin 內(nèi)把我們需要的描述信息截取出來(lái)

○?比較麻煩

●?在 ES2019 內(nèi), 給 Symbol 添加了一個(gè)只讀屬性, 叫做 description

●?可以直接拿到每一個(gè) Symbol 初始化的時(shí)候填寫(xiě)描述信息

5.? 可選 catch 綁定

●?先來(lái)看一下以前的 catch 語(yǔ)法

●?以前的語(yǔ)法迫使我們必須給 catch 綁定一個(gè)異常變量

●?但是其實(shí)大部分的時(shí)候, 我們是不需要用到這個(gè)變量的

●?但是在開(kāi)發(fā)過(guò)程中, 不寫(xiě)又會(huì)報(bào)錯(cuò), 這就使得我們每次都要寫(xiě)上

●?但是在 ES2019 的提案中, 讓我們可以忽略掉這個(gè)變量

6.? JSON 擴(kuò)展 : Superset 超集

●?并不是一個(gè)什么新的東西, 只是對(duì) JSON 解析的能力進(jìn)行了擴(kuò)展

●?以前, JSON 在解析的時(shí)候, 如果字符串中包含有 分隔符(\u2028) 或者 段落分隔符(\u2029) 是不能被解析的, 會(huì)在解析過(guò)程中報(bào)錯(cuò)

●?從 ES2019 以后, 可以解析這些內(nèi)容了

7.? JSON 擴(kuò)展 : stringify 加強(qiáng)格式轉(zhuǎn)化

●?也是增強(qiáng)了 JSON 在格式轉(zhuǎn)換的時(shí)候的能力

●?主要是針對(duì)于 emoji 的表現(xiàn)

●?以前, emoji 和一些其他特殊字符被表示為兩個(gè)代理項(xiàng)的組合, 如果我們用 JSON 進(jìn)行格式轉(zhuǎn)換的時(shí)候, 會(huì)被轉(zhuǎn)換為無(wú)效字符

●?ES2019 加強(qiáng)以后, 會(huì)在特有代碼之前插入轉(zhuǎn)義符, 結(jié)果依舊是一個(gè)可讀且有效的 UTF-8 / UTF-16 的編碼