建站
咨詢
售后
建站咨詢
新聞中心
2023 年 6 月 27 日，第 125 屆 ECMA 大會(huì)正式批準(zhǔn)了 ECMAScript 2023 語(yǔ)言規(guī)范，這意味著它現(xiàn)在正式成為最新 ECMAScript 標(biāo)準(zhǔn)。下面就來(lái)看看 ECMAScript 2023 都有哪些新特性吧！
圖片
全文概覽：
- 從頭到尾搜索數(shù)組：findLast() 、findLastIndex()
- Hashbang 語(yǔ)法
- 通過(guò)副本更改數(shù)組：toReversed()、toSorted()、toSpliced()、with()
- Symbol 作為 WeakMap 的鍵
從尾到頭搜索數(shù)組
概述
在 JavaScript 中，通過(guò) find() 和 findIndex() 查找數(shù)組中的值是一種常見(jiàn)做法。不過(guò)，這些方法從數(shù)組的開始進(jìn)行遍歷：
const array = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}];
array.find(elem => elem.v > 3); // {v: 4}
array.findIndex(elem => elem.v > 3); // 3如果要從數(shù)組的末尾開始遍歷，就必須反轉(zhuǎn)數(shù)組并使用上述方法。這樣做就需要一個(gè)額外的數(shù)組操作。findLast() 和 findLastIndex() 的就解決了這一問(wèn)題。提出這兩個(gè)方法的一個(gè)重要原因就是：語(yǔ)義。
使用
它們的用法和find()、findIndex()類似，唯一不同的是它們是 從后向前 遍歷數(shù)組，這兩個(gè)方法適用于數(shù)組和類數(shù)組。
- findLast() 會(huì)返回第一個(gè)查找到的元素，如果沒(méi)有找到，就會(huì)返回 undefined；
- findLastIndex() 會(huì)返回第一個(gè)查找到的元素的索引。如果沒(méi)有找到，就會(huì)返回 -1；
const array = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}];
array.findLast(elem => elem.v > 3); // {v: 5}
array.findLastIndex(elem => elem.v > 3); // 4
array.findLastIndex(elem => elem.v > 5); // undefined瀏覽器支持
目前主流瀏覽器都已經(jīng)支持了這兩個(gè)新方法：
- Array.prototype.findLast
圖片
- Array.prototype.findLastIndex
圖片
Hashbang
Unix 的命令行腳本都支持#!命令，又稱為 Hashbang。這個(gè)命令放在腳本的第一行，用來(lái)指定腳本的執(zhí)行器。Hashbang 就是想為 JavaScript 腳本引入了#!命令，這個(gè)命令寫在腳本文件或者模塊文件的第一行：
// 寫在腳本文件的第一行
#!/usr/bin/env node
'use strict';
console.log(1);
// 寫在模塊文件的第一行
#!/usr/bin/env node
export {};
console.log(1);這樣，Unix 命令行就可以直接執(zhí)行腳本了：
# 以前執(zhí)行腳本
node hello.js
# 有了 hashbang 之后執(zhí)行腳本
./hello.js不過(guò)這樣的話，hashbang 就必須嚴(yán)格的在文件頭，否則就會(huì)出現(xiàn)語(yǔ)法錯(cuò)誤，導(dǎo)致這個(gè) JavaScript 腳本文件無(wú)法使用。
通過(guò)副本更改數(shù)組
通過(guò)副本更改數(shù)組的方法有四個(gè)：
- Array.prototype.toReversed()
- Array.prototype.toSorted()
- Array.prototype.toSpliced()
- Array.prototype.with()
我們知道，大多數(shù)的數(shù)組方法都是非破壞性的，也就是不會(huì)改變?cè)瓟?shù)組，比如 filter() 方法：
const arr = ['a', 'b', 'b', 'a'];
const result = arr.filter(x => x !== 'b');
console.log(result); // ['a', 'a']當(dāng)然，也有一些是破壞性的方法，它們?cè)趫?zhí)行時(shí)會(huì)改變?cè)瓟?shù)組，比如 sort() 方法：
const arr = ['c', 'a', 'b'];
const result = arr.sort();
console.log(result); // ['a', 'b', 'c']在數(shù)組的方法中，下面的方法是具有破壞性的：
- reverse()
- sort()
- splice()
如果想要這些數(shù)組方法應(yīng)用于數(shù)組而不改變它，可以使用下面任意一種形式：
const sorted1 = arr.slice().sort();
const sorted2 = [...arr].sort();
const sorted3 = Array.from(arr).sort();可以看到，我們首先需要?jiǎng)?chuàng)建數(shù)組的副本，再對(duì)這個(gè)副本進(jìn)行修改。因此就引入了這三個(gè)方法的非破壞性版本，因此不需要手動(dòng)創(chuàng)建副本再進(jìn)行操作：
- reverse() 的非破壞性版本：toReversed()
- sort() 非破壞性版本：toSorted(compareFn)
- splice() 非破壞性版本：toSpliced(start, deleteCount, ...items)
這些函數(shù)屬性引入到了 Array.prototype：
- Array.prototype.toReversed() -> Array
- Array.prototype.toSorted(compareFn) -> Array
- Array.prototype.toSpliced(start, deleteCount, ...items) -> Array
- Array.prototype.with(index, value) -> Array
除此之外，還有了一個(gè)新的非破壞性方法：with()。該方法會(huì)以非破壞性的方式替換給定 index 處的數(shù)組元素，即 arr[index]=value 的非破壞性版本。
所有這些方法都將保持目標(biāo)數(shù)組不變，并返回它的副本并執(zhí)行更改。這些方法適用于數(shù)組，也適用于類型化數(shù)組，即以下類的實(shí)例：
- Int8Array
- Uint8Array
- Uint8ClampedArray
- Int16Array
- Uint16Array
- Int32Array
- Uint32Array
- Float32Array
- Float64Array
- BigInt64Array
- BigUint64Array
TypedArray是一種通用的固定長(zhǎng)度緩沖區(qū)類型，允許讀取緩沖區(qū)中的二進(jìn)制數(shù)據(jù)。其在WEBGL規(guī)范中被引入用于解決Javascript處理二進(jìn)制數(shù)據(jù)的問(wèn)題。類型化數(shù)組也是數(shù)組，只不過(guò)其元素被設(shè)置為特定類型的值。
類型化數(shù)組的核心就是一個(gè)名為 ArrayBuffer 的類型。每個(gè)ArrayBuffer對(duì)象表示的只是內(nèi)存中指定的字節(jié)數(shù)，但不會(huì)指定這些字節(jié)用于保存什么類型的數(shù)據(jù)。通過(guò)ArrayBuffer能做的就是為了將來(lái)使用而分配一定數(shù)量的字節(jié)。
這些方法也適用于元組，元組相當(dāng)于不可變的數(shù)組。它們擁有數(shù)組的所有方法——除了破壞性的方法。因此，將后者的非破壞性版本添加到數(shù)組對(duì)元組是有幫助的，這意味著我們可以使用相同的方法來(lái)非破壞性地更改數(shù)組和元組。
Array.prototype.toReversed()
toReversed() 是 reverse() 方法的非破壞性版本：
const arr = ['a', 'b', 'c'];
const result = arr.toReversed();
console.log(result); // ['c', 'b', 'a']
console.log(arr); // ['a', 'b', 'c']Array.prototype.toSorted()
toSorted() 是 sort() 方法的非破壞性版本：
const arr = ['c', 'a', 'b'];
const result = arr.toSorted();
console.log(result); // ['a', 'b', 'c']
console.log(arr); // ['c', 'a', 'b']Array.prototype.toSpliced()
splice() 方法比其他幾種方法都復(fù)雜，其使用形式：splice(start, deleteCount, ...items)。該方法會(huì)從從 start 索引處開始刪除 deleteCount個(gè)元素，然后在 start 索引處開始插入item 中的元素，最后返回已經(jīng)刪除的元素。
toSpliced 是 splice() 方法的非破壞性版本，它會(huì)返回更新后的數(shù)組，原數(shù)組不會(huì)變化，并且無(wú)法再得到已經(jīng)刪除的元素：
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']Array.prototype.with()
.with()方法的使用形式：.with(index, value)，它是 arr[index] = value 的非破壞性版本：
const arr = ['a', 'b', 'c'];
const result = arr.with(1, 'X');
console.log(result); // ['a', 'X', 'c']
console.log(arr); // ['a', 'b', 'c']瀏覽器支持
目前，主瀏覽器都已經(jīng)支持這四個(gè)方法：
- toReversed()
圖片
- toSorted()
圖片
- toSpliced()
圖片
- with()
圖片
Symbol 作為 WeakMap 鍵
目前，WeakMaps 僅允許使用對(duì)象作為鍵，這是 WeakMaps 的一個(gè)限制。新功能擴(kuò)展了 WeakMap API，允許使用唯一的 Symbol 作為鍵。
這樣更易于創(chuàng)建和共享 key：
const weak = new WeakMap();
// 更具象征意義的key
const key = Symbol('my ref');
const someObject = { /* data data data */ };
weak.set(key, someObject);除此之外，該功能還解決了記錄和元組提案中引入的問(wèn)題：如何在原始數(shù)據(jù)類型中引用和訪問(wèn)非原始值？ 記錄和元組不能包含對(duì)象、函數(shù)或方法，當(dāng)這樣做時(shí)會(huì)拋出 TypeError：
const server = #{
port: 8080,
handler: function (req) { /* ... */ }, // TypeError!
};這種限制存在是因?yàn)橛涗浐驮M提案的關(guān)鍵目標(biāo)之一是默認(rèn)具有深度不可變性保證和結(jié)構(gòu)相等性。接受 Symbol 值作為 WeakMap 鍵將允許 JavaScript 庫(kù)實(shí)現(xiàn)它們自己的類似 RefCollection 的東西，它可以重用同時(shí)不會(huì)隨著時(shí)間的推移泄漏內(nèi)存：
class RefBookkeeper {
#references = new WeakMap();
ref(obj) {
const sym = Symbol();
this.#references.set(sym, obj);
return sym;
}
deref(sym) { return this.#references.get(sym); }
}
globalThis.refs = new RefBookkeeper();
const server = #{
port: 8080,
handler: refs.ref(function handler(req) { /* ... */ }),
};
refs.deref(server.handler)({ /* ... */ });文章標(biāo)題：ECMAScript2023正式發(fā)布，有哪些新特性？
網(wǎng)站網(wǎng)址：http://www.5511xx.com/article/djigjie.html
