在 JavaScript 中，ECMAScript 2017 中提供的 Array.from() 方法为我们提供了一种非常方便的数组转换方式，它可以将一种类数组（如 NodeList、Arguments 等）或可迭代对象（如 Set、Map 等）转换成一个真正的数组。本文将详细介绍如何使用 Array.from() 方法以及它的实际应用。
一、Array.from() 方法的基本使用
Array.from() 方法接受两个参数：第一个参数是需要进行转换的对象，第二个参数是一个可选的回调函数，用来对数组中的每个元素进行处理。下面是一个基本的使用示例：
const nodeList = document.querySelectorAll('li');
const array = Array.from(nodeList);
console.log(array); // 将 NodeList 对象转换成数组并输出这个例子中，我们首先通过 document.querySelectorAll() 方法获取了一个 NodeList 对象，然后使用 Array.from() 方法将其转换成了一个真正的数组，并将结果打印到控制台中。
如果我们想要对数组中的每个元素进行处理，可以传入一个回调函数作为第二个参数，如下所示：
const set = new Set([1, 2, 3]); const array = Array.from(set, x => x * x); console.log(array); // 将 Set 对象转换成数组并对每个元素进行平方操作
这个例子中，我们首先创建了一个 Set 对象，然后使用 Array.from() 方法将其转换成一个数组，并对数组中的每个元素进行了平方操作。
需要注意的是，如果第二个参数是一个箭头函数，则箭头函数内部的 this 指向的是全局对象，并不能直接使用外部的 this，需要使用函数绑定等方式进行处理。
二、Array.from() 方法的实际应用
在实际开发中，Array.from() 方法还有一些非常实用的应用场景，下面分别介绍这些应用场景的实现方式。
1. 将字符串转换成数组
如果我们需要将一个字符串转换成一个数组，可以使用 Array.from() 方法，如下所示：
const str = 'hello'; const array = Array.from(str); console.log(array); // ['h', 'e', 'l', 'l', 'o']
这里，我们将字符串 "hello" 转换成了一个包含每个字符的数组。
2. 复制一个数组
如果我们需要复制一个数组而不改变原数组，可以使用 Array.from() 方法结合数组的 slice() 方法或扩展运算符（...）进行实现，如下所示：
const array1 = [1, 2, 3]; const array2 = Array.from(array1); const array3 = array1.slice(); const array4 = [...array1]; console.log(array1 === array2); // false console.log(array1 === array3); // false console.log(array1 === array4); // false
在这个例子中，我们使用 Array.from() 方法以及 slice() 方法和扩展运算符分别对数组进行了复制处理，并将复制后的数组打印到控制台上。
3. 将对象转换成数组
如果我们需要将一个对象转换成一个数组，可以使用 Object.entries() 方法以及 Array.from() 方法进行实现，如下所示：
const obj = { a: 1, b: 2, c: 3 };
const array = Array.from(Object.entries(obj));
console.log(array); // [['a', 1], ['b', 2], ['c', 3]]这里，我们首先使用 Object.entries() 方法将对象转换成一个形如 [key, value] 的数组，然后使用 Array.from() 方法将其转换成一个二维数组。
4. 过滤数组中的元素
使用 Array.from() 方法我们还可以对数组中的元素进行过滤操作，如下所示：
const array1 = [1, 2, 3, 4, 5]; const array2 = Array.from(array1, x => x * 2).filter(x => x > 4); console.log(array2); // [6, 8, 10]
在这个例子中，我们首先使用 Array.from() 方法将数组中的每个元素乘以 2，然后使用 filter() 方法过滤出符合条件的元素。
三、总结
Array.from() 方法是 ECMAScript 2017 中提供的一个非常实用的数组转换方法，它可以将类数组对象和可迭代对象转换成真正的数组，并且支持对数组中的每个元素进行处理和过滤。在实际开发中，如果我们需要实现数组转换等操作，可以使用 Array.from() 方法进行实现，它将帮助我们更加高效和简洁地完成代码编写。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652d05b57d4982a6ebe83cf9