Les tableaux en JavaScript

Dans ce chapitre, nous allons explorer les tableaux en JavaScript.

En JavaScript, vous pouvez utiliser des tableaux pour stocker plusieurs valeurs dans une seule variable.

Nous pouvons décrire un tableau comme une variable unique capable de contenir plus d'une valeur simultanément.

Il existe deux syntaxes pour générer un tableau vide:

let arr = new Array();
let arr = [];

La deuxième syntaxe est utilisée la plupart du temps. Vous pouvez ajouter des éléments initiaux entre les crochets, comme ceci:

Javascript arrays

let books = ["Html", "Css", "Javascript"]; console.log(books[0]); // Html console.log(books[1]); // Css console.log(books[2]); // Javascript

Vous pouvez également remplacer un élément comme suit:

Javascript arrays

let books = ["Html", "Css", "Javascript"]; books[2] = 'Php'; // now ["Html", "Css", "Php"] console.log(books);

Soit vous pouvez ajouter un nouveau à l'array, comme ceci:

Javascript arrays add new element

let books = ["Html", "Css", "Javascript"]; books[3] = 'Php'; // now ["Html", "Css", "Javascript", "Php"] console.log(books); // Html, Css, Javascript, Php

La longueur du tableau length est le compte total des éléments. Voici un exemple:

Javascript arrays length

let books = ["Html", "Css", "Javascript"]; console.log(books.length); // 3

Si vous allez montrer le tableau entier, vous pouvez utiliser console.log, comme ceci:

Un tableau est capable de stocker n'importe quel type d'éléments:

Javascript arrays multitype

// mix of values let arr = ['Javascript', { sitename: 'W3Docs'}, true, function () { console.log('welcome'); }]; // get the object at index 1 and then show its name console.log(arr[1].sitename); // W3Docs // get the function at index 3 and run it arr[3](); // welcome

On peut considérer les tableaux comme un type spécial d'objet. Une des similitudes les plus notables est que les tableaux peuvent se terminer par une virgule.

Par exemple:

let books = [
 "Html",
 "Css",
 "Javascript",
];

Méthodes

Un des usages les plus répandus des tableaux est une file d'attente. En informatique, c'est connu comme un assemblage ordonné d'éléments qui supportent les deux opérations suivantes:

push - est utilisé pour ajouter un élément à la fin

shift - est utilisé pour obtenir un élément au début, en faisant avancer la file d'attente. En conséquence, le deuxième élément devient le premier.

Les tableaux supportent les deux opérations mentionnées ci-dessus, et c'est une pratique courante pour les développeurs.

Vous pouvez utiliser des tableaux pour une autre pratique aussi. C'est une structure de données nommée pile, qui supporte deux opérations:

push - a pour objectif d'ajouter un élément à la fin.

pop - a pour objectif de prendre un élément de la fin.

En javascript, les tableaux fonctionnent comme une file d'attente et comme une pile. Avec l'aide des tableaux, vous pouvez ajouter ou supprimer des éléments au début ou à la fin.

Méthodes travaillant avec la fin d'un tableau

pop

Cette méthode est utilisée pour extraire et retourner le dernier élément du tableau. Par exemple:

Javascript arrays pop element

let books = ["Html", "Css", "Javascript"]; console.log(books.pop()); // remove "Jasvascript" and alert it console.log(books); // Html, Css

push

Vous pouvez utiliser cette méthode pour ajouter l'élément à la fin du tableau, comme ceci:

Javascript arrays push element

let books = ["Html", "Css"]; books.push("Javascript"); console.log(books); // Html, Css, Javascript

Les appels livres.push(...) et livres[livres.length] = ... sont équivalents.

Méthodes travaillant avec le début du tableau

shift

Cette méthode vise à extraire et retourner le premier élément du tableau.

Par exemple:

Javascript arrays shift element

let books = ["Html", "Css", "Javascript"]; console.log(books.shift()); // remove Html and show it console.log(books); // Css, Javascript

unshift

Celui-ci est utilisé pour ajouter l'élément au début du tableau, comme suit:

Javascript arrays unshift element

let books = ["Css", "Javascript"]; books.unshift('Html'); console.log(books); // Html, Css, Javascript

Avec l'aide des méthodes push et unshift, vous pouvez ajouter simultanément différents éléments.

Jetons un coup d'oeil à cet exemple:

Javascript arrays push and unshift element

let books = ["Html"]; books.push("Css", "Javascript"); books.unshift("Php", "C#"); // ["Php", "C#", "Html", "Css", "Javascript"] console.log(books);

Internes

Comme nous l'avons mentionné plus haut, les tableaux sont un type spécial d'objet. Les crochets carrés peuvent être utilisés pour accéder à une propriété arr[0] provenant de la syntaxe de l'objet. Une chose rend un tableau encore plus spécial. C'est leur représentation interne. Le moteur tend à stocker ses éléments consécutivement dans la zone mémoire contiguë. Mais, notez qu'ils se rompront si vous cessez de travailler avec le tableau dans l'ordre donné et de le traiter comme un objet ordinaire.

Par exemple, il est techniquement possible d'agir comme ceci:

let books = []; // make an array 
books[99999] = 5; // assign a property with the index far greater than its length 
books.name = "Javascript"; // create a property with an arbitrary name

Il est disponible parce que les tableaux sont des objets. Vous avez la possibilité d'ajouter des propriétés à ceux-ci.

Vous devez également connaître les cas de mauvaise utilisation du tableau pour les éviter. Voici plusieurs exemples:

Ajouter une propriété non numérique, telle que arr.test = 9.
Faire des trous, comme ajouter arr[0] puis arr[500] en ne mettant rien entre eux.
Remplir le tableau dans l'ordre inverse. Par exemple, arr[500], arr[499].

On peut supposer que l'on devrait traiter les tableaux comme des structures uniques en travaillant avec des données ordonnées.

Boucles

Une des façons courantes de parcourir les éléments d'un tableau est la boucle for sur les index.

Voici un exemple:

Javascript arrays loop

let arr = ["Html", "Css", "Javascript"]; for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }

Une autre forme de boucle est for..of.

L'exemple ressemble à ceci:

Javascript arrays loop

let books = ["Html", "Css", "Javascript"]; // iterates over array elements for (let book of books) { console.log(book); }

Cette forme de la boucle ne donne pas accès au numéro de l'élément courant.

Comme les tableaux sont des objets, vous pouvez techniquement utiliser for..in:

Javascript arrays loop

let booksArray = ["Html", "Css", "Javascript"]; for (let key in booksArray) { console.log(booksArray[key]); // Html, Css, Javascript }

Toutefois, ce n'est pas une bonne idée, car cela peut causer des problèmes potentiels, tels que:

La boucle for..in peut itérer sur toutes les propriétés, pas seulement les propriétés numériques.
La boucle for..in est optimisée pour les objets génériques mais pas pour les tableaux. C'est pourquoi elle est jusqu'à 10-100 fois plus lente.

La Longueur

Lorsque nous modifions le tableau, la propriété length se met à jour automatiquement. Ce n'est pas le nombre de valeurs dans le tableau, mais l'index numérique + 1. Par exemple, un seul élément avec un grand index donnera une grande longueur, comme ceci:

Javascript arrays length

let books = []; books[100] = "Html"; console.log(books.length); // 101

De toute façon, les développeurs n'utilisent pas les tableaux de cette façon.

La propriété length est modifiable. Lorsque vous la diminuez, le tableau est tronqué. Jetons un coup d'oeil à cet exemple:

Javascript arrays length

let arr = [1, 2, 3, 4, 5]; arr.length = 3; // truncate to 3 elements console.log(arr); // [1, 2, 3] arr.length = 5; // return length back console.log(arr[4]); // undefined: the values do not return

Vous pouvez facilement vider le tableau en utilisant arr.length = 0;.

Création d'un nouveau tableau

Voici une autre syntaxe pour créer un tableau:

let arr = new Array("Html", "Css", "etc");

De toute façon, cette syntaxe n'est pas souvent utilisée.

Dans le cas où un new Array est appelé avec un seul argument, qui est un nombre. Après cela, il crée un tableau sans éléments, mais avec une longueur particulière:

Javascript create array

let arr = new Array(3); // will it create an array of [3] console.log(arr[0]); // undefined! no elements. console.log(arr.length); // length 3

Dans le code mentionné ci-dessus, tous les éléments sont undefined .

Tableaux multidimensionnels

Les tableaux peuvent avoir des éléments qui sont des tableaux, aussi. Ils peuvent être utilisés pour les tableaux multidimensionnels pour stocker des matrices:

Javascript create array

let matrix = [ [1, 2, 3], [4, 5, 6], [7, 8, 9] ]; console.log(matrix[1][1]); // 5, the central elementarrays

Méthode toString

Les tableaux implémentent la méthode toString à leur manière. Elle renvoie une liste d'éléments séparés par des virgules. Voici un exemple:

Javascript create array

let arr = [1, 2, 3]; console.log(arr); // 1,2,3 console.log(String(arr) === '1,2,3'); // true

Il y en a une autre aussi:

Javascript create array

console.log([] + 1); // "1" console.log([1] + 1); // "11" console.log([2, 1] + 2); // "2,12"

Mais ils n'ont pas de Symbol.toPrimitive ni de valueOf. Les tableaux mettent en œuvre uniquement la conversion toString. Ainsi, ici [] se transforme en "1" et [2,1] devient "2,1".

Si la somme binaire "+" opératrice ajoute quelque chose à une chaîne, elle le convertit en une chaîne de manière à ce que l'étape suivante ressemble à ceci:

Javascript create array

console.log("" + 1); // "1" console.log("2" + 1); // "21" console.log("2,2" + 1); // "2,21"

Heure du Quiz : Testez Vos Compétences!

Prêt à relever le défi de ce que vous avez appris ? Plongez dans nos quiz interactifs pour approfondir votre compréhension et renforcer vos connaissances de manière ludique.