Array.from () versus distribution syntax

Question

Is there a difference between using Array.from(document.querySelectorAll('div')) or [...document.querySelectorAll('div')] ?

Here is an example:

 let spreadDivArray = [...document.querySelectorAll('div')]; console.log(spreadDivArray); let divArrayFrom = Array.from(document.querySelectorAll('div')); console.log(divArrayFrom); 

console.log() will write the same result.

Is there a difference in performance?

Answer 1

The spread element ( this is not an operator ) only works with iterable objects (i.e. implement the @@iterator method). Array.from() also works with array-like objects (i.e., objects that have a length property and indexed elements) that are not iterable. See this example:

 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]); 

Also, if you just want to convert something to an array, I think it's better to use Array.from() , because it is more readable. Distribution elements are useful, for example, when you want to combine multiple arrays ( ['a', 'b', ...someArray, ...someOtherArray] ).

Answer 2

Well, Array.from is a static method, i.e. a function, whereas spread syntax is part of the array literal syntax. You can pass functions around the same data, you can call them once, several times or not at all. This is not possible with spread syntax, which is static in this regard.

Another difference that @nils has already pointed out is that Array.from also works with array-type objects that do not implement an iterative protocol. spread , on the other hand, requires iterations.

Answer 3

In terms of performance, when using a NodeList or jQuery object, the distribution syntax has better performance in most browsers than Array.from .

• Mailing syntax against Array.from with NodeList
• Move syntax against Array.from with jQuery object

In general, distribution syntax appears to have better performance .

Answer 4

The difference is that the spread allows the array to be expanded . While from() creates an array new . .from() does not apply to anything, it creates a new array based on the provided data; the spread operator, on the other hand, can expand the array with new properties.

Answer 5

Using Babel is a good way to see what is happening inside.

Head up. Make sure the latter is selected in Babel, since the default is incorrect.

Using your example above, this is the conclusion.

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