Array.from（）vs spread syntax

Question

使用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()的将记录相同的结果。

是否有任何性能差异？

Answer 1

区别在于扩展允许数组为扩展。而from()创建了一个新的阵列。 .from()不会扩展任何内容，它会根据提供的数据创建一个新数组;另一方面，扩展运算符可以扩展具有新属性的数组。

Answer 2

使用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); 

Answer 3

那么，Array.from是一个静态方法，即，而spread语法的功能是数组文本语法的一部分。你可以像数据一样传递函数，你可以调用它们一次，几次或根本不调用它们。这在spread语法中是不可能的，在这方面它是静态的。

@nils已经指出的另一个区别是，Array.from也适用于类似数组的对象，它们没有实现可迭代协议。 spread另一方面需要迭代。

Answer 4

传播元件（it's not an operator）仅适用于那些对象iterable（即实现@@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]）。

Answer 5

关于性能，当使用NodeList或jQuery对象时，扩展语法在大多数浏览器中的性能比Array.from更好。

• Spread syntax vs Array.from with NodeList
• Spread syntax vs Array.from with jQuery object

而在一般情况下，传播语法appears to have better performance。