introduction
Arrays en JavaScript consiste en une liste d’éléments. JavaScript a de nombreuses méthodes intégrées utiles pour travailler avec des tableaux. Les méthodes qui modifient le tableau d’origine sont appelées méthodes * mutator , et les méthodes renvoyant une nouvelle valeur ou représentation sont appelées https://www.digitalocean.com/community/tutorials/how-to-use-array-methods- in-javascript-accessor-methods [ méthodes accessor *]. Dans ce tutoriel, nous allons nous concentrer sur les méthodes de mutateur.
Pour tirer le meilleur parti de ce didacticiel, vous devez vous familiariser avec la création, l’indexation, la modification et la mise en boucle de tableaux, que vous pouvez consulter dans le didacticiel https://www.digitalocean.com/community/tutorials/understanding. -rarays-in-javascript [Comprendre les tableaux en JavaScript].
Les tableaux sont similaires à strings, en ce qu’ils consistent tous deux en une séquence d’éléments peut être consulté via un numéro d’index. Cependant, il est important de se rappeler que les chaînes sont un type de données immuable, ce qui signifie qu’elles ne peuvent pas être modifiées. Les tableaux, en revanche, sont modifiables, ce qui signifie que de nombreuses méthodes de tableau affecteront le tableau d’origine et non une copie du tableau.
Ce didacticiel explique comment ajouter et supprimer des éléments, inverser, remplacer ou modifier des éléments dans un tableau.
isArray ()
Avant d’entrer dans les méthodes mutator, examinons la méthode + isArray () + pour vérifier si les objets sont des tableaux. Ceci est une méthode Boolean qui renvoie + true + si la valeur d’une variable est égale à un tableau. Si l’objet n’est pas un tableau, cette méthode retourne + false.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Test if fish variable is an array
Array.isArray(fish);OutputtrueLa méthode + isArray () + est utile car l’opérateur + typeof + que nous utiliserions normalement pour le test renvoie les objets + object + lorsqu’il est utilisé avec des tableaux, et connaissant parfois la distinction entre un objet et + + Array + ` nécessaire.
Notez que + isArray () + est écrit différemment de la plupart des méthodes de tableau, la variable de tableau étant fournie comme argument de la méthode.
Maintenant que nous savons comment vérifier si un objet est un tableau, passons aux méthodes mutator.
pop()
La première méthode de mutation que nous examinerons est la méthode + pop () +, qui supprime le dernier élément de la fin d’un tableau.
Nous allons commencer par notre tableau + poisson +.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Initialisons la méthode + pop () + afin de supprimer le dernier élément. Dans ce cas, ce sera le littéral de chaîne " anguille ".
// Use pop method to remove an item from the end of an array
fish.pop();Nous allons appeler notre tableau pour nous assurer qu’il est renvoyé sans le dernier élément:
fish;Output[ 'piranha', 'barracuda', 'koi' ]Nous avons réussi à supprimer " anguille " du tableau + poisson +. La méthode + pop () + ne prend aucun paramètre supplémentaire.
décalage()
Une autre méthode de mutation, la méthode + shift () + supprime le premier élément du début d’un tableau.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Nous allons utiliser + shift () + pour supprimer " piranha " de l’index + 0 + et décaler tout le reste des éléments d’un index.
// Use shift method to remove an item from the beginning of an array
fish.shift();
fish;Output[ 'barracuda', 'koi', 'eel' ]Dans cet exemple, " piranha " a été supprimé et chaque élément a été décalé d’un numéro d’index. Pour cette raison, il est généralement préférable d’utiliser la méthode + pop () + chaque fois que possible, car les autres éléments du tableau conserveront leurs positions d’index.
pousser()
La méthode mutator + push () + ajoute un ou plusieurs éléments à la fin d’un tableau.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Pour ajouter un élément à la fin, nous écrivons le nouvel élément en tant que paramètre de la fonction.
// Use push method to add an item to the end of an array
fish.push("swordfish");
fish;Output[ 'piranha', 'barracuda', 'koi', 'eel', 'swordfish' ]Il est également possible d’ajouter plusieurs nouvelles valeurs au tableau. Par exemple, + fish.push (" espadon "," dragonfish ") + aurait ajouté des éléments pour indexer "+ 4 " et " 5 +".
unshift ()
La méthode de tableau + unshift () + mutator ajoute un ou plusieurs éléments au début d’un tableau.
let fish = [ "piranha", "barracuda", "koi", "eel" ];// Use unshift method to add an item to the beginning of an array
fish.unshift("shark");
fish;Output[ 'shark', 'piranha', 'barracuda', 'koi', 'eel' ]Dans l’exemple ci-dessus, " shark " a été ajouté à la position d’indexation "+ 0 ` ", décalant tous les autres éléments du tableau. Comme avec ` shift () +`, vous pouvez ajouter simultanément au tableau plusieurs éléments séparés par des virgules.
+ pop () + et + push () + affectent la fin d’un tableau, et + shift () + et + unshift () + affectent le début d’un tableau. Un moyen facile de s’en souvenir est de garder à l’esprit que + shift () + et + unshift () + changeront tous les numéros d’index du tableau retourné.
épissure()
La méthode + splice () + peut ajouter ou supprimer un élément de n’importe quelle position dans un tableau. Une méthode de mutation, + splice () + peut soit ajouter ou supprimer, soit ajouter et supprimer simultanément.
+ splice () + prend trois paramètres: le numéro d’index à partir duquel commencer, le nombre d’éléments à supprimer et les éléments à ajouter (facultatif).
splice(index number, number of items to remove, items to add)+ splice (0, 0," new ") + ajoute la chaîne " new " au début d’un tableau et ne supprime rien.
Voyons ci-dessous quelques exemples montrant comment + splice () + peut ajouter et supprimer des éléments dans un tableau.
Ajout avec + splice () +
Si nous définissons notre deuxième paramètre (éléments à supprimer) comme + 0 +, + splice () + supprime zéro élément. De cette façon, nous pouvons choisir d’ajouter uniquement un élément commençant par n’importe quel numéro d’index, ce qui rend + splice () + plus puissant que + push () + ou + unshift () +, qui ne font qu’ajouter des éléments à la fin ou le début d’un tableau.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Splice a new item number into index position 1
fish.splice(1, 0, "manta ray");
fish;Output[ 'piranha', 'manta ray', 'barracuda', 'koi', 'eel' ]La nouvelle chaîne, " manta ray ", a été ajoutée dans le tableau à partir de l’index + 1 +.
Supprimer avec + splice () +
Si nous laissons le troisième paramètre (éléments à ajouter) vide, nous pouvons simplement supprimer un élément de n’importe quel point du tableau.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items, starting at index position 1
fish.splice(1, 2);
fish;Output[ 'piranha', 'eel' ]Nous avons supprimé deux éléments du tableau, commençant par l’index + 1 +, " barracuda ". Si le deuxième argument est supprimé, tous les éléments à la fin du tableau seront supprimés.
Ajouter et supprimer avec + splice () +
En utilisant tous les paramètres à la fois, nous pouvons à la fois ajouter et supprimer des éléments d’un tableau.
Pour illustrer cela, supprimons les mêmes objets que ci-dessus et ajoutons-en un à leur place.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Remove two items and add one
fish.splice(1, 2, "manta ray");
fish;Output[ 'piranha', 'manta ray', 'eel' ]+ splice () + est une méthode puissante pour modifier n’importe quelle partie d’un tableau. Notez que + splice () + ne doit pas être confondu avec + slice () + un tableau d’accesseurs qui fera une copie d’une section d’un tableau.
sens inverse()
La méthode + reverse () + inverse l’ordre des éléments dans un tableau.
let fish = [ "piranha", "barracuda", "koi", "eel" ];En utilisant + reverse () +, le dernier élément sera le premier et le premier élément sera le dernier.
// Reverse the fish array
fish.reverse();
fish;Output[ 'eel', 'koi', 'barracuda', 'piranha' ]La méthode du tableau + reverse () + n’a pas de paramètre.
remplir()
La méthode + fill () + remplace tous les éléments d’un tableau par une valeur statique.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Dans le tableau + poisson +, nous avons quatre éléments. Appliquons + fill () +.
// Replace all values in the array with "shark"
fish.fill("shark");
fish;Output[ 'shark', 'shark', 'shark', 'shark' ]Les quatre éléments du tableau ont été remplacés par la même valeur, " shark ". + fill () + prend également les arguments optionnels des points de début et de fin.
fish.fill("shark", 1) // > [ 'piranha', 'shark', 'shark', 'shark' ]
fish.fill("shark", 1, 3); // > [ 'piranha', 'shark', 'shark', 'eel' ]En utilisant + fill () +, nous pouvons remplacer un ou plusieurs éléments dans un tableau par une valeur statique.
Trier()
La méthode + sort () + trie les éléments d’un tableau en fonction du premier caractère de l’élément. Dans le cas où le premier caractère est identique, il continuera sur la ligne et comparera le deuxième caractère, et ainsi de suite.
Par défaut, + sort () + va alphabétiser un tableau de chaînes en majuscules ou en minuscules.
let fish = [ "piranha", "barracuda", "koi", "eel" ];
// Sort items in array
fish.sort();
fish;Output[ 'barracuda', 'eel', 'koi', 'piranha' ]Puisque + sort () + est basé sur le premier caractère Unicode, il va trier les éléments en majuscule avant les minuscules.
Modifions notre tableau d’origine de sorte qu’une de nos chaînes commence par une lettre majuscule.
let fish = [ "piranha", "barracuda", "Koi", "eel" ];
fish.sort();
fish;Output[ 'Koi', 'barracuda', 'eel', 'piranha' ]Les chiffres viennent avant les caractères majuscules et minuscules.
Nous pouvons encore modifier le tableau pour inclure un nombre dans l’un des éléments de chaîne.
let fish = [ "piranha", "barracuda", "Koi", "1 eel" ];
fish.sort();Output[ '1 eel', 'Koi', 'barracuda', 'piranha' ]+ sort () + ne triera pas un tableau de nombres par taille par défaut. Au lieu de cela, il ne vérifiera que le premier caractère du numéro.
let numbers = [ 42, 23, 16, 15, 4, 8 ];
numbers.sort();Output[ 15, 16, 23, 4, 42, 8 ]Afin de trier les nombres correctement, vous pouvez créer une fonction de comparaison en tant qu’argument.
// Function to sort numbers by size
const sortNumerically = (a, b) => {
return a - b;
}
numbers.sort(sortNumerically);Output[ 4, 8, 15, 16, 23, 42 ]La fonction de comparaison + sortNumerically + nous a permis de trier comme prévu. + sort () + appliquera la modification au tableau d’origine.
Conclusion
Dans ce didacticiel, nous avons examiné les principales méthodes de tableau de mutateurs en JavaScript. Les méthodes Mutator modifient le tableau d’origine sur lequel elles sont utilisées, par opposition à la création d’une copie comme le font les méthodes d’accès. Nous avons appris à ajouter et à supprimer des éléments au début ou à la fin d’un tableau, ainsi qu’à trier, inverser et remplacer la valeur des éléments d’un tableau.
Pour consulter les bases des tableaux, lisez Comprendre les tableaux en JavaScript. Pour voir la liste complète de toutes les méthodes de tableau, consultez la référence Array sur le réseau de développeurs Mozilla.