web-dev-qa-db-fra.com

Array.from () vs propagation de la syntaxe

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

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

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

javascriptarraysecmascript-6
38
jotavejv

L'élément Spread ( ce n'est pas un opérateur ) ne fonctionne qu'avec des objets qui sont itérables (c'est-à-dire implémentent la méthode @@iterator). Array.from() fonctionne également sur les objets de type tableau (c'est-à-dire les objets qui ont la propriété length et les éléments indexés) qui ne sont pas itérables. 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]);

De plus, si vous voulez simplement convertir quelque chose en tableau, je pense qu'il vaut mieux utiliser Array.from() car il est plus lisible. Les éléments d'étalement sont utiles par exemple lorsque vous souhaitez concaténer plusieurs tableaux (['a', 'b', ...someArray, ...someOtherArray]).

41
Michał Perłakowski

Bien, Array.from est une méthode statique, c'est-à-dire une fonction alors que la syntaxe spread fait partie de la syntaxe littérale du tableau. Vous pouvez transmettre des fonctions comme des données, vous pouvez les invoquer une, plusieurs fois ou pas du tout. Ce n'est pas possible avec la syntaxe spread, qui est statique à cet égard.

Une autre différence, que @nils a déjà signalée, est que Array.from fonctionne également avec les objets de type tableau, qui n'implémentent pas le protocole itérable. spread d'autre part nécessite des itérables.

7
user6445533

La différence est que spread permet à un tableau d'être développé. Alors que from() crée un tableau nouvea. .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.

3
James Donnelly