在 ES6 和 ES7 中使用 Array.from() 方法进行数组转换

在前端开发中，我们经常需要对数组进行转换的操作。在 ES5 中，我们可以使用一些基本的方法来解决这个问题。但是，在 ES6 和 ES7 中，我们可以使用更加高效以及方便的方法来进行数组的转换操作，这个方法就是 Array.from()。

什么是 Array.from()？

Array.from() 是 ES6 和 ES7 标准中的一个方法，它可以将一个类似数组或可迭代对象（iterable）的对象转换为真正的数组。这个方法的语法如下：

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

• arrayLike：需要转换的类数组或可迭代对象。
• mapFn (optional)：对 arrayLike 中每个元素进行处理的回调函数。
• thisArg (optional)：mapFn 中 this 的上下文对象。

使用 Array.from() 的实际意义

通过使用 Array.from() 方法，我们可以将任意一个类数组对象或可迭代对象转换为一个真正的数组。这样可以让我们更加方便高效地进行数组操作。

并且，在处理数组数据时，我们可能遇到需要将集合数据转换为数组的情况。比如：

// 将集合中的叶子节点 href 值组成的数组合并成一个数组
const links = document.querySelectorAll('a');
const hrefs = Array.prototype.concat.apply([], Array.prototype.map.call(links, el => [el.href] ));

在上面的代码中，我们需要通过调用 Array.prototype.map.call() 和 Array.prototype.concat.apply() 来将集合对象转换为真正的数组。这样的代码比较繁琐，而使用 Array.from() 方法可以让我们省略这一步骤。

使用 Array.from() 的示例

例一：将一个类数组对象转换为真正的数组

下面这个例子展示了如何将一个类数组对象转换为真正的数组：

// 将 arguments 对象转换为数组
function foo() {
  const args = Array.from(arguments);
  return args;
}

foo('a', 'b', 'c'); // ['a', 'b', 'c']

例二：使用 mapFn 参数改变每个元素的值

下面这个例子展示了如何使用 Array.from() 方法的 mapFn 参数改变每个元素的值：

// 将一个类数组对象转换为真正的数组，并且将每个元素都乘以二
const numbers = [1, 2, 3];
const result = Array.from(numbers, n => n * 2);
console.log(result); // [2, 4, 6]

例三：将可迭代对象转换为真正的数组

下面这个例子展示了如何将一个可迭代对象转换为真正的数组：

// 将一个 set 对象转换为真正的数组
const set = new Set(['a', 'b', 'c']);
const arr = Array.from(set);
console.log(arr); // ['a', 'b', 'c']

总结

在 ES6 和 ES7 标准中，Array.from() 方法提供了一种更加高效和方便的方式来进行数组转换的操作。它可以让我们将任意一个类数组对象或可迭代对象转换为真正的数组，并且还可以使用回调函数来改变每个元素的值。

通过学习和掌握 Array.from() 方法的使用，可以让我们在实际开发中编写更加高效和优雅的代码，提高我们的开发效率和开发质量。

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