使用 ES6 的 Array.from 方法将类似数组对象转换为数组

在前端开发中，我们经常需要对数据进行处理，其中包括将一些类似数组对象转换为真正的数组对象。ES6 使用 Array.from 方法为我们提供了一种简单而高效的方式来实现这个目标。

什么是类似数组对象？

类似数组对象是一个拥有 length 属性和一些数字类型的属性或索引的对象。例如，DOM 中的 NodeList 就是一个类似数组对象，它包含一些元素，每个元素都有一个索引。另外一些常见的类似数组对象还包括 arguments 对象、函数返回的结果以及一些 jQuery 的集合对象等。

Array.from 方法的作用

Array.from 方法可以将类似数组对象转换为真正的数组对象。它接受一个类似数组对象或迭代器作为输入，返回一个新的数组对象。

Array.from 方法的使用

下面是一个简单的示例，演示如何使用 Array.from 方法将一个 NodeList 转换为数组：

const nodeList = document.querySelectorAll('p');
const array = Array.from(nodeList);
console.log(array); // [p, p, p]

我们可以发现，Array.from 方法将 NodeList 转换为了一个真正的数组对象，并将其作为返回值。

除了将类似数组对象转换为数组对象之外，Array.from 方法还可以接受一个映射函数作为第二个参数，可以在生成数组对象的同时进行变换。下面是一个使用 Array.from 方法和箭头函数来将输入值分别加倍的示例：

const double = x => x * 2;
const array = Array.from([1, 2, 3], double);
console.log(array); // [2, 4, 6]

总结

在本文中，我们了解了什么是类似数组对象，以及如何使用 ES6 的 Array.from 方法将类似数组对象转换为真正的数组对象。Array.from 方法是一种非常高效而方便的方法，可以使我们的代码更加简洁和易于维护。同时，我们还探讨了如何在 Array.from 方法中使用映射函数，以便在生成数组对象的同时进行变换。

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