Array.from() 与扩展语法

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

扩展元素或语法（请注意，它不是运算符）仅适用于可迭代的对象（即实现

@@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 2

嗯，

Array.from

是一个静态方法，即一个函数，而

spread

语法是数组文字语法的一部分。您可以像数据一样传递函数，可以调用它们一次、多次或根本不调用它们。这对于

spread

语法来说是不可能的，在这方面它是静态的。

@nils 已经指出的另一个区别是

Array.from

也适用于类似数组的对象，这些对象不实现可迭代协议。

spread

另一方面需要可迭代。

Answer 3

不同之处在于，spread

...

允许数组扩展，而

Array.from()

则直接创建一个新数组。

在您的示例中，

[...x]

通过使用扩展语法将现有数组values扩展为数组文字语法来创建一个新数组 - 括号[]实际上是在执行数组创建位。这些括号可以与任意数量的其他语法交换以实现其他结果（例如扩展到函数参数

foo(...x)

、对象

{...x}

、使用多个扩展来连接数组

[...x, ...y]

等）。

.from()

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

Answer 4

但是，根据基准，价差运算符似乎对于 Set 表现更好。

https://jsben.ch/5lKjg

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")

Answer 5

不过请注意。确保在 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 6

Array.from 对于每个源都更快。

https://jsben.ch/yw8Pl

Answer 7

...foo
• 语法只是扩展（扩展）所有数组值，就好像它们是单独的、以逗号分隔的参数一样。它的传播很浅。任何基数（数字、字符串等）都会被复制，而任何复数值（对象）都会被引用。它周围的
[]
• 就是创建一个新数组的东西。因此，
[...foo]
• 将创建一个新数组，并通过对所有数组元素进行浅拷贝扩展来填充它，就好像它们是数组构造函数参数一样，这反过来又获取所有这些复制的元素并将它们放入新数组中。而
Array.from(foo)
• 将使用输入变量创建一个新数组，但速度要快得多，因为它只创建一个浅拷贝（这是更快）。因此它需要精确的输入并将每个变量/引用放入新数组中。使用
Array.from()
• 。