一次性搞定JavaScript 從 ES6 到 ES12的基礎框架知識

　　Javascript 是前端三劍客技術最重要的技能之一。每個學習前端的人，這個JavaScript技術是必須要學的。隨著技術不斷更新迭代，所以現在有一些新的知識來支持我們去學習 ES6 ~ ES12。

　　一、ECMAScript簡介

　　ECMA 規范由各方組成，包括瀏覽器供應商，他們會開會推動 JavaScript 提案。

　　二、ES6 (ES2015)

　　1.Class

　　JavaScript 是一種使用原型鏈的語言。

　　早期，類似OO的概念是通過原型鏈做出來的，相當復雜。Class 終于在 ES6 中推出。

　　2.模塊

　　每個模塊都有自己的命名空間以避免沖突，使用導入和導出來導入和導出。

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

　　3.箭頭函數

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

　　不再寫 var self = this、var that = this 等等!

　　4.函數參數默認值

　　如果函數不傳遞參數，則使用默認值，更簡潔的寫法。

　　5.模板字面量

　　過去，長字符串的組合是通過 + 號來連接的。

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

　　6.解構賦值

　　允許 JavaScript 輕松地從數組和對象中獲取內容。

　　7.擴展運算符

　　它是用三點(...)表示，Array是可以擴展的，如果是Object，會按照key-value進行擴展。

　　8.對象屬性簡寫

　　如果構成對象的字段名稱與前面段落中的變量相同，則可以省略該值，看起來更流線型。

　　9.Promise

　　Promise 是一種異步(非同步)寫法的解決方案，比原來的回調寫法更加優雅。

　　早期是開源社區的套件，后來被納入語言標準。

　　早期回調 hell……

　　使用 Promise 后，回調 hell 扁平化

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

　　缺點是當思路落到復雜的業務邏輯上時，有時會錯過await，在運行時發現錯誤。

　　10.let, const 替換 var

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

　　const：一旦聲明，其內容不可修改。因為數組和對象都是指標，所以它們的內容可以增加或減少, 但不改變其指標.

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

　　也就是說，變量是在使用后聲明的，執行的時候會自動提到頂層，后面會賦值。

　　更容易受到污染。

　　使用 let 或 const

　　三、ES7 (ES2016)

　　1.Array.prototype.includes()

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

　　和之前indexOf的用法一樣，可以認為是返回一個布爾值，語義上更加清晰。

　　2.冪運算符

　　四、ES8 (ES2017)

　　1.async, await

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

　　2.Object.values()

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

　　3.Object.entries()

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

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

　　你可以在字符串的開頭或結尾添加其他內容，并將其填充到指定的長度。

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

　　本機語法現在直接提供：

　　最常用的情況應該是金額，填寫指定長度，不足加0。

　　5.尾隨逗號

　　允許在函數參數列表末尾使用逗號

　　6.Object.getOwnPropertyDescriptors()

　　獲取你自己的描述符，一般的開發業務需求通常不會用到。

　　7.共享數組緩沖區

　　SharedArrayBuffer 是一個固定長度的原始二進制數據緩沖區，類似于 ArrayBuffer。

　　可用于在共享內存上創建數據。與 ArrayBuffer 不同，SharedArrayBuffer 不能分離。

　　8.Atomics object

　　Atomics 對象，它提供了一組靜態方法來對 SharedArrayBuffer 執行原子操作。

　　原子的所有屬性和函數都是靜態的，就像數學一樣，出不來新的。

　　如果一個多線程同時在同一個位置讀寫數據，原子操作保證了正在操作的數據如預期的那樣：即在上一個子操作結束后執行下一個，操作不中斷。

　　可以說是針對Node.Js中多線程Server的開發而加強的功能，在前端開發中使用的機會相當低。

　　chrome 已經提供了支持

　　五、ES9 (ES2018)

　　1.循環等待

　　在異步函數中，有時需要在同步 for 循環中使用異步(非同步)函數。

　　上面的代碼不會像預期的那樣輸出期望的結果。

　　for循環本身還是同步的，會在循環中的異步函數完成之前執行整個for循環，然后將里面的異步函數逐一執行。

　　ES9 增加了異步迭代器，允許 await 與 for 循環一起使用，逐步執行異步操作。

　　2.promise.finally()

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

　　3.Rest, Spread

　　在 ES2015 中，Rest 不定長度參數…，可以轉換成數組傳入。

　　而傳播則與其他相反，將數組轉換為單獨的參數。

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

　　它還提供了對Objects進行解構賦值的功能。

　　4.正則表達式組

　　RegExp 可以返回匹配的數據包

　　5.正則表達式前瞻否定

　　6.正則表達式 dotAll

　　. 表示匹配除輸入以外的任何符號，添加這些標志后，允許匹配輸入。

　　六、ES10 (ES2019)

　　1.更友好的 JSON.stringify

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

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

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

　　展平陣列

　　flatMap()，相當于reduce with concat，可以展平一個維度

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

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

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

　　4.Object.fromEntries()

　　Object.fromEntries() 方法將鍵值對列表轉換為對象。

　　5.String.prototype.matchAll

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

　　6.fixed catch 綁定

　　在使用catch之前，不管有用與否，一定要傳入一個eparameter來表示接收到的錯誤。

　　如果現在不用，可以省略。

　　7.BigInt(新數字類型)

　　BigInt 值，有時也稱為 BigInt，是一個 bigint 原語，通過將 n 附加到整數文字的末尾，或通過調用 BigInt() 函數(沒有 new 運算符)并給它一個整數值或字符串來創建 價值。

　　ES5：String, Number, Boolean, Null, Undefined

　　ES6 新增：Symbol，到ES6就一共有6 種類型

　　ES10 新增：BigInt，就達到 7 種類型

　　七、ES11 (ES2020)

　　1.Promise.allSettled()

　　Promise.allSettled() 方法返回一個在所有給定的 Promise 都已實現或拒絕后實現的 Promise，并帶有一組對象，每個對象都描述了每個 Promise 的結果。

　　它通常用于當你有多個不依賴于彼此成功完成的異步任務，或者你總是想知道每個 Promise 的結果時。

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

　　2.可選鏈接?

　　在開發中，很容易遇到先判斷數據是否存在，判斷是否寫入。

　　如果返回的數據為null或者用戶對象下沒有.intounder，則會拋出Uncaught TypeError: Cannot read property...。

　　導致程序無法繼續執行

　　使用 ?，語法更簡單

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

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

　　3.Nullish 合并運算符 ??

　　在JavaScript中，遇到0、null、undefuded時會自動轉為false。

　　但有時0其實是一個正常的值，只能容錯undefined和null

　　但是使用??，你可以保持簡潔

　　4.Dynamic-import

　　從字面上看，應該很容易理解，就是在需要的時候加載相關的邏輯。

　　5.GlobalThis

　　全局 globalThis 屬性包含全局 this 值，類似于全局對象。

　　過去的做法是：

　　現在，我們可以這樣做：

　　八、ES12 (ES2021)

　　1.Promise.any()

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

　　如果可迭代的實現中沒有任何承諾(如果所有給定的承諾都被拒絕)，則返回的承諾會被 AggregateError 拒絕，AggregateError 是 Error 的一個新子類，它將單個錯誤組合在一起。

　　2.邏輯賦值運算符

　　在開發過程中，我們可以使用 ES2020 中提出的邏輯運算符 ||、&& 和 ??(Nullish coalescing operator)來解決一些問題。

　　而 ES2021 會提出 ||= , &&= , ??= ，概念類似于 += ：

　　3.WeakRef

　　WeakRef 對象包含對對象的弱引用，該對象稱為其目標或引用對象。對對象的弱引用是不會阻止對象被垃圾收集器回收的引用。

　　相反，普通(或強)引用將對象保存在內存中，當一個對象不再有任何強引用時，JavaScript 引擎的垃圾收集器可能會銷毀該對象并回收其內存。

　　如果發生這種情況，你將無法再從弱引用中獲取對象。

　　此示例啟動一個顯示在 DOM 元素中的計數器，當該元素不再存在時停止：

　　到這里，今天要跟你分享的內容就全部結束了，這些都是我的一些練習和學習筆記總結，希望對你有用。