ES6 中的 Array.from 方法，让你的代码更加精简
前言
在 ES6 中，新增了一种方法叫做 Array.from。这个方法可以快速地将一个类数组对象或者可迭代对象转换成一个真正的数组。可以使用这种方法来简化代码，提高代码的可读性和优化代码的性能。
本文将介绍 Array.from 的使用方法、应用场景以及与传统的 Array 转换方法的比较。
Array.from 的使用方法
Array.from 的基本语法格式如下：
Array.from(arrayLike[, mapFunc[, thisArg]])
其中：
- arrayLike：必选参数，表示要转换为数组的类数组对象或者可迭代对象。
- mapFunc：可选参数，是一个函数，用来对数组中每个元素进行操作。
- thisArg：可选参数，表示 mapFunc 函数中的 this 值。
下面是一个实例，将一个字符串转换成一个数组：
// ES6 const str = 'hello'; const arr = Array.from(str); console.log(arr); // ['h', 'e', 'l', 'l', 'o']
// 传统方法 const arr2 = []; for (let i = 0; i < str.length; i++) { arr2.push(str[i]); } console.log(arr2); // ['h', 'e', 'l', 'l', 'o']
可以看到，使用 Array.from 方法可以更加简洁地实现功能。
Array.from 的应用场景
在实际项目中，Array.from 主要用于以下几个方面。
1、类数组对象转换成真正的数组
我们日常开发中经常会将类数组对象转换成真正的数组，以便我们更加方便地进行数组的操作。先来看一下对于类数组对象的转换。
对于一个 DOM 结构，我们可以通过 querySelectorAll 获取到对应元素，这个返回的其实就是一个类数组对象。当我们想要对这些元素进行遍历操作时，就需要将其转换成真正的数组。
// HTML 代码
// JS 代码 const boxs = document.querySelectorAll('.box'); const arr = Array.from(boxs); console.log(arr instanceof Array); // true
array-like 的概念是指具备以下特点的对象：
- 拥有 length 属性，即对象的长度
- 可以通过索引访问元素，即对象的属性 key 是从 0 到 length - 1 的整数
比如 NodeList 就是一个典型的 array-like 对象。Array.from 方法可以非常方便地将 NodeList 转换成真正的数组，从而实现对 DOM 结构的操作。除了 NodeList，还有一些其它的对象，如 arguments、Set、Map 等都是 array-like 对象，也可以使用 Array.from 进行转换。
2、Map 和 Set 转换成 Array
在 ES6 中，新增了一种 Set 和 Map 数据结构，它们可以用来存储集合和映射关系。在实际使用中，当我们想要将 Map 和 Set 转换成数组时，就可以使用 Array.from 方法进行转换。
// Map 转换成数组 const map = new Map(); map.set('key1', 'value1'); map.set('key2', 'value2'); const arrMap = Array.from(map); console.log(arrMap);
// Set 转换成数组 const set = new Set(); set.add('a'); set.add('b'); set.add('c'); const arrSet = Array.from(set); console.log(arrSet);
3、使用 mapFunc 对元素进行处理
除了上述转换，使用 mapFunc 进行数组的处理操作也是 Array.from 方法的一个非常重要的用法。下面是一个实例，使用 Array.from 方法和 mapFunc 将一个二维数组中所有的数字进行平方操作。
const arr = [[1, 2], [3, 4], [5, 6]]; const res = Array.from(arr, item => item.map(x => x * x)); console.log(res);
可以看到，我们首先传入一个二维数组，然后在第二个参数中传入一个函数，这个函数会对数组中每个元素进行处理操作，最终返回一个新的数组。这种方式可以非常方便地对数组中的元素进行复杂的操作，提高了代码的可读性和可维护性。
与传统的 Array 转换方法的比较
在 ES6 之前，我们通常使用以下方法将类数组对象转换成数组：
- 使用 Array.prototype.slice.call 方法
- 使用 Array.prototype.splice 方法
- 创建一个新数组，然后将类数组对象中的所有元素逐个 push 到数组中
这些方法虽然也能实现功能，但是在实际使用中，有以下缺点：
- 代码过于冗长而且不直观，可读性不好
- 这些方法无法处理可迭代对象，如 set、map 等
- 新数组的创建和元素的 push 操作会占用额外的内存空间，不利于代码的优化和性能的提升
相比之下，Array.from 方法不但代码更加简洁，而且还可以处理可迭代对象，同时也具备更好的性能表现。因此，在实际开发中，我们建议使用 Array.from 方法。
结论
本文详细介绍了 ES6 中的 Array.from 方法，并且对其应用场景进行了深入分析，并与传统的 Array 转换方法进行了比较。Array.from 方法的应用将大大提高我们的代码可读性和可维护性，也会在一定程度上提高代码的性能表现。因此，在实际开发中，应该善用这个方法，充分发挥其优势，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/671b6b109babaf620fab52a4