使用 ES6 的 Array.from 方法优雅地转换类数组对象-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们往往会遇到一些类数组对象，比如 NodeList、HTMLCollection、arguments 等。这些对象虽然类似于数组，但是并不具备数组对象的方法和属性，如 map、filter、reduce 等。因此，我们需要将它们转换为真正的数组对象，才能使用数组的方法和属性操作它们。

在 ES6 中，我们可以使用 Array.from 方法来优雅地将类数组对象转换为真正的数组对象。本文将会详细探讨 Array.from 方法的使用，以及一些实际应用场景。

`Array.from` 方法简介

Array.from 方法是 ES6 新增的方法，用于将类数组对象或可迭代对象转换为数组。它的语法格式如下：

Array.from(arrayLike [, mapFn [, thisArg]])

其中，arrayLike 表示要转换为数组的类数组对象或可迭代对象；mapFn 表示可选的映射函数，用于对数组中的每个元素进行处理；thisArg 表示可选的上下文对象，用于绑定 mapFn 函数中的 this 值。

使用 Array.from 方法可以让我们非常方便地进行数组和类数组对象之间的转换，而且还可以使用第二个参数来处理转换后的数组中每个元素，实现更灵活的操作。

`Array.from` 方法的应用场景

转换 `NodeList`、`HTMLCollection` 对象

在前端开发中，我们经常需要操作 DOM 元素，而 document.querySelectorAll 以及其他 DOM 操作方法返回的都是 NodeList 或 HTMLCollection 对象，这些对象看起来很像数组，但是并不具备数组的方法和属性。

因此，我们可以使用 Array.from 方法将 NodeList 或 HTMLCollection 对象转换为真正的数组对象，然后使用数组的一些方法来操作它们。例如：

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

const lis = document.getElementsByTagName('li'); // 获取 li 元素列表
const arr = Array.from(lis); // 将 li 元素列表转换为数组
arr.map(li => console.log(li.textContent)); // 控制台输出 Apple、Banana、Cherry

将类数组对象转换为数组

除了 NodeList 和 HTMLCollection 对象，还有一些对象也是经常被认为是数组，但是实际上它们是类数组对象。

比如，arguments 对象就是函数调用时自动生成的一个类数组对象，它包含着传入函数中的所有参数，而且也没有数组对象的方法和属性。

function sum() {
  const args = Array.from(arguments); // 将 arguments 对象转换为数组
  return args.reduce((total, num) => total + num, 0); // 计算参数总和
}
console.log(sum(1, 2, 3)); // 控制台输出 6

Array.from 方法还可以转换其它类型的类数组对象，如字符串、Set、Map 等。

数组去重

由于 ES6 的 Set 对象内置了去重功能，因此可以使用 Array.from 方法将数组去重。使用 Set 对象将数组去重的一般步骤为：

const arr = [1, 2, 1, 2, 3, 4, 3, 4];
const set = new Set(arr); // 将 arr 转换为 Set 对象
const newArr = Array.from(set); // 将 Set 对象转换为数组
console.log(newArr); // 控制台输出 [1, 2, 3, 4]

使用映射函数对数组元素进行处理

除了将类数组对象转换为数组外，Array.from 方法还可以使用第二个参数来映射数组中的每个元素，实现更灵活的处理。

const arr = [1, 2, 3];
const newArr = Array.from(arr, num => num * 2); // 将 arr 数组中的每个元素乘以 2
console.log(newArr); // 控制台输出 [2, 4, 6]

在上面的例子中，我们使用 Array.from 方法和一个映射函数来将原数组中的每个元素乘以 2，并返回一个新数组。

总结

使用 Array.from 方法可以非常方便地进行类数组对象与数组之间的转换，并且支持使用第二个参数来映射数组中的每个元素。在开发中，我们应当学会灵活运用这个方法，以达到简化代码、提高开发效率的目的。

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

使用 ES6 的 Array.from 方法优雅地转换类数组对象

Array.from 方法简介

Array.from 方法的应用场景