使用Array.from(document.querySelectorAll('div'))和[...document.querySelectorAll('div')]是否有区别？
以下是一个例子：
let spreadDivArray = [...document.querySelectorAll('div')];
console.log(spreadDivArray);
let divArrayFrom = Array.from(document.querySelectorAll('div'));
console.log(divArrayFrom);
console.log()将记录相同的结果。
有性能差异吗？
Spread element或者语法（请注意它不是操作符）仅适用于可迭代的对象（即实现@@iterator方法的对象）。Array.from()同样适用于非可迭代的类数组对象（即具有索引元素和length属性的对象）。
看下面的例子：
const arrayLikeObject = { 0: 'a', 1: 'b', length: 2 };
// This logs ['a', 'b']
console.log(Array.from(arrayLikeObject));
// This throws TypeError: arrayLikeObject[Symbol.iterator] is not a function
console.log([...arrayLikeObject]);Array.from()可能更易读。展开操作符在某些情况下也很有用，例如当你想要连接多个数组（['a', 'b', ...someArray, ...someOtherArray]）。Array.from()虽然易于阅读，但是对于人们来说，扩展运算符语法...arrayLikeObject同样易读（甚至更易读）。 - qarthandso...arrayLikeObject）更短。虽然有时这可能是一个因素，但也许不应该是。 - trysisArray.prototype.reduce的起始值传递为数组时，我们调用它。 - Eduardvar i = 5; Array.from(i) 这样的数字参数会导致 []，而 var i = 5; [i] 则会得到 [5]。 - Josh StodolaArray.from是一个静态方法，也就是说它是一个函数，而spread语法则是数组字面量语法的一部分。你可以像传递数据一样传递函数，可以调用它们一次、多次或者不调用它们。而这在spread语法中是不可能的，因为在这方面它是静态的。
另一个区别，正如@nils已经指出的那样，Array.from还可以与类似数组的对象一起使用，这些对象没有实现可迭代协议，而spread则需要实现可迭代协议。
...语法可以将一个数组展开，而Array.from()则直接创建一个新的数组。[...x]通过使用spread语法将现有数组值扩展到数组文字语法中创建了一个新的数组 - 方括号[]实际上是正在执行数组创建操作的内容。这些方括号可以与任意数量的其他语法交换以实现其他结果（例如，展开到函数参数foo(...x)、展开到对象{...x}、使用多个展开连接数组[...x, ...y]等）。
.from()不会对任何内容进行展开，它总是基于提供的数据创建一个新的数组。...foo 语法会将数组中的所有值展开（扩展），就好像它们是单独的、以逗号分隔的参数一样。外面的 [] 则是用于创建一个新数组。因此，[...foo] 将创建一个新数组，并通过展开所有数组元素作为数组构造函数参数来填充它，并对每个元素进行完全复制。而 Array.from(foo) 则使用输入变量创建一个新数组，速度更快，因为它只做了浅拷贝（这很快）。 - Mitch McMaberslet set = new Set();
for (let i = 0; i < 10000; i++) {
set.add(Math.random());
}
let tArrayFrom = window.performance.now()
let arr = Array.from(set)
console.log("Array.from():", window.performance.now() - tArrayFrom + "ms")
// slightly faster in most of the runs:
let tSpread = window.performance.now()
let arr2 = [...set];
console.log("Spread syntax:", window.performance.now() - tSpread + "ms")使用Babel是查看内部发生情况的好方法。
注意，确保在Babel中选择了最新版本，因为默认版本是错误的。
使用上面的示例，这是输出结果。
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var spreadDivArray = [].concat(_toConsumableArray(document.querySelectorAll('div')));
console.log(spreadDivArray);
var divArrayFrom = Array.from(document.querySelectorAll('div'));
console.log(divArrayFrom);
[].concat 似乎无法工作？这是 Babel 的输出吗？ - Bergi[].concat是一种不正确的简化（仅在数组参数上执行与扩展语法相同的操作），这可能是由于Babel中的错误或某些未知设置引起的。 - Bergi我需要澄清大家的答案：
...foo 语法只是将所有数组值展开（扩展），就好像它们是单独的、逗号分隔的参数一样。它进行了浅层展开。任何基本类型（数字、字符串等）都会被复制，而任何复杂类型（对象）则会被引用。[] 则是创建一个新数组。[...foo] 将创建一个新数组，并通过执行浅层复制展开所有数组元素，就好像它们是数组构造函数参数一样，然后将所有复制的元素放入新数组中。Array.from(foo) 将使用输入变量创建一个新数组，但速度要快得多，因为它仅创建一个浅层副本（这更快）。因此，它采用精确的输入，只是将每个变量/引用放入新数组中。Array.from()。array.from()方法都只会创建浅拷贝。 - Carl Bäckström
Object。至于性能，我不知道。 - Semi-FriendsArray.from可以处理类数组对象，这些对象没有实现迭代器协议（即Symbol.iterator）。即使使用了 ES6 和新的浏览器规范，这种对象也越来越少见。 - nils...不是一个运算符！ - Felix KlingArray.from()则正常工作。 - peterflynn