Javascript 是前端三劍客技術(shù)最重要的技能之一。每個(gè)學(xué)習(xí)前端的人，這個(gè)JavaScript技術(shù)是必須要學(xué)的。隨著技術(shù)不斷更新迭代，所以現(xiàn)在有一些新的知識(shí)來(lái)支持我們?nèi)W(xué)習(xí) ES6 ~ ES12。

　　一、ECMAScript簡(jiǎn)介

　　ECMA 規(guī)范由各方組成，包括瀏覽器供應(yīng)商，他們會(huì)開(kāi)會(huì)推動(dòng) JavaScript 提案。

　　二、ES6 (ES2015)

　　1.Class

　　JavaScript 是一種使用原型鏈的語(yǔ)言。

　　早期，類(lèi)似OO的概念是通過(guò)原型鏈做出來(lái)的，相當(dāng)復(fù)雜。Class 終于在 ES6 中推出。

　　2.模塊

　　每個(gè)模塊都有自己的命名空間以避免沖突，使用導(dǎo)入和導(dǎo)出來(lái)導(dǎo)入和導(dǎo)出。

　　基本上將 .js 文件視為模塊。

　　3.箭頭函數(shù)

　　() => {…}，是函數(shù)的縮寫(xiě)。最重要的是，他可以確保這始終指向自己

　　不再寫(xiě) var self = this、var that = this 等等!

　　4.函數(shù)參數(shù)默認(rèn)值

　　如果函數(shù)不傳遞參數(shù)，則使用默認(rèn)值，更簡(jiǎn)潔的寫(xiě)法。

　　5.模板字面量

　　過(guò)去，長(zhǎng)字符串的組合是通過(guò) + 號(hào)來(lái)連接的。

　　它的可讀性很差，使用模板字符串，它更容易閱讀。

　　6.解構(gòu)賦值

　　允許 JavaScript 輕松地從數(shù)組和對(duì)象中獲取內(nèi)容。

　　7.擴(kuò)展運(yùn)算符

　　它是用三點(diǎn)(...)表示，Array是可以擴(kuò)展的，如果是Object，會(huì)按照key-value進(jìn)行擴(kuò)展。

　　8.對(duì)象屬性簡(jiǎn)寫(xiě)

　　如果構(gòu)成對(duì)象的字段名稱(chēng)與前面段落中的變量相同，則可以省略該值，看起來(lái)更流線型。

　　9.Promise

　　Promise 是一種異步(非同步)寫(xiě)法的解決方案，比原來(lái)的回調(diào)寫(xiě)法更加優(yōu)雅。

　　早期是開(kāi)源社區(qū)的套件，后來(lái)被納入語(yǔ)言標(biāo)準(zhǔn)。

　　早期回調(diào) hell……

　　使用 Promise 后，回調(diào) hell 扁平化

　　并且ES8(ES2017)發(fā)布了更完美的async，await，直接讓異步寫(xiě)得像同步一樣。

　　缺點(diǎn)是當(dāng)思路落到復(fù)雜的業(yè)務(wù)邏輯上時(shí)，有時(shí)會(huì)錯(cuò)過(guò)await，在運(yùn)行時(shí)發(fā)現(xiàn)錯(cuò)誤。

　　10.let, const 替換 var

　　let：通用變量，可以被覆蓋

　　const：一旦聲明，其內(nèi)容不可修改。因?yàn)閿?shù)組和對(duì)象都是指標(biāo)，所以它們的內(nèi)容可以增加或減少, 但不改變其指標(biāo).

　　早期，JavaScript的var作用域是全局的。

　　也就是說(shuō)，變量是在使用后聲明的，執(zhí)行的時(shí)候會(huì)自動(dòng)提到頂層，后面會(huì)賦值。

　　更容易受到污染。

　　使用 let 或 const

　　三、ES7 (ES2016)

　　1.Array.prototype.includes()

　　用于判斷數(shù)組是否包含指定值，如果是，則返回true;否則，返回假。

　　和之前indexOf的用法一樣，可以認(rèn)為是返回一個(gè)布爾值，語(yǔ)義上更加清晰。

　　2.冪運(yùn)算符

　　四、ES8 (ES2017)

　　1.async, await

　　異步函數(shù)是使用 async 關(guān)鍵字聲明的函數(shù)，并且允許在其中使用 await 關(guān)鍵字。async 和 await 關(guān)鍵字使異步的、基于 Promise 的行為能夠以更簡(jiǎn)潔的方式編寫(xiě)，避免了顯式配置 Promise 鏈的需要。

　　2.Object.values()

　　返回對(duì)象自身屬性的所有值，不包括繼承的值。

　　3.Object.entries()

　　返回可枚舉鍵，即傳入對(duì)象本身的值。

　　4.字符串 padStart() & padEnd()

　　你可以在字符串的開(kāi)頭或結(jié)尾添加其他內(nèi)容，并將其填充到指定的長(zhǎng)度。

　　過(guò)去，這些功能通常是通過(guò)通用的輔助工具包(如 lodash)引入的，并將它們放在一起。

　　本機(jī)語(yǔ)法現(xiàn)在直接提供：

　　最常用的情況應(yīng)該是金額，填寫(xiě)指定長(zhǎng)度，不足加0。

　　5.尾隨逗號(hào)

　　允許在函數(shù)參數(shù)列表末尾使用逗號(hào)

　　6.Object.getOwnPropertyDescriptors()

　　獲取你自己的描述符，一般的開(kāi)發(fā)業(yè)務(wù)需求通常不會(huì)用到。

　　7.共享數(shù)組緩沖區(qū)

　　SharedArrayBuffer 是一個(gè)固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)，類(lèi)似于 ArrayBuffer。

　　可用于在共享內(nèi)存上創(chuàng)建數(shù)據(jù)。與 ArrayBuffer 不同，SharedArrayBuffer 不能分離。

　　8.Atomics object

　　Atomics 對(duì)象，它提供了一組靜態(tài)方法來(lái)對(duì) SharedArrayBuffer 執(zhí)行原子操作。

　　原子的所有屬性和函數(shù)都是靜態(tài)的，就像數(shù)學(xué)一樣，出不來(lái)新的。

　　如果一個(gè)多線程同時(shí)在同一個(gè)位置讀寫(xiě)數(shù)據(jù)，原子操作保證了正在操作的數(shù)據(jù)如預(yù)期的那樣：即在上一個(gè)子操作結(jié)束后執(zhí)行下一個(gè)，操作不中斷。

　　可以說(shuō)是針對(duì)Node.Js中多線程Server的開(kāi)發(fā)而加強(qiáng)的功能，在前端開(kāi)發(fā)中使用的機(jī)會(huì)相當(dāng)?shù)汀?/p>

　　chrome 已經(jīng)提供了支持

　　五、ES9 (ES2018)

　　1.循環(huán)等待

　　在異步函數(shù)中，有時(shí)需要在同步 for 循環(huán)中使用異步(非同步)函數(shù)。

　　上面的代碼不會(huì)像預(yù)期的那樣輸出期望的結(jié)果。

　　for循環(huán)本身還是同步的，會(huì)在循環(huán)中的異步函數(shù)完成之前執(zhí)行整個(gè)for循環(huán)，然后將里面的異步函數(shù)逐一執(zhí)行。

　　ES9 增加了異步迭代器，允許 await 與 for 循環(huán)一起使用，逐步執(zhí)行異步操作。

　　2.promise.finally()

　　無(wú)論是成功(.then())還是失敗(.catch())，Promise 后面都會(huì)執(zhí)行的部分。

　　3.Rest, Spread

　　在 ES2015 中，Rest 不定長(zhǎng)度參數(shù)…，可以轉(zhuǎn)換成數(shù)組傳入。

　　而傳播則與其他相反，將數(shù)組轉(zhuǎn)換為單獨(dú)的參數(shù)。

　　例如，Math.max() 返回傳入數(shù)字中的最大值。

　　它還提供了對(duì)Objects進(jìn)行解構(gòu)賦值的功能。

　　4.正則表達(dá)式組

　　RegExp 可以返回匹配的數(shù)據(jù)包

　　5.正則表達(dá)式前瞻否定

　　6.正則表達(dá)式 dotAll

　　. 表示匹配除輸入以外的任何符號(hào)，添加這些標(biāo)志后，允許匹配輸入。

　　六、ES10 (ES2019)

　　1.更友好的 JSON.stringify

　　如果輸入是 Unicode 但超出范圍，則 JSON.stringify 最初會(huì)返回格式錯(cuò)誤的 Unicode 字符串。

　　現(xiàn)在是第 3 階段的提案，使其成為有效的 Unicode 并以 UTF-8 呈現(xiàn)

　　2.Array.prototype.flat() & Array.prototype.flatMap()

　　展平陣列

　　flatMap()，相當(dāng)于reduce with concat，可以展平一個(gè)維度

　　3.String.prototype.trimStart() & String.prototype.trimEnd()

　　trimStart() 方法從字符串的開(kāi)頭刪除空格，trimLeft() 是此方法的別名。

　　trimEnd() 方法從字符串末尾刪除空格，trimRight() 是此方法的別名。

　　4.Object.fromEntries()

　　Object.fromEntries() 方法將鍵值對(duì)列表轉(zhuǎn)換為對(duì)象。

　　5.String.prototype.matchAll

　　matchAll() 方法返回將字符串與正則表達(dá)式匹配的所有結(jié)果的迭代器，包括捕獲組。

　　6.fixed catch 綁定

　　在使用catch之前，不管有用與否，一定要傳入一個(gè)eparameter來(lái)表示接收到的錯(cuò)誤。

　　如果現(xiàn)在不用，可以省略。

　　7.BigInt(新數(shù)字類(lèi)型)

　　BigInt 值，有時(shí)也稱(chēng)為 BigInt，是一個(gè) bigint 原語(yǔ)，通過(guò)將 n 附加到整數(shù)文字的末尾，或通過(guò)調(diào)用 BigInt() 函數(shù)(沒(méi)有 new 運(yùn)算符)并給它一個(gè)整數(shù)值或字符串來(lái)創(chuàng)建 價(jià)值。

　　ES5：String, Number, Boolean, Null, Undefined

　　ES6 新增：Symbol，到ES6就一共有6 種類(lèi)型

　　ES10 新增：BigInt，就達(dá)到 7 種類(lèi)型

　　七、ES11 (ES2020)

　　1.Promise.allSettled()

　　Promise.allSettled() 方法返回一個(gè)在所有給定的 Promise 都已實(shí)現(xiàn)或拒絕后實(shí)現(xiàn)的 Promise，并帶有一組對(duì)象，每個(gè)對(duì)象都描述了每個(gè) Promise 的結(jié)果。

　　它通常用于當(dāng)你有多個(gè)不依賴于彼此成功完成的異步任務(wù)，或者你總是想知道每個(gè) Promise 的結(jié)果時(shí)。

　　相比之下，Promise.all() 返回的 Promise 可能更合適，如果任務(wù)相互依賴/如果你想立即拒絕其中任何一個(gè)拒絕。

　　2.可選鏈接?

　　在開(kāi)發(fā)中，很容易遇到先判斷數(shù)據(jù)是否存在，判斷是否寫(xiě)入。

　　如果返回的數(shù)據(jù)為null或者用戶對(duì)象下沒(méi)有.intounder，則會(huì)拋出Uncaught TypeError: Cannot read property...。

　　導(dǎo)致程序無(wú)法繼續(xù)執(zhí)行

　　使用 ?，語(yǔ)法更簡(jiǎn)單

　　如果存在，獲取name的值，如果不存在，賦值undefined

　　與 || 一起使用，只需一行!

　　3.Nullish 合并運(yùn)算符 ??

　　在JavaScript中，遇到0、null、undefuded時(shí)會(huì)自動(dòng)轉(zhuǎn)為false。

　　但有時(shí)0其實(shí)是一個(gè)正常的值，只能容錯(cuò)undefined和null

　　但是使用??，你可以保持簡(jiǎn)潔

　　4.Dynamic-import

　　從字面上看，應(yīng)該很容易理解，就是在需要的時(shí)候加載相關(guān)的邏輯。

　　5.GlobalThis

　　全局 globalThis 屬性包含全局 this 值，類(lèi)似于全局對(duì)象。

　　過(guò)去的做法是：

　　現(xiàn)在，我們可以這樣做：

　　八、ES12 (ES2021)

　　1.Promise.any()

　　Promise.any() 接受一個(gè)可迭代的 Promise 對(duì)象。它返回一個(gè)單一的 Promise，只要 iterable 中的任何一個(gè) Promise 完成，就會(huì)返回一個(gè) Promise，并帶有已完成的 Promise 的值。

　　如果可迭代的實(shí)現(xiàn)中沒(méi)有任何承諾(如果所有給定的承諾都被拒絕)，則返回的承諾會(huì)被 AggregateError 拒絕，AggregateError 是 Error 的一個(gè)新子類(lèi)，它將單個(gè)錯(cuò)誤組合在一起。

　　2.邏輯賦值運(yùn)算符

　　在開(kāi)發(fā)過(guò)程中，我們可以使用 ES2020 中提出的邏輯運(yùn)算符 ||、&& 和 ??(Nullish coalescing operator)來(lái)解決一些問(wèn)題。

　　而 ES2021 會(huì)提出 ||= , &&= , ??= ，概念類(lèi)似于 += ：

　　3.WeakRef

　　WeakRef 對(duì)象包含對(duì)對(duì)象的弱引用，該對(duì)象稱(chēng)為其目標(biāo)或引用對(duì)象。對(duì)對(duì)象的弱引用是不會(huì)阻止對(duì)象被垃圾收集器回收的引用。

　　相反，普通(或強(qiáng))引用將對(duì)象保存在內(nèi)存中，當(dāng)一個(gè)對(duì)象不再有任何強(qiáng)引用時(shí)，JavaScript 引擎的垃圾收集器可能會(huì)銷(xiāo)毀該對(duì)象并回收其內(nèi)存。

　　如果發(fā)生這種情況，你將無(wú)法再?gòu)娜跻弥蝎@取對(duì)象。

　　此示例啟動(dòng)一個(gè)顯示在 DOM 元素中的計(jì)數(shù)器，當(dāng)該元素不再存在時(shí)停止：

　　到這里，今天要跟你分享的內(nèi)容就全部結(jié)束了，這些都是我的一些練習(xí)和學(xué)習(xí)筆記總結(jié)，希望對(duì)你有用。