你不知道的ES2023 | 京東雲技術團隊

6 月 27 日 ECMA 大會批准了 ECMAScript 2023 (es14)規範，意味着新的一些語法將正式成爲標準。下面來看看 ECMAScript 2023 有哪些值得我們關注的新特性。

總覽：

具體相關提案原文詳情可以跳轉：已完成提案

•從後往前查找數組

•Hashbang 語法

•Symbol 類型作爲 WeakMap 類型的鍵

•不改變原數組的新的原型方法

從後往前查找數組

在 JavaScript 中，已有的 Array.prototype.find() 和 Array.prototype.findIndex() 兩個方法是數組遍歷中最常使用的兩個方法，通常用來遍歷查找數組中符合要求的項，但是目前這兩種方法都是從前往後遍歷的

const arr = [10, 20, 30, 40, 50];
arr.find(item => item > 30); // 40
arr.findIndex(item => item > 30); // 3

如果想要從後往前遍歷，在以前必須先將數組進行反轉，然後在對反轉後的數組進行遍歷查找，這無疑是非常違反直覺的事情，今年的標準就新增了兩個數組遍歷方法 Array.prototype.findLast() 和 Array.prototype.findLastIndex() ，通過名字也可以看出來他們的作用，用法和 find 和 findIndex 完全一致，唯一的區別就是它是從後往前遍歷的，適用於數組和類數組

•findLast(): 返回第一個查找到的元素，如果沒有找到，返回 undefined

•findLastIndex(): 返回第一個查找到的元素的索引，如果沒有找到，返回 -1

const arr = [10, 20, 30, 40, 50];
arr.findLast(item => item > 30); // 50
arr.findLastIndex(item => item > 30); // 4
arr.findLast(item => item > 50); // undefined
arr.findLastIndex(item => item > 50); // -1

Hashbang 語法

Hashbang 註釋是一種特殊的註釋語法，其行爲與單行註釋 (//) 完全一樣，只是它以 #! 開頭，並且只在腳本或模塊的最開始處有效。注意，#! 標誌之前不能有任何空白字符。註釋由 #! 之後的所有字符組成直到第一行的末尾；只允許有一條這樣的註釋。JavaScript 中的 hashbang 註釋類似於 Unix 中的 shebang，它提供了一個特定的 JavaScript 解釋器的路徑，用它來執行這個腳本。

// 寫在腳本文件第一行
#!/usr/bin/env node
'use strict';
console.log(1);


// 寫在模塊文件第一行
#!/usr/bin/env node
export {};
console.log(1);

這樣就可以直接運行腳本代碼了

# 以前執行腳本
node demo.js


# 有了 hashbang 之後執行腳本
./demo.js

只有當腳本直接在 shell 中運行時，Hashbang 語法纔有語意意義，其他環境下 JavaScript 解釋器會把它視爲普通註釋。

Symbol 類型作爲 WeakMap類型的鍵

在之前，WeakMap 類型只允許使用對象作爲鍵，這是 WeakMap 的一個限制，新的標準擴展了 WeakMap API，允許使用唯一的 Symbol 類型作爲鍵。這樣更容易創建和共享 key。

const weakMap = new WeakMap();


// 更具象徵意義的key
const key = Symbol('my ref');
const someObject = { /* data */ };


weakMap.set(key, someObject)

除此之外，該標準還解決了另一個在 Stage2 階段的提案 元組與記錄 中引入的問題：如何在原始數據類型中，引用和訪問非原始值？由元組和記錄的提案中，元組和記錄類型中不能包含對象、函數和方法，當這樣做時會拋出 TypeError 異常。

const server = #{
  port: 8080,
  handler: function (req) { /* ... */ } // TypeError
}

這種限制存在是因爲元組和記錄提案的關鍵目標之一是默認保證數據的深度不可變性和結構相等性。接受 Symbol 值作爲 WeakMap 鍵將允許 JavaScript 庫實現自己的類似的 RefConllection 的東西，它可以重用的同時不會隨着時間的推移泄漏內存。

class RefBookkeeper {
  #references = new WeakMap();
  ref(obj) {
    const sym = Symbol();
    this.#references.set(sym, obj);
  }
  deref(sym) { return this.#references.get(sym); }
}
globalThis.refs = new RefBookkeeper();


const server = #{
  port: 8080,
  handler: refs.ref(function (req) { /* ... */ })
}
refs.deref(server.handler)({ /* ... */})

不改變原數組的新的原型方法

這次標準新增了 4 個不改變原數組的原型方法：

•Array.prototype.toReversed() -> Array

•Array.prototype.toSorted(compareFn) -> Array

•Array.prototype.toSpliced(start, deleteCount, ...items) -> Array

•Array.prototype.with(index, value) -> Array

在 JavaScript 中，數組中的大部分方法是非破壞性的，不會改變原數組，比如 filter() 方法

const arr = ['a', 'b', 'b', 'c'];
const result = arr.filter(x => x !== 'b');
console.log(result); // ['a', 'c']

當然，也存在一些方法，是改變原數組的，比如 **sort()** 方法

const arr = ['c', 'a', 'b'];
const result = arr.sort();
console.log(result); // ['a', 'b', 'c']

在數組方法中，下面的方法是具有破壞性的：

•reverse()

•sort()

•splice()

如果想要使用這些數組方法但是又不改變原數組，我們需要先創建原數組的副本，然後對數組副本使用這些方法。因此就引入了這三個方法的非破壞性的版本，就不需要再創建數組副本進行操作了。

除此之外，還有一個新的非破壞性的方法: with(index, value)。該方法會以非破壞性的方式，替換給定參數 index 位置的數組元素，即 arr[index] = value 的非破壞性版本。

// toReversed()
const arr = ['a', 'b', 'c'];
const result = arr.toReversed();
console.log(result); // ['c', 'b', 'a']
console.log(arr);    // ['a', 'b', 'c']


// toSorted()
const arr = ['c', 'a', 'b'];
const result = arr.toSorted();
console.log(result);  // ['a', 'b', 'c']
console.log(arr);     // ['c', 'a', 'b']


// toSpliced()
const arr = ['a', 'b', 'c', 'd'];
const result = arr.toSpliced(1, 2, 'X');
console.log(result); // ['a', 'X', 'd']
console.log(arr);    // ['a', 'b', 'c', 'd'], 無法再得到已經刪除的元素


// with()
const arr = ['a', 'b', 'c'];
const result = arr.with(1, 'X');
console.log(result);  // ['a', 'X', 'c']
console.log(arr);     // ['a', 'b', 'c

這些方法適用於所有數組，也適用於定型數組 TypedArray。在上面提到的元組提案，這些方法也是同樣適用的，元組相當於不可變的數組，所以元組不支持破壞性的方法，將這些破壞性的方法引入非破壞性的版本對元組是非常有幫助的。

End

以上就是 ES2023 全部標準化的提案了，目前 Chrome 瀏覽器已經全部支持，可以在調試工具中嘗試新的特性。

作者：京東零售 謝天

來源：京東雲開發者社區