introduction
Le tableau JavaScript est un type de données constitué d’une liste d’éléments. Il existe de nombreuses méthodes intégrées utiles pour travailler avec des tableaux en JavaScript. 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 méthodes * accessor *. Dans ce tutoriel, nous allons nous concentrer sur les méthodes d’accès.
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].
Ce tutoriel présentera les méthodes permettant de concaténer des tableaux, de convertir des tableaux en chaînes, de copier des parties d’un tableau dans un nouveau tableau et de rechercher les index des tableaux.
concat ()
La méthode + concat () + fusionne deux ou plusieurs tableaux pour former un nouveau tableau.
Dans l’exemple ci-dessous, nous allons créer deux tableaux de types de mollusques et crustacés et les combiner dans un nouveau tableau.
// Create arrays of monovalves and bivalves
let monovalves = [ "abalone", "conch" ];
let bivalves = [ "oyster", "mussel", "clam" ];
// Concatenate them together into shellfish variable
let shellfish = monovalves.concat(bivalves);Une fois que nous aurons appelé le nouveau tableau, nous verrons qu’il consiste en une combinaison des deux tableaux originaux:
shellfish;Output[ 'abalone', 'conch', 'oyster', 'mussel', 'clam' ]La méthode + concat () + peut prendre plusieurs arguments, ce qui vous permet effectivement de concaténer plusieurs tableaux avec une seule méthode.
joindre()
La méthode + join () + convertit tous les éléments d’un tableau en une nouvelle chaîne.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Si aucun argument n’est fourni, le résultat de + join () + sera une chaîne séparée par des virgules, sans espace supplémentaire.
// Join the elements of an array into a string
let fishString = fish.join();
fishString;Output'piranha,barracuda,koi,eel'Afin d’inclure des espaces ou un autre séparateur, vous pouvez ajouter une chaîne de votre séparateur en tant que paramètre à la méthode join + () +. Ce paramètre contiendra le séparateur souhaité entre chaque élément du tableau.
// Join the elements of an array into a string
let fishString = fish.join(', ');
fishString;Output'piranha, barracuda, koi, eel'Dans l’exemple ci-dessus, l’écriture de «», «» avec des espaces sépare les éléments du tableau de manière plus lisible. Une chaîne vide fournie en argument supprimera complètement les virgules par défaut.
tranche()
La méthode + slice () + copie une partie d’un tableau dans un nouveau tableau.
let fish = [ "piranha", "barracuda", "koi", "eel" ];Supposons que nous souhaitons copier les deux derniers éléments du tableau dans un nouveau tableau. Nous commencerions par le numéro d’index du premier élément que nous voulons, qui est «+ 2 » pour « koi ». Nous finirions avec le numéro d'index _sous_ le dernier élément que nous voulons. Comme le dernier élément, " eel ", a le numéro d'index " 3 ", nous ajouterions " 4 +".
// Slice a new array from 2 to 5
let fishWithShortNames = fish.slice(2, 4);
fishWithShortNames;Output[ 'koi', 'eel' ]Dans ce cas particulier, puisque + eel + est le dernier élément du tableau, le deuxième argument est en fait inutile. + slice () + démarrera au premier index et s’arrêtera à la fin du tableau si aucun second argument n’est fourni.
// Slice a new array from 2 to the end of the array
let fishWithShortNames = fish.slice(2);
fishWithShortNames;Output[ 'koi', 'eel' ]+ slice () + ne doit pas être confondu avec https://www.digitalocean.com/community/tutorials/how-to-use-array-methods-in-javascript-mutator-methods#splice () [ méthode mutator + splice () +], qui permet d’ajouter ou de supprimer des éléments du tableau d’origine.
Indice de()
La méthode + indexOf () + renvoie le numéro d’index de la première instance d’un élément.
Dans l’exemple ci-dessous, nous avons une chaîne dans laquelle + barracuda + est répertorié deux fois.
let fish = [ "piranha", "barracuda", "koi", "barracuda" ];Nous allons utiliser + indexOf () + pour trouver la première instance.
// Find the first instance of an element
fish.indexOf("barracuda");Output1Si l’argument donné est une valeur qui n’existe pas dans le tableau, la console renverra + -1 +.
fish.indexOf("shark");Output-1La méthode + indexOf () + est particulièrement utile dans les tableaux contenant de nombreux éléments.
lastIndexOf ()
La méthode lastIndexOf (+) + renvoie le numéro d’index de la dernière instance d’un élément.
Nous pouvons tester sur le même exemple à partir de + indexOf () +, qui inclut + barracuda + deux fois.
let fish = [ "piranha", "barracuda", "koi", "barracuda" ];
// Find the last instance of an element
fish.lastIndexOf("barracuda");Output3+ lastIndexOf () + va rechercher dans le tableau à partir de la fin et renvoyer le premier numéro d’index trouvé.
Conclusion
Dans ce didacticiel, nous avons examiné les principales méthodes de tableau d’accessoires intégrées en JavaScript. Les méthodes d’accesseur créent une nouvelle copie ou représentation d’un tableau, par opposition à une mutation ou une modification de l’original.
Nous avons appris à concaténer des tableaux, ce qui les combine de bout en bout, ainsi qu’à convertir des tableaux en chaînes séparées par des virgules. Nous avons également appris à copier des parties d’un tableau dans un nouveau tableau et à trouver les premier et dernier indices d’un élément donné dans 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.