web-dev-qa-db-ja.com

Array.from（）とスプレッド構文

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()は同じ結果を記録します。

パフォーマンスに違いはありますか？

javascriptarraysecmascript-6
38
jotavejv

Spreadelement（ それは演算子ではありません ）は 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]_）。

41
Michał Perłakowski

さて、Array.fromは静的メソッド、つまり関数です。一方、spread構文は配列リテラル構文の一部です。データのように関数を渡すことができ、一度、数回、またはまったく呼び出せません。これは、この点に関して静的なspread構文では不可能です。

@nilsがすでに指摘した別の違いは、Array.fromは、反復可能なプロトコルを実装しない配列のようなオブジェクトでも動作します。一方、spreadにはイテラブルが必要です。

7
user6445533

違いは、spreadでは配列をexpandedにできることです。一方、from()はnew配列を作成します。 .from()は何も展開しません。提供されたデータに基づいて新しい配列を作成します。一方、スプレッド演算子は新しいプロパティで配列を展開できます。

3
James Donnelly