Array.from()vs spread语法

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

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])时,Spread元素很有用.

Answer 2

嗯,Array.from是一个静态方法,即一个函数,而spread语法是数组文字语法的一部分.您可以像数据一样传递函数,您可以调用一次,多次或根本不调用它们.对于spread语法来说这是不可能的,这在这方面是静态的.

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

Answer 3

区别在于 spread允许扩展...数组，而创建一个新数组Array.from()。

\n

在您的示例中，[...x]通过使用扩展语法将现有数组值扩展为数组文字语法 \xe2\x80\x93 来创建一个新数组，括号是实际执行数组创建位的内容。这些括号可以与任意数量的其他语法交换以实现其他结果（例如扩展到函数参数、对象、使用多个扩展来连接数组）[]foo(...x){...x}[...x, ...y]等）。

\n

.from()从不扩展任何内容，它总是根据提供的数据创建一个新数组。

\n