使用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元素（它不是运算符）仅适用于可迭代的对象（即实现该@@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是一个静态方法，即一个函数，而spread语法是数组文字语法的一部分。您可以像数据一样传递函数，可以调用一次、多次或根本不调用它们。这对于spread语法来说是不可能的，在这方面它是静态的。
@nils 已经指出的另一个区别是，它Array.from也适用于不实现可迭代协议的类数组对象。spread另一方面需要迭代。
不同之处在于 spread 允许扩展数组。而from()创建一个新数组。.from()不扩展任何东西，它根据提供的数据创建一个新数组；另一方面，扩展运算符可以扩展具有新属性的数组。
如果输入是可迭代的，它们会做完全相同的事情。
然而，根据基准，价差算子似乎对 Set 表现更好。
let 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);