ECMAScript 2023将新增的九个数组方法

大家好，我是 CUGGZ。,ECMAScript 规范每年都会更新一次，正式标准化 JavaScript 语言的 ECMAScript 的下一次年度更新将在 2023 年 6 月左右获得批准，这将是 ECMAScript 的第 14 版。所有在 2023 年 3 月之前达到阶段 4 的提案都将包含在 ECMAScript 2023 标准中。 对于一个提案，从提出到最后被纳入 ECMAScript 标准，总共分为五步：,根据 Erick Wendel（微软 MVP、谷歌开发专家、@nodejs合作者）的预测，ECMAScript 2023 可能会新增以下数组方法（3️⃣、4️⃣为所处提案阶段）：,下面就来看看这些方法是如何使用的吧！,通过副本更改数组的提案目前处于第 3 阶段。该提案为数组和类型化数组提出了四种新的方法：,提案地址：https://github.com/tc39/proposal-change-array-by-copy,为什么会有这个提案呢？我们知道，大多数的数组方法都是非破坏性的，也就是说，在数组执行该方法时，不会改变原数组，比如 filter() 方法：,当然，也有一些是破坏性的方法，它们在执行时会改变原数组，比如 sort() 方法：,在数组的方法中，下面的方法是具有破坏性的：,如果我们想要这些数组方法应用于数组而不改变它，可以使用下面任意一种形式：,可以看到，我们首先需要创建数组的副本，再对这个副本进行修改。,因此改提案就引入了这三个方法的非破坏性版本，因此不需要手动创建副本再进行操作：,该提案将这些函数属性引入到 Array.prototype：,除此之外，该提案还还提出了一个新的非破坏性方法：with()。该方法会以非破坏性的方式替换给定 index 处的数组元素，即 arr[index]=value 的非破坏性版本。,所有这些方法都将保持目标数组不变，并返回它的副本并执行更改。这些方法适用于数组，也适用于类型化数组，即以下类的实例：,TypedArray是一种通用的固定长度缓冲区类型，允许读取缓冲区中的二进制数据。其在WEBGL规范中被引入用于解决Javascript处理二进制数据的问题。类型化数组也是数组，只不过其元素被设置为特定类型的值。,类型化数组的核心就是一个名为 ArrayBuffer 的类型。每个ArrayBuffer对象表示的只是内存中指定的字节数，但不会指定这些字节用于保存什么类型的数据。通过ArrayBuffer能做的就是为了将来使用而分配一定数量的字节。,这些提案也适用于元组，元组相当于不可变的数组。它们拥有数组的所有方法——除了破坏性的方法。因此，将后者的非破坏性版本添加到数组对元组是有帮助的，这意味着我们可以使用相同的方法来非破坏性地更改数组和元组。,（1）Array.prototype.toReversed(),toReversed() 是 reverse() 方法的非破坏性版本：,下面是 toReversed() 方法的一个简单的 polyfill：,（2）Array.prototype.toSorted(),toSorted() 是 sort() 方法的非破坏性版本：,下面是 toSorted() 方法的一个简单的 polyfill：,（3）Array.prototype.toSpliced(),splice() 方法比其他几种方法都复杂，其使用形式：splice(start, deleteCount, …items)。该方法会从从 start 索引处开始删除 deleteCount个元素，然后在 start 索引处开始插入item 中的元素，最后返回已经删除的元素。,toSpliced 是 splice() 方法的非破坏性版本，它会返回更新后的数组，原数组不会变化，并且我们无法再得到已经删除的元素：,下面是 toSpliced() 方法的一个简单的 polyfill：,（4）Array.prototype.with(),with()方法的使用形式：with(index, value)，它是 arr[index] = value 的非破坏性版本。,下面是 with() 方法的一个简单的 polyfill：,（1）概述,在日常开发中，数组分组是一种极其常见的操作。因此，proposal-array-grouping 提案就提出了两个新的数组方法：,提案地址：https://github.com/tc39/proposal-array-grouping,下面是这两个方法的类型签名：,这两个方法都用来对数组进行分组：,这两个方法都会对数组进行遍历，它们会向其回调请求组键并将元素添加到相应的组中。这两个方法在表示组的方式上有所不同：,那这两个方法该如何选择呢？我们知道，JavaScript 中对象是支持解构的，如果想要使用解构来获取数组中的值，比如，对于上面对象，可以通过解构获取三个不同组的值：,而 Map 的好处就是它的 key 不限于字符串和symbol，更加自由。,（2）使用,下面来看几个实用例子。假如执行 Promise.allSettled() 方法返回的数组如下：,在这个例子中，使用 group() 的效果会更好，因为可以使用解构轻松获取需要组的值。,假如想要对以下数组中人根据国家进行分组：,在这个例子中，groupToMap() 是更好的选择，因为哦嗯嗯可以在Map 中使用任何类型的键，而在对象中，键值只能是字符串或symbol。,（3）polyfill,下面来实现一下这两个方法：,（1）概述,在 JavaScript 中，通过 find() 和 findIndex()  查找数组中的值是一种常见做法。不过，这些方法从数组的开始进行遍历：,如果要从数组的末尾开始遍历，就必须反转数组并使用上述方法。这样做就需要一个额外的数组操作。幸运的是，Wenlu Wang 和 Daniel Rosenwasser 关于findLast() 和 findLastIndex() 的 ECMAScript 提案解决了这一问题。该提案的一个重要原因就是：语义。,提案地址：https://github.com/tc39/proposal-array-find-from-last,（2）使用,它们的用法和find()、findIndex()类似，唯一不同的是它们是 从后向前 遍历数组，这两个方法适用于数组和类数组。,findLast() 会返回第一个查找到的元素，如果没有找到，就会返回undefined；,findLastIndex() 会返回第一个查找到的元素的索引。如果没有找到，就会返回 -1；,（3）polyfill,下面来实现一下这两个方法：,（4）参考源码,lodash 中也提供了类似方法，下面是相关源码：,在 JavaScript 中内置了 Array.from 方法，它用于将类数组或者可迭代对象生成一个新的数组实例。在ECMAScript 2018中引入了异步可迭代对象。而JavaScript中一直缺少直接从异步可迭代对象生成数组的内置方法。,proposal-array-from-async 提案中提出来的 Array.fromAsync 方法就是为了解决这个问题而提出来的。,下面来看一个简单的例子：,Array.fromAsync 可以将异步迭代转换为 promise，并将解析为新数组。在 promise 解析之前，它将从输入值中创建一个异步迭代器，进行惰性的迭代，并将每个产生的值添加到新数组中。,与其他基于 Promise 的 API 一样，Array.fromAsync 总是会立即返回一个 promise。当 Array.fromAsync 的输入在创建其异步或同步迭代器时引发错误时，则此 promise 状态将被置为 rejected。,提案地址：https://github.com/tc39/proposal-array-from-async