Aide-mémoire des méthodes de tableau JavaScript (en direct)
Aide-mémoire des méthodes de tableau JavaScript
Aide-mémoire des méthodes de tableau JavaScript (exécutez chacune en direct) | We.Inc
Saisissez votre propre liste et regardez map, filter, reduce, find, sort, splice et 30 autres méthodes de tableau s'exécuter dessus, avec un repère clair sur chaque méthode qui modifie le tableau d'origine.
Les méthodes de tableau se répartissent en deux camps. Certaines modifient le tableau sur lequel vous les appelez, comme push, pop, splice, sort et reverse. D'autres renvoient un nouveau tableau ou une valeur et laissent l'original intact, comme map, filter, slice, toSorted et reduce. Modifiez la liste ci-dessous et chaque méthode se relance sur vos valeurs.
Tâches courantes sur les tableaux et la méthode pour chacune
Tâche
Méthode
Modifie l'original ?
Transformer chaque élément
arr.map(fn)
Non
Garder les éléments qui passent un test
arr.filter(fn)
Non
Combiner en une seule valeur
arr.reduce(fn, start)
Non
Premier élément correspondant
arr.find(fn)
Non
Ajouter à la fin
arr.push(x)
Oui
Copie triée
arr.toSorted(fn)
Non
Compter les éléments
En lecture, non ; en écriture, oui
La plupart des aide-mémoire listent les noms de méthodes avec un seul exemple tout fait. Ici, les exemples s'exécutent sur une liste que vous contrôlez, ce qui vous permet de voir ce qui se passe avec des doublons, une liste vide ou un seul élément. Chaque ligne est étiquetée pour que vous sachiez d'un coup d'œil si une méthode réécrit vos données, une source fréquente de bugs d'état dans React et les bibliothèques similaires.
Saisissez une liste séparée par des virgules dans le champ. Les espaces autour de chaque élément sont supprimés.
Chaque ligne se recalcule. Les méthodes qui modifient le tableau s'exécutent à chaque fois sur une copie neuve, et la ligne affiche à la fois la valeur renvoyée et le tableau après l'appel.
Filtrez par nom ou choisissez un groupe comme Recherche ou Transformation pour réduire la liste.
Faites défiler pour voir des exemples d'enchaînement, la propriété length et le tableau d'équivalences entre méthodes qui modifient et méthodes qui copient.
Dans un état React, préférez toSorted, toReversed, toSpliced et with à leurs jumelles qui modifient sur place, car si vous changez l'ancien tableau, React risque de ne pas remarquer la mise à jour.
Donnez une valeur de départ à reduce. Sans elle, un tableau vide lève une TypeError.
forEach renvoie toujours undefined et ne peut pas être interrompu avec break. Utilisez for...of, some ou find quand vous devez vous arrêter plus tôt.
map, filter et slice ne copient qu'un seul niveau. Les objets du nouveau tableau sont les mêmes objets qu'avant.
Questions fréquentes
Comment obtenir la longueur d'un tableau en JavaScript ?
Lisez arr.length. C'est une propriété, pas une méthode, donc sans parenthèses. Elle vaut l'indice le plus élevé plus un, ce qui correspond au nombre d'éléments pour un tableau normal. Écrire arr.length = 0 vide le tableau, et indiquer un nombre plus petit supprime des éléments à la fin.
Quelle est la différence entre map et forEach ?
map construit un nouveau tableau à partir de ce que votre fonction renvoie pour chaque élément, vous pouvez donc l'affecter ou enchaîner d'autres méthodes. forEach se contente d'appeler votre fonction et renvoie undefined. Utilisez map quand vous voulez un résultat et forEach uniquement pour des effets de bord comme la journalisation.
Quelles méthodes de tableau modifient le tableau d'origine ?
push, pop, shift, unshift, splice, sort, reverse, fill et copyWithin modifient le tableau sur place. Affecter directement length ou un indice le modifie aussi. Toutes les autres méthodes de cette page le laissent intact.
Comment retirer un élément d'un tableau sans le modifier ?
Utilisez filter pour retirer par valeur, par exemple arr.filter((x) => x !== 'kiwi'), ou toSpliced(index, 1) pour retirer par position. Les deux renvoient un nouveau tableau et laissent l'original tel quel.
Pourquoi map renvoie des valeurs undefined ?
Votre callback n'a rien renvoyé. Une fonction fléchée avec des accolades a besoin d'un return explicite ; écrivez (x) => x * 2 ou (x) => { return x * 2; }. Un return manquant donne undefined pour cette case.
Lire un enchaînement de gauche à droite
Comme les méthodes qui copient renvoient des tableaux, vous pouvez appeler une autre méthode directement sur le résultat. Un enchaînement comme orders.filter(isPaid).map(toTotal).reduce(add, 0) se lit comme une phrase : garder les commandes payées, transformer chacune en nombre, les additionner.
Les longs enchaînements sont faciles à lire mais parcourent la liste une fois par étape. Pour quelques milliers d'éléments, cela ne compte jamais ; pour de très gros volumes, une seule boucle for...of qui fait les trois tâches est plus rapide.
Les méthodes de recherche renvoient des choses différentes
includes répond oui ou non. indexOf et findIndex donnent une position, -1 signifiant introuvable. find et findLast donnent l'élément lui-même, ou undefined. some et every répondent par oui ou non à une question posée par une fonction de test.
includes et indexOf comparent avec l'égalité stricte, ils ne peuvent donc pas trouver un objet d'après son contenu. Utilisez find ou some avec une fonction de test pour cela.
Les méthodes qui modifient et leurs jumelles qui copient
Quand vous ne devez pas toucher l'original, par exemple un état React ou un argument de fonction, remplacez la colonne de gauche par celle de droite.
Sur place ou copie
Modifie le tableau
Renvoie plutôt un nouveau tableau
arr.sort(fn)
arr.toSorted(fn)
arr.reverse()
arr.toReversed()
arr.splice(i, n, ...items)
arr.toSpliced(i, n, ...items)
arr[i] = value
arr.with(i, value)
arr.push(a, b)
[...arr, a, b] ou arr.concat([a, b])
arr.unshift(a)
[a, ...arr]
arr.pop()
arr.slice(0, -1)
arr.shift()
arr.slice(1)
Enchaîner map, filter et reduce
Total des commandes payées en un seul enchaînement
Chaque étape renvoie un tableau neuf, sur lequel s'exécute la méthode suivante. La liste de commandes d'origine n'est jamais modifiée.
Lire et définir length
length est une simple propriété. La réduire supprime des éléments à la fin, c'est pourquoi cela compte comme une modification du tableau.
Mettre à jour un état React sans le modifier
Les méthodes qui copient donnent à React un nouveau tableau, le composant se réaffiche donc. Appeler sort ou push sur le tableau d'état ne le ferait pas.
Nombre d'éléments
Premier élément
Dernier élément, en comptant depuis la fin
true si la valeur est présente
Première position de la valeur, ou -1
Dernière position de la valeur, ou -1
Premier élément qui passe le test
Position du premier élément qui passe
Dernier élément qui passe le test
true si au moins un élément passe
true si tous les éléments passent
Nouveau tableau des résultats du callback
Nouveau tableau des éléments qui passent
Réduit la liste à une seule valeur
map, puis aplatit d'un niveau
Copie des positions 1 et 2
Nouveau tableau avec des éléments ajoutés à la fin
Une chaîne avec un séparateur
Copie triée (ordre du texte)
Copie inversée
Copie sans la position 1
Copie avec la position 0 remplacée
Trie sur place et renvoie le même tableau
Inverse sur place
Ajoute à la fin, renvoie la nouvelle longueur
Retire le dernier élément et le renvoie
Ajoute au début, renvoie la nouvelle longueur
Retire le premier élément et le renvoie
Retire à partir de la position 1, renvoie les éléments retirés
Écrase de la position 1 jusqu'à la fin
Copie une partie du tableau sur une autre partie
Itérateur des positions (étalé ici pour l'afficher)
Itérateur de paires [position, élément]
Toutes
Lecture
Recherche
Transformation
Ordre
Ajout et retrait
Itération
Aide-mémoire interactif des méthodes de tableau
Saisissez une liste séparée par des virgules et chaque méthode ci-dessous s'exécute dessus pendant que vous la modifiez.