使用 ECMAScript 2019 Array.from 方法在 JavaScript 中转换任何可迭代对象

在 JavaScript 中，可迭代对象指的是那些可以被循环遍历的对象。常见的可迭代对象包括数组、集合、字符串等。

在 ECMAScript 2019 中，新增了 Array.from 方法，该方法可以将任何可迭代对象转换成真正的数组。

下面我们来详细介绍一下 Array.from 方法的使用及其指导意义。

Array.from 方法的语法

Array.from 方法的语法如下：

Array.from(iterable, mapFn?, thisArg?)

参数说明：

• iterable：被转换成数组的可迭代对象。
• mapFn：可选参数，是一个回调函数，用于将每个元素转换成新的值。
• thisArg：可选参数，是回调函数 mapFn 中 this 的值。

Array.from 方法的用法

下面我们通过一些示例来说明 Array.from 方法的用法。

转换集合为数组

假设我们有一个集合对象，我们可以使用 Array.from 方法将其转换成数组：

const set = new Set(['foo', 'bar', 'baz']);
const arr = Array.from(set);
console.log(arr); // ['foo', 'bar', 'baz']

转换字符串为数组

我们也可以使用 Array.from 方法将字符串转换成数组：

const str = 'Hello World!';
const arr = Array.from(str);
console.log(arr); // ['H', 'e', 'l', 'l', 'o', ' ', 'W', 'o', 'r', 'l', 'd', '!']

可以看到，Array.from 方法会将每个字符分离出来，并添加到数组中。

转换类数组为数组

我们知道，类数组对象指的是那些具有 length 属性，并且可以被下标访问的对象。

下面的例子中，我们使用 Array.from 将类数组对象转换成数组：

const arrayLike = { 0: 'foo', 1: 'bar', 2: 'baz', length: 3 };
const arr = Array.from(arrayLike);
console.log(arr); // ['foo', 'bar', 'baz']

转换生成器为数组

我们还可以使用 Array.from 方法将生成器对象转换成数组：

function* generateSequence() {
  yield 1;
  yield 2;
  yield 3;
}

const arr = Array.from(generateSequence());
console.log(arr); // [1, 2, 3]

可以看到，Array.from 方法会执行生成器函数，并将生成的值添加到数组中。

Array.from 方法的指导意义

Array.from 方法的指导意义在于，它为我们提供了一种简单、灵活的方式，将任何可迭代对象转换成真正的数组。

在实际开发中，我们经常需要将集合、字符串、类数组等对象转换成数组，以方便进行操作。而 Array.from 方法就能帮助我们快速、简单地完成这个转换过程。

同时，Array.from 方法还支持传入回调函数，用于自定义转换规则。这为我们提供了更大的灵活性，能够更好地满足不同场景下的需求。

结论

本文介绍了 ECMAScript 2019 中新增的 Array.from 方法，该方法可以将任何可迭代对象转换成真正的数组。

我们通过一些示例来介绍了 Array.from 方法的用法，包括转换集合、字符串、类数组、生成器等对象。

最后，我们还强调了 Array.from 方法的指导意义，即为我们提供了一种简单、灵活的方式，将任何可迭代对象转换成真正的数组，帮助我们更好地完成开发工作。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672c5639ddd3a70eb6d7a022