Array.from () vs propagation de la syntaxe

Question

Y a-t-il une différence entre l'utilisation de Array.from(document.querySelectorAll('div')) ou [...document.querySelectorAll('div')] ?

Voici un exemple:

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

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

Le console.log() enregistrera le même résultat.

Y a-t-il une différence de performances?

Answer 1

La propagation de l'élément (ce n'est pas un opérateur) fonctionne uniquement avec des objets qui sont itérable (c'est à dire de mettre en œuvre l' @@iterator méthode). Array.from() travaille également sur le tableau comme des objets (c'est à dire des objets qui ont l' length de la propriété et les éléments indexés) qui ne sont pas itératif. Voir cet exemple:

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

Aussi, si vous ne voulez convertir que quelque chose au tableau, je pense qu'il est préférable d'utiliser Array.from() parce que c'est plus lisible. La propagation des éléments sont utile par exemple lorsque vous voulez concaténer plusieurs tableaux (['a', 'b', ...someArray, ...someOtherArray]).

Answer 2

Eh bien, Array.from est une méthode statique, c'est à dire, une fonction alors que l' spread de la syntaxe est la partie de la matrice de la syntaxe littérale. Vous pouvez passer des fonctions autour comme des données, vous pouvez appeler une fois, plusieurs fois ou pas du tout. Ce n'est pas possible avec l' spread de la syntaxe, qui est statique à cet égard.

Une autre différence, qui @nils a déjà souligné, c'est qu' Array.from travaille également avec l'ensemble-comme des objets, qui n'implémentent pas l'objet iterable protocole. spread d'autre part nécessite iterables.

Answer 3

Concernant les performances, lors de l'utilisation d'un NodeList ou un objet jQuery la propagation de la syntaxe a une meilleure performance dans la plupart des navigateurs que Array.from.

• La propagation de la syntaxe vs Tableau.de avec NodeList
• La propagation de la syntaxe vs Tableau.de avec objet jQuery

Et en général, la propagation de la syntaxe semble avoir de meilleures performances.

Answer 4

La différence est que spread permet à un tableau d'être étendu . Alors que from() crée un nouveau tableau. .from() ne développe rien, il crée un nouveau tableau basé sur les données fournies; L'opérateur spread, d'autre part, peut développer un tableau avec de nouvelles propriétés.

Answer 5

Utiliser Babel est un bon moyen de voir ce qui se passe en interne.

Attention, cependant. Assurez-vous que la dernière version est sélectionnée dans Babel, car la valeur par défaut est incorrecte.

En utilisant votre exemple ci-dessus, c'est la sortie.

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