ES6 的新功能 Array.from() 方法的详解-JavaScript中文网-JavaScript教程资源分享门户

在 ES6 中，Array.from() 是一个非常实用的方法，它可以将一个类数组对象或可迭代对象转换成一个真正的数组。本文将详细介绍这个方法的用法和实际应用。

Array.from() 方法的基本用法

Array.from() 方法接受一个类数组对象或可迭代对象作为参数，返回一个新的数组。它的基本语法如下：

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

其中，arrayLike 是要转换成数组的对象，mapFn 是一个可选的回调函数，用于对数组中的每个元素进行处理，thisArg 是可选的回调函数中的 this 值。

下面是一个最简单的例子，将一个类数组对象转换成一个真正的数组：

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

Array.from() 方法的回调函数

Array.from() 方法的第二个参数 mapFn 是一个可选的回调函数，用于对数组中的每个元素进行处理。在回调函数中，可以对每个元素进行任意的操作，并返回处理后的值。例如：

const arrayLike = { 0: 1, 1: 2, 2: 3, length: 3 };
const arr = Array.from(arrayLike, x => x * x);
console.log(arr); // [1, 4, 9]

在这个例子中，我们使用了一个箭头函数 x => x * x 作为回调函数，对数组中的每个元素进行平方操作。

Array.from() 方法的应用

1. 将 NodeList 转换成数组

在 DOM 操作中，经常会使用到 NodeList 对象，它是一个类数组对象，表示一组匹配的 DOM 元素。如果我们需要对这些元素进行操作，就需要将 NodeList 转换成一个真正的数组。这时，Array.from() 方法就可以派上用场了：

const nodeList = document.querySelectorAll('div');
const arr = Array.from(nodeList);

2. 将字符串转换成数组

如果我们需要将一个字符串转换成一个数组，也可以使用 Array.from() 方法。例如，将一个字符串中的每个字符都转换成一个数组元素：

const str = 'hello';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

3. 将 Set 转换成数组

Set 是 ES6 中新增的一种数据结构，它类似于数组，但是成员的值都是唯一的，没有重复的值。如果我们需要将一个 Set 转换成一个真正的数组，也可以使用 Array.from() 方法：

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

4. 将 Map 转换成数组

Map 是 ES6 中新增的另一种数据结构，它类似于对象，但是键可以是任意类型的值。如果我们需要将一个 Map 转换成一个真正的数组，也可以使用 Array.from() 方法：

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const arr = Array.from(map);
console.log(arr); // [['a', 1], ['b', 2], ['c', 3]]

总结

Array.from() 方法是 ES6 中非常实用的一个方法，它可以将一个类数组对象或可迭代对象转换成一个真正的数组。在实际应用中，我们可以使用它来将 NodeList、字符串、Set、Map 等对象转换成数组，方便我们对它们进行操作。同时，我们也可以在回调函数中对数组中的每个元素进行处理，实现更加灵活的操作。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65790e4ed2f5e1655d2fe44a