ES6数组扩展：Array.from()与扩展运算符解析

"本文深入解析了ES6对数组的扩展特性，主要介绍Array.from()方法，以及类数组对象和可遍历对象的转化，并提到了扩展运算符的应用。" 在JavaScript的ES6版本中，引入了一系列增强数组操作的新特性，使得处理数组变得更加便捷和高效。其中，`Array.from()`方法是一个重要的新增功能，它允许我们将类数组对象或可遍历对象转化为真正的数组。 1. `Array.from()` `Array.from()`方法的主要作用是将那些类似于数组但不是真正数组的对象，如对象、DOM NodeList集合或`arguments`对象，转化为真正的数组。例如，给定一个包含键值对的类数组对象： ```javascript let arr = { '0': 'a', '1': 'b', '2': 'c', length: 3 }; ``` 在ES5中，我们通常使用`[].slice.call(arr)`来实现转换。而在ES6中，我们可以直接使用`Array.from(arr)`。这在处理DOM操作返回的NodeList集合时特别有用，例如： ```javascript let ps = document.querySelectorAll('p'); Array.from(ps).forEach(function(p) { console.log(p); }); ``` 同样，对于函数内部的`arguments`对象，`Array.from()`也能帮助将其转换为数组，以便进一步处理。 2. 转换其他可遍历对象 `Array.from()`方法不仅限于类数组对象，只要实现了`Iterator`接口的数据结构，都可以被转换为数组。例如，字符串和Set结构都有 Iterator 接口，因此可以转换： ```javascript Array.from('hello'); // ['h', 'e', 'l', 'l', 'o'] let namesSet = new Set(['a', 'b']); Array.from(namesSet); // ['a', 'b'] ``` 3. 扩展运算符（...） 扩展运算符也是一个非常有用的特性，它可以将某些数据结构展开为数组。例如，对于`arguments`对象和NodeList对象，可以使用扩展运算符进行转换： ```javascript function foo() { var args = [...arguments]; // 使用扩展运算符转换arguments } [...document.querySelectorAll('div')]; // 使用扩展运算符转换NodeList ``` 扩展运算符背后的机制是调用了遍历器接口（`Symbol.iterator`），这也是`Array.from()`工作的原理之一。 ES6对数组的扩展极大地方便了开发者在处理数组和类似数组对象时的操作，无论是通过`Array.from()`还是扩展运算符，都能使代码更加简洁、直观。这些新特性提高了JavaScript的可读性和效率，是现代JavaScript开发中不可或缺的一部分。