Implémenter Arraylist en JavaScript

1. Création d’éléments de tableau en JavaScript
2. Accéder aux éléments de tableau en JavaScript
3. Ajout d’éléments à un tableau en JavaScript
4. Suppression d’éléments d’un tableau

Nous connaissons très bien l’Arraylist en Java qui permet d’ajouter des éléments à un tableau sans préciser sa taille. C’est une fonctionnalité intéressante, mais avons-nous quelque chose de similaire en JavaScript ? Chaque langage a son propre ensemble de structures de données. En JavaScript, nous avons des tableaux qui peuvent stocker des valeurs homogènes ainsi que des valeurs hétérogènes. Hétérogène signifie que les valeurs peuvent être de différents types de données comme une chaîne, un nombre, un booléen, etc., tous réunis dans un seul tableau. C’est une fonctionnalité unique et meilleure par rapport à ArrayList en Java.

Création d’éléments de tableau en JavaScript

Créer un tableau en JavaScript est simple. Nous créons un tableau en utilisant le mot-clé var. C’est similaire à la façon dont nous créons un tableau en utilisant ArrayList en Java. Java insiste pour spécifier le type de données de la ArrayList. Mais en JavaScript, nous ne déclarons pas explicitement le type de données du tableau. Nous laissons l’interpréteur JavaScript prendre cette décision en fonction des valeurs attribuées dans le tableau. Quoi qu’il en soit, pour JavaScript, le type du Tableau est object. Référez-vous au code suivant pour créer un Array.

var a = [1, 6, 3, 5];
console.log(a.length);
console.log(typeof a);
console.log(typeof a[2]);

Production:

4
object
number

• length : JavaScript a l’attribut length qui renvoie la taille d’un tableau.
• typeof : typeof est un opérateur unaire. Et il est utilisé pour trouver le type d’opérande en JavaScript. Le code ci-dessus renvoie le type de données de Array sous la forme d’un objet avec l’opérateur typeof.

Accéder aux éléments de tableau en JavaScript

Tout comme la Arraylist en Java, nous pouvons itérer sur un tableau JavaScript en utilisant des boucles, la boucle for et la boucle while. JavaScript a également la fonction .foreach() pour itérer sur les éléments d’un tableau. On peut exécuter certaines lignes de code sur chaque élément Array avec .foreach(). La fonction .foreach() accepte une fonction en paramètre. Nous pouvons écrire cette fonction comme une fonction en ligne. Vérifiez l’extrait de code ci-dessous pour mieux comprendre.

var a = ['hello', 1, false];
a.forEach((i) => {
  console.log(typeof i);
})

Production:

string
number
boolean

Ici, nous appliquons l’opération typeof sur chaque élément du tableau. Le code enregistre en outre la sortie dans la console du navigateur Web. JavaScript a une autre fonction, la fonction .reverse(), qui inverse la position des éléments dans le tableau. Référez-vous au code suivant.

var a = ['hello', 1, false];
console.log(a.reverse());

OSortie :

[false, 1, "hello"]

Le journal ci-dessus est tel qu’obtenu dans la console du navigateur Web Google Chrome.

Ajout d’éléments à un tableau en JavaScript

On peut ajouter des éléments à une ArrayList avec la fonction .add() en Java. De même, en JavaScript, nous avons quelques fonctions que nous pouvons utiliser pour ajouter des éléments à différentes positions dans un tableau.

• .push() : Comme son nom l’indique, nous pouvons ajouter des éléments dans un tableau avec la fonction .push(). Il ajoute l’élément, passé en paramètre à la fonction, à la fin du tableau. La fonction .push() modifie le tableau d’origine. Par conséquent, soyez-en conscient lorsque vous l’utilisez dans le code. Il renvoie la taille modifiée du tableau après l’ajout du nouvel élément.
• .unshift() : Si nous devons ajouter un élément au début du Tableau, ce sera une tâche mouvementée car nous devrons repositionner tout le contenu du Tableau par un index. Nous pouvons réaliser cette tâche avec la fonction .unshift() en JavaScript. En utilisant unshift(), nous pouvons ajouter un ou plusieurs éléments au début du tableau. Nous passons les éléments que nous souhaitons ajouter au Tableau en paramètres à la fonction .unshift().

var a = ['hello', 1, false];
a.push(2.15);
console.log(a);
a.unshift(123);
console.log(a);

OSortie :

["hello", 1, false, 2.15]
[123, "hello", 1, false, 2.15]

La sortie est telle qu’obtenue dans le navigateur Web google chrome. Notez que les opérations modifient le tableau d’origine sans avoir à utiliser l’opérateur d’affectation.

Suppression d’éléments d’un tableau

De même, nous pouvons supprimer un élément d’un tableau en utilisant les fonctions JavaScript suivantes. Elle est comparable à la fonction remove() de ArrayList en Java.

• .pop() Si nous devons supprimer un élément derrière le array, nous pouvons utiliser la fonction .pop(). Sachez simplement que la fonction modifie le tableau d’origine et renvoie le dernier élément qui vient d’être sauté par celui-ci.
• .shift() Si nous devons supprimer un élément du début du Tableau, nous pouvons utiliser la fonction .shift(). Comme .pop(), .shift() modifie également le tableau d’origine. Soyez donc prudent lorsque vous utilisez la fonction .shift().

var a = [123, 'hello', 1, false, 2.15];
a.pop();
console.log(a);
a.shift();
console.log(a);

Production :

[123, "hello", 1, false]
["hello", 1, false]

Il y a quelques choses à noter ici.

1. Les fonctions pop() et shift() n’acceptent aucun paramètre. Et ils sont utilisés pour supprimer un élément d’un tableau à un moment donné.
2. Ils modifient le tableau d’origine sans avoir besoin d’un opérateur d’affectation. Par conséquent, nous devons les utiliser judicieusement, sinon nous pourrions être piégés par des effets secondaires inconnus qui seront difficiles à déboguer.

Ajouter et supprimer plusieurs éléments d’un tableau

Il existe une autre méthode en JavaScript, la fonction splice(). Nous pouvons l’utiliser pour ajouter ou supprimer un ou plusieurs éléments d’un tableau. La fonction splice() prend quelques paramètres comme suit.

• startIndex : On précise l’index du tableau avec le paramètre startIndex.
• count : Ce paramètre précise le nombre d’éléments que l’on souhaite supprimer du Array. Si aucun nombre n’est spécifié, alors le splice() supprimera tous les éléments du startIndex à la fin du tableau.
• elements : Le(s) dernier(s) paramètre(s) est la liste des éléments que l’on souhaite ajouter au Array à partir du startIndex. Si aucun élément n’est spécifié dans la fonction splice(), cela supprimera l’élément du tableau.

Regardons le code suivant pour mieux comprendre.

var a = [123, 'hello', 1, false, 2.15];
a.splice(2, 1, 'there');
console.log(a);
a.splice(2, 2);
console.log(a);
a.splice(2);
console.log(a);

Production :

[123, "hello", "there", false, 2.15]
[123, "hello", 2.15]
[123, "hello"]