文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-12-01 15:15

关注

ECMAScript 规范每年都会更新一次，正式标准化 JavaScript 语言的 ECMAScript 的下一次年度更新将在 2023 年 6 月左右获得批准，这将是 ECMAScript 的第 14 版。所有在 2023 年 3 月之前达到阶段 4 的提案都将包含在 ECMAScript 2023 标准中。 对于一个提案，从提出到最后被纳入 ECMAScript 标准，总共分为五步：

根据 Erick Wendel（微软 MVP、谷歌开发专家、@nodejs合作者）的预测，ECMAScript 2023 可能会新增以下数组方法（3️⃣、4️⃣为所处提案阶段）：

下面就来看看这些方法是如何使用的吧！

1. 通过副本更改数组

通过副本更改数组的提案目前处于第 3 阶段。该提案为数组和类型化数组提出了四种新的方法：

提案地址：https://github.com/tc39/proposal-change-array-by-copy

为什么会有这个提案呢？我们知道，大多数的数组方法都是非破坏性的，也就是说，在数组执行该方法时，不会改变原数组，比如 filter() 方法：

const arr = ['a', 'b', 'b', 'a'];
const result = arr.filter(x => x !== 'b');
console.log(result); // ['a', 'a']

当然，也有一些是破坏性的方法，它们在执行时会改变原数组，比如 sort() 方法：

const arr = ['c', 'a', 'b'];
const result = arr.sort();
console.log(result); // ['a', 'b', 'c']

在数组的方法中，下面的方法是具有破坏性的：

如果我们想要这些数组方法应用于数组而不改变它，可以使用下面任意一种形式：

const sorted1 = arr.slice().sort();
const sorted2 = [...arr].sort();
const sorted3 = Array.from(arr).sort();

可以看到，我们首先需要创建数组的副本，再对这个副本进行修改。

因此改提案就引入了这三个方法的非破坏性版本，因此不需要手动创建副本再进行操作：

该提案将这些函数属性引入到 Array.prototype：

除此之外，该提案还还提出了一个新的非破坏性方法：with()。该方法会以非破坏性的方式替换给定 index 处的数组元素，即 arr[index]=value 的非破坏性版本。

所有这些方法都将保持目标数组不变，并返回它的副本并执行更改。这些方法适用于数组，也适用于类型化数组，即以下类的实例：

TypedArray是一种通用的固定长度缓冲区类型，允许读取缓冲区中的二进制数据。其在WEBGL规范中被引入用于解决Javascript处理二进制数据的问题。类型化数组也是数组，只不过其元素被设置为特定类型的值。

类型化数组的核心就是一个名为 ArrayBuffer 的类型。每个ArrayBuffer对象表示的只是内存中指定的字节数，但不会指定这些字节用于保存什么类型的数据。通过ArrayBuffer能做的就是为了将来使用而分配一定数量的字节。

这些提案也适用于元组，元组相当于不可变的数组。它们拥有数组的所有方法——除了破坏性的方法。因此，将后者的非破坏性版本添加到数组对元组是有帮助的，这意味着我们可以使用相同的方法来非破坏性地更改数组和元组。

（1）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']

下面是 toReversed() 方法的一个简单的 polyfill：

if (!Array.prototype.toReversed) {
  Array.prototype.toReversed = function () {
    return this.slice().reverse();
  };
}

（2）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']

下面是 toSorted() 方法的一个简单的 polyfill：

if (!Array.prototype.toSorted) {
  Array.prototype.toSorted = function (compareFn) {
    return this.slice().sort(compareFn);
  };
}

（3）Array.prototype.toSpliced()

splice() 方法比其他几种方法都复杂，其使用形式：splice(start, deleteCount, ...items)。该方法会从从 start 索引处开始删除 deleteCount个元素，然后在 start 索引处开始插入item 中的元素，最后返回已经删除的元素。

toSpliced 是 splice() 方法的非破坏性版本，它会返回更新后的数组，原数组不会变化，并且我们无法再得到已经删除的元素：

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']

下面是 toSpliced() 方法的一个简单的 polyfill：

if (!Array.prototype.toSpliced) {
  Array.prototype.toSpliced = function (start, deleteCount, ...items) {
    const copy = this.slice();
    copy.splice(start, deleteCount, ...items);
    return copy;
  };
}

（4）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']

下面是 with() 方法的一个简单的 polyfill：

if (!Array.prototype.with) {
  Array.prototype.with = function (index, value) {
    const copy = this.slice();
    copy[index] = value;
    return copy;
  };
}

2. 数组分组

（1）概述

在日常开发中，数组分组是一种极其常见的操作。因此，proposal-array-grouping 提案就提出了两个新的数组方法：

提案地址：https://github.com/tc39/proposal-array-grouping

下面是这两个方法的类型签名：

Array<Elem>.prototype.group<GroupKey extends (string|symbol)>(
  callback: (value: Elem, index: number, array: Array<Elem>) => GroupKey,
  thisArg?: any
): {[k: GroupKey]: Array<Elem>}

Array<Elem>.prototype.groupToMap<GroupKey>(
  callback: (value: Elem, index: number, array: Array<Elem>) => GroupKey,
  thisArg?: any
): Map<GroupKey, Array<Elem>>

这两个方法都用来对数组进行分组：

这两个方法都会对数组进行遍历，它们会向其回调请求组键并将元素添加到相应的组中。这两个方法在表示组的方式上有所不同：

那这两个方法该如何选择呢？我们知道，JavaScript 中对象是支持解构的，如果想要使用解构来获取数组中的值，比如，对于上面对象，可以通过解构获取三个不同组的值：

const {vegetables, fruit, meat} = result;

而 Map 的好处就是它的 key 不限于字符串和symbol，更加自由。

（2）使用

下面来看几个实用例子。假如执行 Promise.allSettled() 方法返回的数组如下：

const settled = [
  { status: 'rejected', reason: 'Jhon' },
  { status: 'fulfilled', value: 'Jane' },
  { status: 'fulfilled', value: 'John' },
  { status: 'rejected', reason: 'Jaen' },
  { status: 'rejected', reason: 'Jnoh' },
];

const {fulfilled, rejected} = settled.group(x => x.status);

// fulfilled 结果如下：
[
  { status: 'fulfilled', value: 'Jane' },
  { status: 'fulfilled', value: 'John' },
]

// rejected 结果如下：
[
  { status: 'rejected', reason: 'Jhon' },
  { status: 'rejected', reason: 'Jaen' },
  { status: 'rejected', reason: 'Jnoh' },
]

在这个例子中，使用 group() 的效果会更好，因为可以使用解构轻松获取需要组的值。

假如想要对以下数组中人根据国家进行分组：

const persons = [
  { name: 'Louise', country: 'France' },
  { name: 'Felix', country: 'Germany' },
  { name: 'Ava', country: 'USA' },
  { name: 'Léo', country: 'France' },
  { name: 'Oliver', country: 'USA' },
  { name: 'Leni', country: 'Germany' },
];

const result = persons.groupToMap((person) => person.country);

// result 的执行结果和以下 Map 是等价的：
new Map([
  [
    'France',
    [
      { name: 'Louise', country: 'France' },
      { name: 'Léo', country: 'France' },
    ]
  ],
  [
    'Germany',
    [
      { name: 'Felix', country: 'Germany' },
      { name: 'Leni', country: 'Germany' },
    ]
  ],
  [
    'USA',
    [
      { name: 'Ava', country: 'USA' },
      { name: 'Oliver', country: 'USA' },
    ]
  ],
])

在这个例子中，groupToMap() 是更好的选择，因为哦嗯嗯可以在Map 中使用任何类型的键，而在对象中，键值只能是字符串或symbol。

（3）polyfill

下面来实现一下这两个方法：

Array.prototype.group = function (callback, thisArg) {
  const result = Object.create(null);
  for (const [index, elem] of this.entries()) {
    const groupKey = callback.call(thisArg, elem, index, this);
    if (! (groupKey in result)) {
      result[groupKey] = [];
    }
    result[groupKey].push(elem);
  }
  return result;
};
Array.prototype.groupToMap = function (callback, thisArg) {
  const result = new Map();
  for (const [index, elem] of this.entries()) {
    const groupKey = callback.call(thisArg, elem, index, this);
    let group = result.get(groupKey);
    if (group === undefined) {
      group = [];
      result.set(groupKey, group);
    }
    group.push(elem);
  }
  return result;
};

3. 从尾到头搜索数组

（1）概述

在 JavaScript 中，通过 find() 和 findIndex()  查找数组中的值是一种常见做法。不过，这些方法从数组的开始进行遍历：

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

如果要从数组的末尾开始遍历，就必须反转数组并使用上述方法。这样做就需要一个额外的数组操作。幸运的是，Wenlu Wang 和 Daniel Rosenwasser 关于findLast() 和 findLastIndex() 的 ECMAScript 提案解决了这一问题。该提案的一个重要原因就是：语义。

提案地址：https://github.com/tc39/proposal-array-find-from-last

（2）使用

它们的用法和find()、findIndex()类似，唯一不同的是它们是 从后向前 遍历数组，这两个方法适用于数组和类数组。

findLast() 会返回第一个查找到的元素，如果没有找到，就会返回undefined；

findLastIndex() 会返回第一个查找到的元素的索引。如果没有找到，就会返回 -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

（3）polyfill

下面来实现一下这两个方法：

Array.prototype.findLast = function(arr, callback, thisArg) {
  for (let index = arr.length - 1; index >= 0; index--) {
    const value = arr[index];
    if (callback.call(thisArg, value, index, arr)) {
      return value;
    }
  }
  return undefined;
}
Array.prototype.findLastIndex = function(arr, callback, thisArg) {
  for (let index = arr.length - 1; index >= 0; index--) {
    const value = arr[index];
    if (callback.call(thisArg, value, index, arr)) {
      return index;
    }
  }
  return -1;
}

（4）参考源码

lodash 中也提供了类似方法，下面是相关源码：

import findLastIndex from './findLastIndex.js'
import isArrayLike from './isArrayLike.js'


function findLast(collection, predicate, fromIndex) {
  let iteratee
  const iterable = Object(collection)
  if (!isArrayLike(collection)) {
    collection = Object.keys(collection)
    iteratee = predicate
    predicate = (key) => iteratee(iterable[key], key, iterable)
  }
  const index = findLastIndex(collection, predicate, fromIndex)
  return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined
}

export default findLast
import baseFindIndex from './.internal/baseFindIndex.js'
import toInteger from './toInteger.js'


function findLastIndex(array, predicate, fromIndex) {
  const length = array == null ? 0 : array.length
  if (!length) {
    return -1
  }
  let index = length - 1
  if (fromIndex !== undefined) {
    index = toInteger(fromIndex)
    index = fromIndex < 0
      ? Math.max(length + index, 0)
      : Math.min(index, length - 1)
  }
  return baseFindIndex(array, predicate, index, true)
}

export default findLastIndex

4. Array.fromAsync

在 JavaScript 中内置了 Array.from 方法，它用于将类数组或者可迭代对象生成一个新的数组实例。在ECMAScript 2018中引入了异步可迭代对象。而JavaScript中一直缺少直接从异步可迭代对象生成数组的内置方法。

proposal-array-from-async 提案中提出来的 Array.fromAsync 方法就是为了解决这个问题而提出来的。

下面来看一个简单的例子：

async function * asyncGen (n) {
  for (let i = 0; i < n; i++)
    yield i * 2;
}

// arr 将变为 [0, 2, 4, 6]`
const arr = [];
for await (const v of asyncGen(4)) {
  arr.push(v);
}

// 与上述方式是等价的
const arr = await Array.fromAsync(asyncGen(4));

Array.fromAsync 可以将异步迭代转换为 promise，并将解析为新数组。在 promise 解析之前，它将从输入值中创建一个异步迭代器，进行惰性的迭代，并将每个产生的值添加到新数组中。

与其他基于 Promise 的 API 一样，Array.fromAsync 总是会立即返回一个 promise。当 Array.fromAsync 的输入在创建其异步或同步迭代器时引发错误时，则此 promise 状态将被置为 rejected。

提案地址：https://github.com/tc39/proposal-array-from-async

来源：前端充电宝内容投诉

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题

  • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

    难度     813人已做
    查看

  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看

  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看

  • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

    难度     435人已做
    查看

  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机

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

后端开发缓冲区类型2024-12-01

JavaScript 数组新增四个非破坏性方法！

后端开发JavaScript数组2024-12-02

详解JavaScriptes6的新增数组方法

后端开发2024-04-02

es6新增的数组方法有哪些

后端开发2024-04-02

JavaScript es6的新增数组方法有哪些

后端开发2023-06-21

ES6中数组新增的方法有哪些

后端开发2023-06-29

java 数组新增元素的两种方法

后端开发2023-09-03

es6中新增的数组方法怎么使用

后端开发2023-07-05

关于ES6中数组新增的方法详解

后端开发2024-04-02

es6中数组新增常用的方法有哪些

后端开发2024-04-02

ES6中数组array新增方法的示例分析

后端开发2024-04-02

ES6新增的数组方法和对象有哪些

后端开发2024-04-02

JS怎么模拟实现ECMAScript5新增的数组方法

后端开发2024-04-02

java如何写一个方法将数组中的每个元素都*2

后端开发2023-06-27
位置：首页-资讯-后端开发
咦！没有更多了？去看看其它编程学习网 内容吧
首页课程
资料下载问答资讯