ES 2023新特性速解
一、新增數(shù)組方法
操作數(shù)組的方法
Array.prototype.toSorted(compareFn) //返回一個新數(shù)組，其中元素按升序排序，而不改變原始數(shù)組。
Array.prototype.toReversed() //返回一個新數(shù)組，該數(shù)組的元素順序被反轉(zhuǎn)，但不改變原始數(shù)組。
Array.prototype.toSpliced(start,deleteCount,item1...,itemN) //返回一個新數(shù)組，在給定索引處刪除和/或替換了一些元素，而不改變原始數(shù)組。
新增的這三個數(shù)組方法分別對標以下原有的以下三個方法，它們與原先方法的區(qū)別就是：執(zhí)行它們并不會影響原先的數(shù)組
Array.prototype.sort(compareFn)
Array.prototype.reverse()
Array.prototype.splice(start,deleteCount,item1...,itemN)
toSorted
compareFn：指定一個定義排序順序的函數(shù)。如果省略，則將數(shù)組元素轉(zhuǎn)換為字符串，然后根據(jù)每個字符的 Unicode 碼位值進行排序。
compareFn(a, b) 返回值 |
排序順序 |
|---|---|
| > 0 | a在b后，如[b, a] |
| < 0 | a在b前，如[a, b] |
| === 0 | 保持 a 和 b 原來的順序 |
const arr = [5,7,8,61,24,32,42,35]
//不傳入?yún)?shù)
const sortArr1 = arr.toSorted()
//傳入箭頭函數(shù) a:比較的第一個元素，b:比較的第二個元素
const sortArr2 = arr.toSorted((a,b)=>a-b)
console.log(arr) //[5, 7, 8, 61, 24, 32, 42, 35]
console.log(sortArr1) //[24, 32, 35, 42, 5, 61, 7, 8]
console.log(sortArr2) //[5, 7, 8, 24, 32, 35, 42, 61]
toReversed
const arr = [5,7,8,61,24,32,42,35]
const reverseArr = arr.toReversed()
console.log(arr) //[5, 7, 8, 61, 24, 32, 42, 35]
console.log(reverseArr) //[35, 42, 32, 24, 61, 8, 7, 5]
toSpliced
start
從 0 開始計算的索引，表示要開始改變數(shù)組的位置，它會被轉(zhuǎn)換為整數(shù)。
- 如果
start < 0，則從數(shù)組末尾開始計數(shù)，使用start + array.length。 - 如果
start < -array.length或者省略了start，則使用0。 - 如果
start >= array.length，不會刪除任何元素，但該方法將表現(xiàn)為添加元素的函數(shù)，添加提供的所有元素。
deleteCount 可選
一個整數(shù)，指示數(shù)組中要從 start 刪除的元素數(shù)量。
如果 deleteCount 被省略了，或者如果它的值大于或等于由 start 指定的位置到數(shù)組末尾的元素數(shù)量，將會刪除從 start 到數(shù)組末尾的所有元素。但是，如果你想要傳遞任何 itemN 參數(shù)，則應(yīng)向 deleteCount 傳遞 Infinity 值，以刪除 start 之后的所有元素，因為顯式的 undefined 會轉(zhuǎn)換為 0。
如果 deleteCount 是 0 或者負數(shù)，則不會刪除元素。在這種情況下，你應(yīng)該指定至少一個新元素（見下文）。
item1, …, itemN 可選
元素將從 start 開始添加到數(shù)組當(dāng)中。
如果你沒有指定任何元素，toSpliced() 只會從數(shù)組中刪除元素。
const arr = [5,7,8,61,24,32,42,35]
//插入元素
const insertArr = arr.toSpliced(0,0,7)
//刪除元素
const deleteArr = arr.toSpliced(0,1)
//替換元素
const replaceArr = arr.toSpliced(0,1,7)
console.log(arr) //[5, 7, 8, 61, 24, 32, 42, 35]
console.log(insertArr) //[7, 5, 7, 8, 61, 24, 32, 42, 35]
console.log(deleteArr) //[7, 8, 61, 24, 32, 42, 35]
console.log(replaceArr) //[7, 7, 8, 61, 24, 32, 42, 35]
瀏覽器兼容性
查找數(shù)組元素的方法
Array.prototype.findLast(compareFn) //方法反向迭代數(shù)組，并返回滿足提供的測試函數(shù)的第一個元素的值。如果沒有找到對應(yīng)元素，則返回 undefined。
Array.prototype.findLastIndex() //方法反向迭代數(shù)組，并返回滿足提供的測試函數(shù)的第一個元素的下標索引。如果沒有找到對應(yīng)元素，則返回 undefined。
callbackFn
數(shù)組中測試元素的函數(shù)?；卣{(diào)應(yīng)該返回一個真值，表示已找到匹配的元素，否則返回一個假值。函數(shù)在被調(diào)用時會傳遞以下參數(shù)：
-
element當(dāng)前遍歷到的元素。
-
index當(dāng)前遍歷到的元素的索引（位置）。
-
array調(diào)用
findLast()的數(shù)組本身。
findLast
const arr = [5,7,8,61,24,32,42,35]
console.log(arr.findLast(a=>a === 5))
findLastIndex
const arr = [5,7,8,61,24,5,32,42,35]
console.log(arr.findIndex(a=>a === 5)) //0
console.log(arr.findLastIndex(a=>a === 5)) //5
瀏覽器兼容性
二、WeakMap支持鍵值類型新增
新增Sybmol類型來作為WeakMap的Key,助于對象被垃圾收集
const symbol= Symbol('foo')
const weakMap = new WeakMap()
weakMap.set(symbol,51)
weakMap.get(symbol) //51
瀏覽器兼容性
三、Hashbang 語法
Hashbang 注釋是一種特殊的注釋語法，其行為與單行注釋 (//) 完全一樣，只是它以 #! 開頭，并且只在腳本或模塊的最開始處有效。注意，#! 標志之前不能有任何空白字符。注釋由 #! 之后的所有字符組成直到第一行的末尾；只允許有一條這樣的注釋。JavaScript 中的 hashbang 注釋類似于 Unix 中的 shebang，它提供了一個特定的 JavaScript 解釋器的路徑，用它來執(zhí)行這個腳本。
// 寫在腳本文件第一行
#!/usr/bin/env node
'use strict';
console.log(1);
// 寫在模塊文件第一行
#!/usr/bin/env node
export {};
console.log(1);
這樣就可以直接運行腳本代碼了
# 以前執(zhí)行腳本
node demo.js
# 有了 hashbang 之后執(zhí)行腳本
./demo.js
只有當(dāng)腳本直接在 shell 中運行時，Hashbang 語法才有語意意義，其他環(huán)境下 JavaScript 解釋器會把它視為普通注釋。文章來源：http://www.zghlxwxcb.cn/news/detail-709862.html
參考文檔地址：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSpliced文章來源地址http://www.zghlxwxcb.cn/news/detail-709862.html
到了這里，關(guān)于ES 2023新特性速解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
