Liste Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | |

Nous allons créer nous-mêmes une liste de fruits. Nous appellerons notre liste "fruits" et ajouterons les valeurs suivantes : banane, melon, raisin. Oh, comme j`aime les fruits ! Bien que cela puisse ressembler à un didacticiel sur la liste de courses, nous venons en fait de créer un tableau.

Dans ce guide, nous verrons ce que sont les tableaux, comment ils fonctionnent et pourquoi vous devriez les utiliser dans votre code. Nous allons discuter de quelques exemples de tableaux en action afin que vous puissiez devenir un ninja du tableau JavaScript !

Qu`est-ce qu`un tableau ?

Un tableau est un objet qui stocke des données. Les tableaux contiennent une collection ordonnée d`éléments et peuvent stocker zéro ou plusieurs éléments. Les tableaux sont utiles en programmation car ils permettent vous permet de stocker des valeurs similaires dans une variable.

Vous n`avez pas besoin d`écrire dix variables simples pour lister vos fruits préférés, par exemple. Avec un tableau, vous pouvez ajouter tous vos fruits préférés dans une variable.

Considérons l`exemple suivant :.

Ici, nous avons créé un tableau appelé "fruits". Il stocke trois valeurs différentes, dont chacune reflète un fruit que nous voulons acheter dans une épicerie. Pour déclarer notre tableau, nous avons placé notre liste d`éléments entre crochets.

Déclarer un tableau

Il y a deux façons de déclarer un tableau. La façon dont vous verrez la plupart des gens faire cela est d`encercler une liste d`éléments entre crochets, comme nous l`avons fait précédemment :

Dans cet exemple, nous avons déclaré un tableau avec trois valeurs. Nous pouvons également utiliser le constructeur de tableau, qui utilise le mot-clé new pour déclarer un tableau :

Ces extraits de code créent le même tableau, mais en utilisant des méthodes différentes. Notez que dans notre deuxième exemple, nous avons utilisé des supports circulaires pour déclarer notre tableau. Nous utilisons également le constructeur new Array pour déclarer un tableau. C`est pour cette raison que la plupart des gens préfèrent la première méthode ; Les crochets sont beaucoup plus faciles à retenir et à taper plus rapidement

les tableaux peuvent ne pas inclure le même type de données Notre réseau peut stocker un certain nombre de types de données différents.

Ce tableau stocke trois types de données différents : une chaîne, un nombre et un booléen Maintenant que vous savez comment déclarer un tableau, vous êtes prêt à accéder à son contenu.

Lire un tableau

Les tableaux ne seraient pas très utiles si nous ne pouvions pas les lire. valeurs. C`est pourquoi l`indexation existe. l`index est un moyen d`accéder à des éléments individuels dans objet itérable sous forme de liste.

Chaque élément d`un tableau dans un tableau se voit attribuer son index numb euh. Ces nombres commencent par 0 et peuvent être utilisés pour alterner le courant avec des éléments individuels dans un tableau. Vous vous souvenez de notre tableau "fruits" ?

Voici les valeurs d`index ‚Äã‚Äãattribuées à ce tableau :

à l`aide de ces numéros, nous pouvons accéder aux différents éléments de notre liste. Supposons que vous souhaitiez identifier le fruit à la position d`index 1 dans votre tableau. Vous pouvez le faire en indiquant la valeur de l`index entre parenthèses après le nom de la table :

Notre code revient. raisins Nous nous référons à la position 1 de l`indice, qui stocke la valeur "Raisin". Si vous avez passé la valeur 0, "Banane" sera retourné. Si vous tentez d`accéder à un élément qui n`existe pas, "undefined" sera renvoyé :

Sortie : non définie. L`indexation est particulièrement utile lorsque vous souhaitez parcourir les éléments d`un tableau. Disons que vous voulez imprimer chaque fruit de votre pochoir sur la console. Vous pouvez le faire en utilisant une boucle comme celle-ci :

Ce code renvoie :

Notre code passe par chaque élément de notre liste, puis imprime chaque élément sur la console. Vous remarquerez également que nous avons utilisé la longueur . Cette fonction retourne la longueur de notre liste

Ajouter des éléments à un tableau

la plupart des pa , Parfois, vous souhaitez ajouter une nouvelle valeur à un tableau après avoir initialement déclaré votre tableau. Vous pouvez le faire en utilisant le tableau push () .

Nous avons oublié d`ajouter "Fraise" à notre liste de fruits. Oh non ! Ne vous inquiétez pas, nous pouvons toujours ajouter en utilisant le push ()  :

Maintenant que nous avons exécuté ce code, notre tableau ressemble à ceci :

< table class = "wp-block table cours-info table"> Banane Raisin Melon Fraise 1 2 3

Vous pouvez ajouter des données au début de votre tableau en utilisant le code < > unshift () . Les fraises sont si importantes dans notre liste de courses que nous voulons qu`elles apparaissent en premier :

Cela donnerait à notre liste de "fruits" l`aspect suivant :

< td > fraise
banane raisin Melon
1 2 3

supprimer des éléments d`un tableau

Il s`avère que nous avons déjà un melon à la maison, donc nous n`avons pas eu besoin pour en acheter un. Quel est l`intérêt d`acheter un melon, n`est-ce pas ? Puisque le melon est à la fin de notre liste, nous avons deux options pour le supprimer :

à l`aide de Let splice() par exemple :.

Notre code renvoie :

splice() accepte deux paramètres. Le premier est le numéro d`index à supprimer du tableau et le second est le nombre d`éléments à supprimer. Dans ce cas, nous voulions supprimer l`élément avec la valeur d`index 3, nous avons donc spécifié "3, 1" comme paramètres.

pop () n`accepte aucun paramètre . Supprimer uniquement le dernier élément d`une liste :

Notre code renvoie :

Vous pouvez également utiliser shift () pour supprimer un élément du début d`une liste :

Notre code renvoie :

push () et unshift () ajoutent des éléments à la liste. Éléments pop () et shift () Supprimer de la liste. La méthode d`assemblage peut également être utilisée pour supprimer un élément d`une liste en fonction de sa valeur d`index

Modification éléments d`une série

Même si les bananes sont un fruit savoureux, elles sont souvent si grosses que vous ne pouvez pas en manger comme collation lorsque vous vous sentez un peu nerveux. J`ose avoir faim. Les petites bananes sont plus faciles à manger.

Maintenant, disons que nous voulons changer notre liste de « fruits » pour acheter des bananes miniatures au lieu de bananes ordinaires. Nous pourrions le faire en utilisant l`opérateur d`affectation car nous avons toutes des variables :

Notre code renvoie :

Nous avons modifié l`entrée à la position d`index 0 pour stocker la valeur "baby bananas". Il n`est pas nécessaire d`utiliser des méthodes spéciales pour effectuer ce changement ; l`opérateur d`affectation est utilisé pour modifier val ues ‚Äã‚Äãdans un tableau.

Conclusion

C`est la base de ce que vous devez savoir sur les tableaux JavaScript. Il y a plus à apprendre, mais c`est ce qui rend la programmation amusante : il y a toujours un nouveau défi à relever. Si rien d`autre, vous avez appris mes fruits préférés.Bien que je dirais que j`aime le cassis, je ne l`ai pas mentionné dans ce tutoriel.

Vous êtes maintenant prêt à commencer à travailler avec des tableaux JavaScript comme un connaisseur !