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

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

Answer 2

Babelを使用すると、内部的に何が起こっているのかを確認するのに適しています。

ヘッドアップ。既定が間違っているので、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 3

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

@nilsがすでに指摘しているもう1つの違いは、Array.fromも、反復可能なプロトコルを実装していない配列のようなオブジェクトで動作することです。一方、spreadにはiterablesが必要です。

Answer 4

スプレッド要素（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

パフォーマンスに関して、NodeListまたはjQueryオブジェクトを使用する場合、スプレッドシンタックスは、ほとんどのブラウザで、Array.fromよりも優れたパフォーマンスを示します。

• Spread syntax vs Array.from with NodeList
• Spread syntax vs Array.from with jQuery object

、一般的には、構文appears to have better performanceを広げます。