Comprendre les tableaux en JavaScript

introduction

Unarray en JavaScript est un type d'objet global utilisé pour stocker des données. Les tableaux se composent d'une collection ordonnée ou d'une liste contenant zéro ou plusieurs types de données et utilisent des index numérotés à partir de0 pour accéder à des éléments spécifiques.

Les tableaux sont très utiles car ils stockent plusieurs valeurs dans une seule variable, ce qui peut condenser et organiser notre code, le rendant plus lisible et maintenable. Les tableaux peuvent contenir n'importe queldata type, y comprisnumbers,strings etobjects.

Pour démontrer l'utilité des tableaux, envisagez d'affecter les cinq variables du monde aux cinq océans du monde.

oceans.js

// Assign the five oceans to five variables
const ocean1 = "Pacific";
const ocean2 = "Atlantic";
const ocean3 = "Indian";
const ocean4 = "Arctic";
const ocean5 = "Antarctic";

Cette méthode est très prolixe et peut rapidement devenir difficile à maintenir et à suivre.

En utilisant des tableaux, nous pouvons simplifier nos données.

oceans.js

// Assign the five oceans
let oceans = [
    "Pacific",
    "Atlantic",
    "Indian",
    "Arctic",
    "Antarctic",
];

Au lieu de créer cinq variables distinctes, nous avons maintenant une variable qui contient les cinq éléments. Nous avons utilisé des crochets -[] - pour créer un tableau.

Pour accéder à un élément spécifique, ajoutez son index à la variable.

// Print out the first item of the oceans array
oceans[0];

OutputPacific

Dans ce tutoriel, nous allons apprendre à créer des tableaux. comment ils sont indexés comment ajouter, modifier, supprimer ou accéder aux éléments d'un tableau; et comment passer en boucle dans les tableaux.

Créer un tableau

Il existe deux manières de créer un tableau en JavaScript:

Le littéral de tableau, qui utilise des crochets.
Le constructeur de tableau, qui utilise le mot clénew.

Voyons comment créer un tableau d'espèces de requins à l'aide du littéral tableau, qui est initialisé avec[].

sharks.js

// Initialize array of shark species with array literal
let sharks = [
    "Hammerhead",
    "Great White",
    "Tiger",
];

Voici maintenant les mêmes données créées avec le constructeur de tableau, qui est initialisé avecnew Array().

sharks.js

// Initialize array of shark species with array constructor
let sharks = new Array(
    "Hammerhead",
    "Great White",
    "Tiger",
);

Les deux méthodes vont créer un tableau. Cependant, la méthode de tableau littéral (crochets) est beaucoup plus courante et préférée, car la méthode du constructeurnew Array() peut avoir des incohérences et des résultats inattendus. Il est utile de connaître le constructeur de tableau au cas où vous le rencontriez plus tard.

Nous pouvons imprimer un tableau entier, qui affichera la même chose que notre entrée.

// Print out the entire sharks array
sharks;

Output[ 'Hammerhead', 'Great White', 'Tiger' ]

Les tableaux sont souvent utilisés pour regrouper des listes de types de données similaires, mais ils peuvent techniquement contenir n'importe quelle valeur ou une combinaison de valeurs, y compris d'autres tableaux.

// Initialize array of mixed datatypes
let mixedData = [
    "String",
    null,
    7,
    [
        "another",
        "array",
    ],
];

Après avoir créé un tableau, nous pouvons le manipuler de nombreuses manières, mais nous devons d’abord comprendre comment les tableaux sont indexés.

[.note] #Note: Vous pouvez voir le dernier élément d'un tableau avec ou sans une virgule finale. Ceci est connu sous le nom detrailing comma. Il est courant de les voir omis, mais il est généralement préférable de les inclure dans votre code, car cela rend les différences de contrôle de version plus claires et facilite l'ajout et la suppression d'éléments sans erreurs. Notez que les virgules de fin ne sont pas autorisées dansJSON files.
#

Tableaux d'indexation

Si vous avez découvertindexing and manipulating strings in JavaScript, vous connaissez peut-être déjà le concept d’indexation de tableaux, car une chaîne est similaire à un tableau.

Les tableaux n'ont pas de paires nom / valeur. Au lieu de cela, ils sont indexés avec des valeurs entières commençant par0. Voici un exemple de tableau, affecté àseaCreatures.

seacreatures.js

let seaCreatures = [
    "octopus",
    "squid",
    "shark",
    "seahorse",
    "starfish",
];

Voici une description de la façon dont chaque élément du tableauseaCreatures est indexé.

poulpe	calamar	requin	hippocampe	étoile de mer
0	1	2	3	4

poulpe

calamar

requin

hippocampe

étoile de mer

Le premier élément du tableau estoctopus, qui est indexé à0. Le dernier élément eststarfish, qui est indexé à4. Le comptage commence par0 dans les indices, ce qui va à l'encontre de notre intuition naturelle de commencer à compter à 1, donc un soin particulier doit être pris pour s'en souvenir jusqu'à ce que cela devienne naturel.

Nous pouvons trouver le nombre d'éléments dans un tableau avec la propriétélength.

seaCreatures.length;

Output5

Bien que les indices deseaCreatures se composent de0 à4, la propriétélength affichera le nombre réel d'éléments dans le tableau, en commençant par 1.

Si nous voulons connaître le numéro d'index d'un élément spécifique dans un tableau, tel queseahorse, nous pouvons utiliser la méthodeindexOf().

seaCreatures.indexOf("seahorse");

Output3

Si un numéro d'index n'est pas trouvé, comme pour une valeur qui n'existe pas, la console renverra-1.

seaCreatures.indexOf("cuttlefish");

Output-1

Avec les numéros d’index correspondant aux éléments d’un tableau, nous pouvons accéder à chaque élément de manière discrète afin de travailler avec ces éléments.

Accéder aux éléments d'un tableau

On accède à un élément d'un tableau JavaScript en faisant référence au numéro d'index de l'élément entre crochets.

seaCreatures[1];

Outputsquid

Nous savons que0 affichera toujours le premier élément d'un tableau. Nous pouvons également trouver le dernier élément d'un tableau en effectuant une opération sur la propriétélength et en l'appliquant comme nouveau numéro d'index.

const lastIndex = seaCreatures.length - 1;

seaCreatures[lastIndex];

Outputstarfish

Tenter d'accéder à un élément qui n'existe pas renverraundefined.

seaCreatures[10];

Outputundefined

Afin d'accéder aux éléments d'un tableau imbriqué, vous ajouteriez un autre numéro d'index correspondant au tableau intérieur.

let nestedArray = [
    [
        "salmon",
        "halibut",
    ],
    [
        "coral",
        "reef",
    ]
];

nestedArray[1][0];

Outputcoral

Dans l'exemple ci-dessus, nous avons accédé au tableau à la position1 de la variablenestedArray, puis à l'élément à la position0 dans le tableau interne.

Ajout d'un élément à un tableau

Dans notre variableseaCreatures, nous avions cinq items, qui se composaient des indices de0 à4. Si nous voulons ajouter un nouvel élément au tableau, nous pouvons affecter une valeur à l'index suivant.

seaCreatures[5] = "whale";

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale' ]

Si nous ajoutons un élément et ignorons accidentellement un index, un élément non défini sera créé dans le tableau.

seaCreatures[7] = "pufferfish";

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    ,
    'pufferfish' ]

Tenter d'accéder à l'élément de tableau supplémentaire renverraundefined.

seaCreatures[6]

Outputundefined

Des problèmes comme celui-ci peuvent être évités en utilisant la méthodepush(), qui ajoute un élément à la fin d'un tableau.

// Append lobster to the end of the seaCreatures array
seaCreatures.push("lobster");

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    ,
    'whale',
    'pufferfish',
    'lobster' ]

À l'autre extrémité du spectre, la méthodeunshift() ajoutera un élément au début d'un tableau.

// Append dragonfish to the beginning of the seaCreatures array
seaCreatures.unshift("dragonfish");

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    ,
    'pufferfish',
    'lobster' ]

Entrepush() etunshift(), vous pourrez ajouter des éléments au début et à la fin d'un tableau.

Supprimer un élément d'un tableau

Lorsque nous voulons supprimer un élément spécifique d'un tableau, nous utilisons la méthodesplice(). Dans le tableauseaCreatures, nous avons accidentellement créé un élément de tableau non défini plus tôt, supprimons-le maintenant.

seaCreatures.splice(7, 1);

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish',
    'lobster' ]

Dans la méthodesplice(), le premier paramètre représente le numéro d'index à supprimer (dans ce cas,7), et le deuxième paramètre est le nombre d'éléments à supprimer. Nous mettons1, ce qui signifie qu'un seul élément sera supprimé.

La méthodesplice() changera la variable d'origine. Si vous souhaitez que la variable d'origine reste inchangée, utilisezslice() et affectez le résultat à une nouvelle variable.

let newArray = slice(7, 1);

La méthodepop() supprimera le dernier élément d'un tableau.

// Remove the last item from the seaCreatures array
seaCreatures.pop();

seaCreatures;

Output[ 'dragonfish',
    'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

lobster a été supprimé comme dernier élément du tableau. Afin de supprimer le premier élément du tableau, nous utiliserons la méthodeshift().

// Remove the first item from the seaCreatures array
seaCreatures.shift();

seaCreatures;

Output[ 'octopus',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

En utilisantpop() etshift(), nous pouvons supprimer des éléments du début et de la fin des tableaux. L'utilisation depop() est préférable dans la mesure du possible, car le reste des éléments du tableau conservent leurs numéros d'index d'origine.

Modification d'éléments dans des tableaux

Nous pouvons écraser n'importe quelle valeur d'un tableau en affectant une nouvelle valeur à l'aide de l'opérateur d'affectation, comme nous le ferions avec une variable régulière.

// Assign manatee to the first item in the seaCreatures array
seaCreatures[0] = "manatee";

seaCreatures;

Output[ 'manatee',
    'squid',
    'shark',
    'seahorse',
    'starfish',
    'whale',
    'pufferfish' ]

Une autre façon de modifier une valeur consiste à utiliser la méthodesplice() avec un nouveau paramètre. Si nous voulions changer la valeur deseahorse, qui est l'élément à l'index3, nous pourrions le supprimer et ajouter un nouvel élément à sa place.

// Replace seahorse with sea lion using splice method
seaCreatures.splice(3, 1, "sea lion");

seaCreatures();

Output[ 'manatee',
    'squid',
    'shark',
    'sea lion',
    'starfish',
    'whale',
    'pufferfish' ]

Dans l'exemple ci-dessus, nous avons suppriméseahorse du tableau et avons poussé une nouvelle valeur dans l'index3.

Boucler dans un tableau

Nous pouvons parcourir l'intégralité du tableau avec le mot-cléfor, en tirant parti de la propriétélength. Dans cet exemple, nous pouvons créer un tableau deshellfish et imprimer chaque numéro d'index ainsi que chaque valeur sur la console.

// Create an array of shellfish species
let shellfish = [
    "oyster",
    "shrimp",
    "clam",
    "mussel",
];

// Loop through the length of the array
for (let i = 0; i < shellfish.length; i++) {
  console.log(i, shellfish[i]);
}

Output0 'oyster'
1 'shrimp'
2 'clam'
3 'mussel'

Nous pouvons également utiliser la bouclefor...of, une fonctionnalité plus récente de JavaScript.

// Create an array of aquatic mammals
let mammals = [
    "dolphin",
    "whale",
    "manatee",
];

// Loop through each mammal
for (let mammal of mammals) {
    console.log(mammal);
}

Outputdolphin
whale
manatee

La bouclefor...of ne récupère pas le numéro d'index des éléments du tableau, mais c'est généralement une manière plus simple et plus concise de parcourir un tableau.

L'utilisation de boucles est extrêmement utile pour afficher toute la valeur d'un tableau, par exemple lors de l'affichage des éléments d'une base de données sur un site Web.

Conclusion

Les tableaux constituent une partie extrêmement polyvalente et fondamentale de la programmation en JavaScript. Dans ce tutoriel, nous avons appris à créer un tableau, à indexer les tableaux et à effectuer les tâches les plus courantes de travail dans les tableaux, telles que la création, la suppression et la modification d'éléments. Nous avons également appris deux méthodes de bouclage dans les tableaux, qui sont utilisées comme méthode courante pour afficher des données.

Pour en savoir plus sur les autres types de données en JavaScript, consultez notre tutoriel «https://www.digitalocean.com/community/tutorials/understanding-data-types-in-javascript[Comprendre les types de données en JavaScript].»

TOC