在 ES6 中，新增了一个 Array.from() 方法，这个方法可以将一个可迭代对象或类数组对象转换成一个新的真正的数组对象。在前端开发中，我们经常遇到需要将节点列表或集合对象转换成一个数组，然后对这个数组进行操作的情况。这时候，就可以使用 Array.from() 方法来轻松解决问题。
Array.from() 的语法和参数
Array.from() 方法的语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
其中，arrayLike 参数表示要转换成数组的对象，它可以是一个可迭代对象，如 Set、Map、字符串、数组等，也可以是一个类数组对象，如 NodeList、HTMLCollection 等。
mapFn 参数表示在转换成数组之前可以对每个元素进行处理的回调函数，可以缺省。使用该参数可以将转换后的数组中的每个元素进行一些操作，比如转换元素格式、筛选元素等等。
thisArg 参数表示执行 mapFn 时 this 的指向，可以缺省，如果不指定，则执行函数时 this 指向 undefined。
Array.from() 的用途和示例
将字符串转换成数组
我们经常遇到一个需求，就是将一个字符串转换成一个数组，然后对数组进行操作。比如，我们有一个字符串 "hello world"，我们想要将其中的每个字符都提取出来，放到一个数组中，并将这个数组输出到控制台。这时候，就可以使用 Array.from() 方法：
const str = 'hello world'; const arr = Array.from(str); console.log(arr); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
如果不使用 Array.from() 方法，我们可能需要使用 split() 等函数实现字符串到数组的转换，但是这种方法比较麻烦。
将 NodeList 对象转换成数组
在前端开发中，我们经常需要获取 DOM 节点列表，比如获取所有的 div 元素。这时候，我们会使用 document.querySelectorAll() 方法来获取节点列表，但是这个方法返回的是一个 NodeList 对象，而不是一个真正的数组。这时候，我们就可以使用 Array.from() 方法将 NodeList 对象转换成数组，然后对数组进行操作，比如筛选出所有置顶的 div 元素：
const divs = document.querySelectorAll('div');
const arr = Array.from(divs);
const stickyDivs = arr.filter(div => div.classList.contains('sticky'));
console.log(stickyDivs);如果我们不使用 Array.from() 方法，我们需要通过 for 循环对 NodeList 对象进行遍历，然后将每个节点添加到一个数组中，这比较繁琐。
将数组-like 对象转换成数组
有一些对象虽然看起来像数组，但是却不是真正的数组，例如 arguments 对象和 DOM Token List 等一些对象。这些对象被称为数组-like 对象，它们的主要特点是拥有一个 length 属性和一些可以通过下标访问的属性，但是它们并不具有数组对象的方法，比如 reduce()、map() 等方法。这时候，我们可以使用 Array.from() 方法将这些对象转换成真正的数组，然后对数组进行操作，比如计算参数的总和：
function sum() {
const args = Array.from(arguments);
return args.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15如果我们不使用 Array.from() 方法，我们需要手动将 arguments 对象转换成数组，这样会比较麻烦。
将 Map 和 Set 对象转换成数组
在 ES6 中，新增了 Map 和 Set 两个集合对象，它们可以用来存储键值对，它们提供了一些很有用的方法，比如添加元素、删除元素、遍历元素等等。但是，它们都不是真正的数组对象，所以我们需要使用 Array.from() 方法将它们转换成数组，然后进行操作。比如，我们有一个 Map 对象，其中存储了一些学生的成绩，我们想要将成绩转换成一个数组，并对数组进行排序：
const scores = new Map();
scores.set('Tom', 89);
scores.set('John', 76);
scores.set('Bob', 92);
const arr = Array.from(scores);
arr.sort((a, b) => b[1] - a[1]);
console.log(arr); // [['Bob', 92], ['Tom', 89], ['John', 76]]如果不使用 Array.from() 方法，我们需要手动遍历 Map 对象，并将 each 都 push 到一个数组中，这比使用 Array.from() 方法要繁琐。
总结
Array.from() 方法在 ES6 中新增，它可以将可迭代对象、类数组对象等转换成真正的数组对象，方便我们进行数据的处理和操作。需要注意的是，Array.from() 返回的是一个新的数组，而不是原来的对象本身。在实际开发中，我们可以使用 Array.from() 方法来处理字符串、节点列表、DOM Token List 等对象，以及 Map 和 Set 等集合对象。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec5f93f6b2d6eab36a517d