大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！

高级前端进阶

今天给大家带来的主题是ECMAScript 2023，话不多说，直接开始！

什么是 TC39

TC39 指的是技术委员会（ Technical Committee ）第 39 号，一个推动 JavaScript 发展的委员会。它是 ECMA 的一部分， ECMA 是 ECMAScript 规范下的 JavaScript 语言标准化的机构。

TC39 由各个主流浏览器厂商的代表构成，当然国内一些大型的科技公司比如阿里和字节都已经加入了 TC39 。TC39 的主要工作就是制定 ECMAScript 标准，标准生成的流程，并实现。

从 ES2016 开始（新 TC39 流程施行以来）， 开发者需要关心的是提案处于第几阶段，只要进入第 4 阶段就已经算是标准特性了。四个阶段的主要工作如下所示：

• stage0 strawman：包括任何讨论、想法或者还没加到提案的特性，但只有 TC39 成员可以提交。
• stage1 proposal：产出一个正式的提案、发现潜在的问题、详细的 API 描述，例子，以及语义和算法
• stage2 draft：提供一个初始的草案规范，与最终标准中包含的特性不会有太大差别
• stage3 candidate：候选阶段，获得具体实现和用户的反馈，至少要在一个浏览器中实现，提供 polyfill 或者 babel 插件
• stage4 finished：准备就绪，该特性在下个版本的 ECMAScript 规范中

了解了 TC39 这个组织之后，接下来一起来看看 ECMAScript 2023 都带来了那些新特性，以及不同特性的用法和使用场景。

proposal-array-find-from-last 提案

在数组中查找元素是一种非常常见的编程模式。Array find 提案是来自 Wenlu Wang 的一个提案，其有一个主要的考量，即语义，开发者能清楚地知道自己想要的操作。

当然，该提案还有另外一层考量，即性能，从而避免明显的性能开销，如省去时间复杂度度量中的常量。 虽然非数量级的性能提升，但它在某些对性能敏感的场景中可能很有用，比如反应式渲染。

Array find 提案表示在 Array 和 TypedArray 原型上添加了 findLast() 和 findLastIndex() 方法。 作用与 find() 和 findIndex() 相同，但顺序相反。

提案能让开发者跳过创建临时重复项（ Temporary Duplicates）、更改（Mutations）和令人不爽的索引减法。比如下面的例子：

const array = [{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }];

array.find((n) => n.value % 2 === 1); // { value: 1 }
array.findIndex((n) => n.value % 2 === 1); // 0
// ======== 提案之前 ===========
// find
[...array].reverse().find((n) => n.value % 2 === 1); // { value: 3 }
// findIndex
array.length - 1 - [...array].reverse().findIndex((n) => n.value % 2 === 1); // 2
array.length - 1 - [...array].reverse().findIndex((n) => n.value === 42); // should be -1, but 4
// ======== 提案之后 ===========
// find
array.findLast((n) => n.value % 2 === 1); // { value: 3 }

// findIndex
array.findLastIndex((n) => n.value % 2 === 1); // 2
array.findLastIndex((n) => n.value === 42); // -1

两个方法的引入弥补了原生 JavaScript 在类似功能上的缺失，而像 lodash、ramda、TypeScript 等早早就实现了这两个方法。同时，对于旧的浏览器，可以通过 core-js、es-shims 等 Polyfill 提供支持。

proposal-hashbang 提案

Hashbang 注释是一种特殊的注释语法，其行为与单行注释（//）完全一样，只是它以 #! 开头，并且只在脚本或模块的最开始处有效。

需要注意的是，#! 标志之前不能有任何空白字符。注释由 #! 之后的所有字符组成直到第一行的末尾，同时只允许有一条这样的注释。

图片来自：https://github.com/HashBangCoop

JavaScript 中的 hashbang 注释类似于 Unix 中的 shebang，它提供了一个特定的 JavaScript 解释器的路径，想用它来执行这个脚本。在 hashbang 注释标准化之前，它已经在非浏览器环境（如 Node.js）中得到了实现。在 Node.js 中，它在被传递给引擎之前被从源文本中剥离。示例如下：

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

JavaScript 解释器会把它视为普通注释，只有当脚本直接在 shell 中运行时才有语义。

支持 Symbols 作为 WeakMap 键提案

在 JavaScript 中，对象和 Symbols 能保证是唯一并且不能被重新创建，这使得其成为 WeakMap 键的理想选择，但是目前 WeakMap 只支持对象作为键。而之所以将 WeakMaps 限制为只允许对象作为键，是因为 WeakMap 的目标是拥有最终可以被 GC 处理的唯一值。

proposal-symbols-as-weakmap-keys 提案扩展了 WeakMap API 以允许使用唯一的 Symbols 作为键。

图片来自：https://www.freecodecamp.org/news/how-did-i-miss-javascript-symbols-c1f1c0e1874a/

本质上，Symbol 是 ECMAScript 中唯一允许唯一值的原始类型。 符号值，即通过调用 Symbol( [ description] ) 表达式产生的值，只能通过访问其原始产品来识别。 相同表达的任何复制，使用相同的描述值，将不会恢复任何先前产品的原始值，这就是 Symbols 的不同之处。

而对象能被用作 WeakMaps 的键，是因为它们共享相同的身份信息（Identity Aspect）。 一个对象的身份只能通过访问原始对象来验证，没有新的对象会与预先存在的对象相匹配 ，例如： 严格比较。

与要求创建一个仅用作键的新对象不同，符号将为 WeakMap 的人体工程学及其键和映射项的适当角色提供更清晰的信息。

const weak = new WeakMap();
// 双关语不是故意的：作为一个符号使它成为一个更具象征意义的key
const key = Symbol('my ref');
const someObject = {
  /* data data data */
};

weak.set(key, someObject);

通过复制更改数组提案

Array.prototype 上的 reverse()、sort() 和 splice() 方法会改变数组。 由 Ashley Claymore 和 Robin Ricard 提出的通过复制更改数组的提议添加了那些返回新副本方法的等价方法，如：toReversed()、toSorted() 和 toSpliced()。

const sequence = [1, 2, 3];
sequence.toReversed();
//输出 => [3, 2, 1]
sequence;
//输出 => [1, 2, 3]

const outOfOrder = new Uint8Array([3, 1, 2]);
outOfOrder.toSorted();
//输出 => Uint8Array [1, 2, 3]

const arr = ['a', 'b', 'c', 'd'];
const result = arr.toSpliced(1, 2, 'X');
// toSpliced(start, deleteCount, ...items)。
// 该方法会从从 start 索引处开始删除 deleteCount个元素，然后在 start 索引处开始插入item 中的元素，最后返回已经删除的元素。
console.log(result);
// 输出 ['a', 'X', 'd']
console.log(arr);
// 输出['a', 'b', 'c', 'd']

这些方法还能在 TypedArray 的所有子类上可用，比如：

• Int8Array
• Uint8Array
• Uint8ClampedArray
• Int16Array
• Uint16Array
• Int32Array
• Uint32Array
• Float32Array
• Float64Array
• BigInt64Array
• BigUint64Array

该提案还添加了一个 with() 方法，该方法返回一个新数组，其中给定索引处的元素替换为给定值，以避免使用括号表示法就地发生更改。

const original = [1, 2, 2, 4];
const withThree = original.with(2, 3);
console.log(original);
// 输出 [ 1, 2, 2, 4 ]
console.log(withThree);
// 输出 [ 1, 2, 3, 4 ]

本文总结

本文主要和大家介绍 ECMAScript 2023 的发布，同时对其4大主流提案的实现进行了说明。因为篇幅有限，文章并没有过多展开，如果有兴趣，文末的参考资料提供了优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

https://github.com/tc39/proposal-array-find-from-last

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Lexical_grammar

https://github.com/tc39/proposal-hashbang

https://github.com/tc39/proposal-symbols-as-weakmap-keys

https://github.com/tc39/proposal-change-array-by-copy

https://pawelgrzybek.com/whats-new-in-ecmascript-2023/

https://cloud.tencent.com/developer/article/1822635

https://tc39.es/process-document/

https://www.infoworld.com/article/3692809/ecmascript-2023-spec-for-javascript-adds-methods-for-arrays.html