一、ES7 - Array Includes

在ES7之前，如果我們想判斷一個數組中是否包含某個元素，需要通過 indexOf 獲取結果，并且判斷是否為 -1。

在ES7中，我們可以通過includes來判斷一個數組中是否包含一個指定的元素，根據情況，如果包含則返回 true，否則返回false。

二、ES7 –指數(乘方) exponentiation運算符

在ES7之前，計算數字的乘方需要通過 Math.pow 方法來完成。

在ES7中，增加了 ** 運算符，可以對數字來計算乘方。

三、ES8 Object values

之前我們可以通過 Object.keys 獲取一個對象所有的key，在ES8中提供了 Object.values 來獲取所有的value值：

四、ES8 Object entries

通過Object.entries 可以獲取到一個數組，數組中會存放可枚舉屬性的鍵值對數組

五、ES8 - String Padding

某些字符串我們需要對其進行前后的填充，來實現某種格式化效果，ES8中增加了 padStart 和 padEnd 方法，分別是對字符串的首尾進行填充的。

六、ES8 - Trailing Commas

在ES8中，我們允許在函數定義和調用時多加一個逗號：

七、ES8 - Object Descriptors

獲取一個對象的所有屬性描述符

八、ES10 - flat flatMap

flat() 方法會按照一個可指定的深度遞歸遍歷數組，并將所有元素與遍歷到的子數組中的元素合并為一個新數組返回。

flatMap() 方法首先使用映射函數映射每個元素，然后將結果壓縮成一個新數組。

• 注意一：flatMap是先進行map操作，再做flat的操作；
• 注意二：flatMap中的flat相當于深度為1；
  

九、ES10 - Object fromEntries

在前面，我們可以通過 Object.entries 將一個對象轉換成 entries，那么如果我們有一個entries了，如何將其轉換成對象呢？

• ES10提供了 Object.formEntries來完成轉換：
  
  那么這個方法有什么應用場景呢？
  

十、ES10 - trimStart trimEnd

去除一個字符串首尾的空格，我們可以通過trim方法，如果單獨去除前面或者后面呢？

• ES10中給我們提供了trimStart和trimEnd；
  

十一、ES11 - BigInt

在早期的JavaScript中，我們不能正確的表示過大的數字：

• 大于MAX_SAFE_INTEGER的數值，表示的可能是不正確的。

那么ES11中，引入了新的數據類型BigInt，用于表示大的整數：

• BigInt的表示方法是在數值的后面加上n
  

十二、ES11 - Nullish Coalescing Operator

注意：在之前，我們用const bar = foo || "default value"這種方式來判斷是存在問題的：并不能完全達到要求（只有foo為undefined或者null時才賦予foo默認值）
比如：下面這種foo初始值為空的情況下，我們本來期望的是foo為空，但是卻被賦予了默認值！

但是ES11，Nullish Coalescing Operator增加了空值合并操作符就不會存在這種問題：

十三、ES11 - Optional Chaining

可選鏈也是ES11中新增一個特性，主要作用是讓我們的代碼在進行null和undefined判斷時更加清晰和簡潔：

十四、ES11 - Global This

在之前我們希望獲取JavaScript環境的全局對象，不同的環境獲取的方式是不一樣的

• 比如在瀏覽器中可以通過this、window來獲取；
• 比如在Node中我們需要通過global來獲取；

那么在ES11中對獲取全局對象進行了統一的規范：globalThis

十五、ES11 - for…in標準化

在ES11之前，雖然很多瀏覽器支持for…in來遍歷對象類型，但是并沒有被ECMA標準化。

在ES11中，對其進行了標準化，for…in是用于遍歷對象的key的：

十六、ES12 - FinalizationRegistry

FinalizationRegistry 對象可以讓你在對象被垃圾回收時請求一個回調。

• FinalizationRegistry 提供了這樣的一種方法：當一個在注冊表中注冊的對象被回收時，請求在某個時間點上調用一個清理回調。（清理回調有時被稱為 finalizer ）;
• 你可以通過調用register方法，注冊任何你想要清理回調的對象，傳入該對象和所含的值;
  

十七、ES12 - WeakRefs

如果我們默認將一個對象賦值給另外一個引用，那么這個引用是一個強引用：

• 如果我們希望是一個弱引用的話，可以使用WeakRef；
  

十八、ES12 - logical assignment operators 邏輯賦值運算

// 1.||= 邏輯或賦值運算 // let message = undefined // message = message || "default value" // message ||= "default value" // console.log(message) // default value// 2.&&= 邏輯與賦值運算 // && // const obj = { // name: "why", // foo: function() { // console.log("foo函數被調用") // // } // } // obj.foo && obj.foo()// &&= let info = {name: "why" }// // 1.判斷info // 2.有值的情況下, 取出info.name // info = info && info.name info &&= info.name console.log(info) // why// 3.??= 邏輯空賦值運算 let message = 0 message ??= "default value" console.log(message) // 0

總結

以上是生活随笔為你收集整理的ES6~ES12——Array Includes、Object values、Object entries、Object fromEntries、flat、flatMap、空值合并运算符、可选链等的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。