Array.from() 与扩展语法

问题描述 投票:0回答:7

使用

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

性能有什么区别吗?

javascript arrays ecmascript-6 spread-syntax
7个回答
96
投票

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

@@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]
)。


12
投票

嗯,

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

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

Array.from
也适用于类似数组的对象,这些对象不实现可迭代协议。
spread
另一方面需要可迭代。


6
投票

不同之处在于,spread

...
允许数组扩展,而
Array.from()
则直接创建一个新数组

在您的示例中,

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

.from()

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

    


3
投票

但是,根据基准,价差运算符似乎对于 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")


2
投票

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



0
投票

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

https://jsben.ch/yw8Pl

enter image description here


-3
投票

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