支持ecmascript 5的浏览器-ECMAScript 2023 发布! 真诚的,4个主流建议!

大家好,很高兴再次见面。 我是“高级后端高级”。 我将带你关注后端前端,深入后端底层技术。 我们将共同进步。 也欢迎您关注、点赞、收藏、转发!

高级 后端 高级

今天给大家带来的主题是ECMAScript 2023,废话不多说,我们马上开始吧!

什么是 TC39

TC39指的是第39号技术委员会(Technical Commission),是一个推进JavaScript开发的委员会。 它是 ECMA 的一部分,ECMA 是 ECMAScript 规范下标准化 JavaScript 语言的机构。

TC39由各主流浏览器厂商的代表组成。 当然,阿里、字节等一些国外小型科技公司已经加入TC39。 TC39的主要工作是制定ECMAScript标准支持ecmascript 5的浏览器,标准生成的流程,并实现。

从ES2016开始(自实施新的TC39流程以来),开发者需要关心提案处于哪个阶段,只要进入第四阶段,就已经是标准功能了。 四个阶段的主要工作如下:

了解完组织 TC39 之后,我们再来看看 ECMAScript 2023 带来的新特性,以及不同特性的使用方式和使用场景。

提案数组从上一个提案中查找

在链表中查找元素是一种非常常见的编程模式。 Array find 提案是 Wenlu Wang 的提案。 它有一个主要的考察,就是语义。 开发者可以清楚地知道自己想要的操作。

当然,这个提议还有另一层考虑,即性能,以防止显着的性能开销,例如省略时间复杂度度量中的常量。 虽然性能提升不是一个数量级,但它在个别性能敏感的场景(例如反应式渲染)中可能很有用。

Array find 提案将 findLast() 和 findLastIndex() 方法添加到 Array 和 TypedArray 原型中。 与 find() 和 findIndex() 相同,但顺序相反。

该提案允许开发人员跳过创建临时重复、突变和讨厌的索引添加。 例如下面的例子:

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等polyfills可以提供支持。

提案-hashbang提案

Hashbang 注释是一种特殊的注释语法,其行为与单行注释 (//) 完全相同,只不过它们以 #! 开头。 并且仅在脚本或模块的最开始有效。

需要注意的是#!之前不能有空格字符符号。 评论由#!之后的所有字符组成。 直到第一行末尾,并且一次只允许有一个这样的注释。

图片来自:

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仅支持对象作为键。 WeakMap 之所以仅限于对象作为键,是因为 WeakMap 的目标是拥有最终可以被 GC 处理的唯一值。

proposal-symbols-as-weakmap-keys 提案扩展了 WeakMap API,以允许唯一的符号作为键。

图片来自:

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

对象可以用作 WeakMap 中的键,因为它们共享相同的身份方面。 对象的身份只能通过访问原始对象来验证,没有新对象会与预先存在的对象匹配,例如:严格比较。

该表示法不需要创建仅用作键的新对象,而是提供有关 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 的所有泛型类型,例如:

该提案还添加了一个 with() 方法,该方法返回一个新字段,其中给定索引处的元素替换为给定值支持ecmascript 5的浏览器,从而防止使用括号表示法进行就地修改。

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的发布情况,同时讲解其四大主流提案的实现情况。 由于篇幅有限,文章没有过多展开。 如果您有兴趣,文末的参考资料提供了学习的绝佳文档。 最后,欢迎大家点赞、评论、转发、收藏!

参考