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

如果输入是可迭代的，它们会做完全相同的事情。

但是，根据基准，展开运算符似乎对 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 2

我要澄清一下大家的答案：

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

Answer 3

好吧，Array.from 是一个静态方法，即一个函数，而 spread 语法是数组字面量语法的一部分。您可以像数据一样传递函数，您可以调用它们一次、多次或根本不调用它们。这在 spread 语法中是不可能的，在这方面它是静态的。

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

Answer 4

Spread element (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

使用 Babel 是了解内部情况的好方法。

不过，请注意。确保在 Babel 中选择了 latest，因为默认是错误的。

使用上面的示例，这是输出。

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

不同之处在于spread允许数组被扩展。而 from() 创建一个 new 数组。 .from() 不会扩展任何内容，它会根据提供的数据创建一个新数组；另一方面，扩展运算符可以扩展具有新属性的数组。