ECMAScript2023你学习了吗？

一、ES2023 Features

• 【Array find from last】 从头到尾搜索数组：findLast() 、findLastIndex()
• 【Hashbang Grammar】Hashbang 语法
• 【Symbols as WeakMap keys】Symbol 作为 WeakMap 的键
• 【Change array by copy】通过副本更改数组：toReversed()、toSorted()、toSpliced()、with()

二、数组倒序查找

Array.prototype.findLast 和 Array.prototype.findLastIndex

let nums = [5,4,3,2,1];
let lastEven = nums.findLast((num) => num % 2 === 0); // 2
let lastEvenIndex = nums.findLastIndex((num) => num % 2 === 0); // 3

三、Hashbang 语法

#! for JS
此脚本的第一行以 #！开头，表示可在注释中包含任意文本。
Hashbang 就是想为 JavaScript 脚本引入了#!命令，这个命令写在脚本文件或者模块文件的第一行

#!/usr/bin/env node
// in the Script Goal
'use strict';
console.log(1);

四、将符号作为 WeakMap 键

在弱集合和注册表中使用符号
注意：注册的符号不可作为 weakmap 键。

学过ES6就知道，只能使用一个对象作为 WeakMap 的key：

const w = new WeakMap()
const user = { name: 'zz' }

w.set(user, 'boy')
console.log(w.get(user))  // 'boy'

现在我们使用Symbol作为WeakMap的key：

const w = new WeakMap()
const user = Symbol('zz')

w.set(user, 'boy')
console.log(w.get(user))  // 'boy'

五、通过副本更改数组

此次公布的新方法正是toSorted、toReversed、toSpliced 和 with 都能复制原始数组、变更副本再返回结果。

· reverse() 的非破坏性版本：toReversed()
· sort() 非破坏性版本：toSorted(compareFn)
· splice() 非破坏性版本：toSpliced(start, deleteCount, …items)

1、Array.prototype.toSorted

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
const sorted = languages.toSorted();
console.log(sorted); //  [ 'CoffeeScript', 'JavaScript', 'TypeScript' ]
console.log(languages); // [ 'JavaScript', 'TypeScript', 'CoffeeScript' ]

除了复制之外，sort 函数还会引发一些意想不到的行为，toSorted 也继承了这种特点。
所以在对带有重音字符的数字或字符串进行排序时，大家仍然要小心。比如准备一个 comparator 比较器函数（例如 String’s localeCompare）来生成当前查找的结果。

const numbers = [5, 3, 10, 7, 1];
const sorted = numbers.toSorted();
console.log(sorted); // [ 1, 10, 3, 5, 7 ]

const sortedCorrectly = numbers.toSorted((a, b) => a - b);
console.log(sortedCorrectly); // [ 1, 3, 5, 7, 10 ]

const strings = ["abc", "äbc", "def"];
const sorted = strings.toSorted();
console.log(sorted); //  [ 'abc', 'def', 'äbc' ]

const sortedCorrectly = strings.toSorted((a, b) => a.localeCompare(b));
console.log(sortedCorrectly); //  [ 'abc', 'äbc', 'def' ]

2、Array.prototype.toReversed

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
const reversed = languages.toReversed();
console.log(reversed); //  [ 'CoffeeScript', 'TypeScript', 'JavaScript' ]

3、Array.prototype.toSpliced

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
const spliced = languages.toSpliced(2, 1, "Dart", "WebAssembly");
console.log(spliced);
// [ 'JavaScript', 'TypeScript', 'Dart', 'WebAssembly' ]

4、Array.prototype.with

with 函数所代表的复制方法，等同于使用方括号表示方来更改数组内的一个元素。因此，与其通过以下方式直接更改数组：

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
languages[2] = "WebAssembly";
console.log(languages);
// => [ 'JavaScript', 'TypeScript', 'WebAssembly' ]

可以复制该数组再执行更改：

const languages = ["JavaScript", "TypeScript", "CoffeeScript"];
const updated = languages.with(2, "WebAssembly");
console.log(updated);
// => [ 'JavaScript', 'TypeScript', 'WebAssembly' ]
console.log(languages);
// => [ 'JavaScript', 'TypeScript', CoffeeScript' ]

此次发布的新方法不仅适用于常规的数组对象。您可以在任意 TypedArray 上使用 toSorted、toReversed 和 with 方法，包括 Int8Array 到 BigUint64Array 等各种类型。但因为 TypedArrays 没有 splice 方法，因此无法使用 toSpliced 方法。

六、浏览器支持 目前主流浏览器都以支持以上方法

七、ECMAScript2023你学习了吗？