Comment ajouter une valeur dans un tableau JavaScript et manipuler les tableaux efficacement

Les variables de type Array Intro Dans ce cours javascript, nous allons étudier les variables javascript de type Array. À chaque élément du tableau peut s'appliquer toutes les propriétés que l'on a vu. Exemple : Exemple de code : var m=[true,2,5,"d","2 m","c"]; alert(Number(m[0])); //ou alert(parseInt(m[4]));

Longueur et parcours d’un tableau

Définition et utilisation de Array.length Pour connaître le nombre d'éléments qui compose le tableau, on utilise la propriété length de l’objet Array. Le premier élément d’un tableau est en position 0. Exemple : var dmc = [true,2,5,"d","m","c",]; alert(dmc.length); Le résultat est 7 …
Parcours du tableau pour récupérer des éléments On peut parcourir un tableau en testant les valeurs avec une boucle for ou une boucle while. Exemple de code : for (i=0;i

Transformer en String et joindre les valeurs

Définition Array.join() Vous pouvez récupérer les valeurs d'un tableau sous forme d'une String en utilisant join(separateur). Si l’argument est omis, le séparateur par défaut est une virgule. Exemple : var dmc = [true,2,5,"d","2 m","c"]; alert(dmc.join("|"));//true|2|5|d|2 m|c

Attention : si votre tableau contient des valeurs autres que String, Number, Boolean, elles ne seront pas converties en string. Exemple : var dmc = [true,{dmc:"alias"},5,"d","2 m","c"]; alert(dmc.join("|"));//true|[object Object]|5|d|2 m|c

Rassembler plusieurs tableaux

Définition Array.concat() Vous pouvez "additionner" à un tableau d'autres tableaux en utilisant concat(lestableaux). Exemple : var dmc = [1,2]; var dmc1 = [3,4]; var dmc2 = [5,6]; alert(dmc.concat(dmc1,dmc2)); // 1,2,3,4,5,6

Insertion et suppression d’éléments

Supprimer le dernier élément avec Array.pop() La méthode pop() enlève le dernier élément et retourne sa valeur. Exemple : var dmc = [1,2]; alert(dmc.pop()); //2 alert(dmc);//1
Supprimer le premier élément avec Array.shift() shift() enlève le premier élément et retourne sa valeur. Exemple : var dmc = [1,2]; alert(dmc.shift()); //1 alert(dmc);//2
Insérer des valeurs à la fin avec Array.push() push(listevaleur) peut prendre plusieurs valeurs et retourne la nouvelle longueur du tableau. Exemple : var dmc = [1,2,3]; alert(dmc.push(4,5));//5
Insérer des valeurs au début avec Array.unshift() unshift(listevaleur) insère au début et retourne la nouvelle longueur du tableau. Exemple : var dmc = [1,2,3]; alert(dmc.unshift(4,5));//5

Insertion, suppression et modification à un endroit donné

Utilisation de Array.splice() splice(debut, quantite, listevaleur) permet d’ajouter, modifier ou supprimer des éléments à partir d’un indice donné. Démo : on peut insérer sans suppression ou supprimer sans insertion selon les paramètres. Les index négatifs sont autorisés et la fonction retourne le tableau modifié.

Tester et manipuler les tableaux

Tester si une variable est un Array avec Array.isArray() Cette méthode renvoie true si la valeur est un Array. Exemple : var aArray = [1,2]; alert(Array.isArray(aArray));//true
Vérifier la présence d’une valeur avec Array.indexOf() indexOf() retourne l’indice de la première occurrence ou -1 si absent. Exemple : [1,2,3].indexOf(2) // 1
Rechercher des objets ou des éléments avec find/findIndex etc. findIndex retourne l’indice du premier élément satisfaisant une condition. Exemple: tableau d’objets et fonction item => item.id == 1

Tri et transformation avancée

Tri du tableau avec sort(fn) et comparaison locale String.localeCompare() pour trier des chaînes. L’algorithme de tri est interne et optimisé, mais on peut passer une fonction de comparaison personnalisée.

Transformation et réduction

Split et join inverses D’une chaîne à un tableau et vice-versa : str.split(separator) et arr.join(separator). Ces méthodes transforment des chaînes et des tableaux, et peuvent être utilisées pour préparer des listes d’éléments à partir d’une valeur unique.

Réduction et accumulation avec reduce et reduceRight, qui prennent un accumulateur et une fonction, utiles pour sommer ou agréger des valeurs dans un tableau.

Objets et tableaux dynamiques

Les tableaux en JavaScript peuvent contenir des données de types différents et peuvent être modifiés dynamiquement. L’accès à une propriété non définie retourne undefined, et l’opérateur ?. permet d’éviter les erreurs lors de l’accès à des propriétés profondes.

Bonnes pratiques et astuces

Pour copier ou cloner des objets et tableaux, privilégier les méthodes et opérateurs modernes (spread ...), et être conscient des répercussions sur les références et les copies profondes. On peut aussi utiliser Object.keys pour itérer sur les propriétés propres d’un objet, sans les héritées par la chaîne de prototypes.

8 méthodes javascript pour les tableaux à connaître absolument !

En résumé, il existe de nombreuses méthodes utiles pour ajouter, insérer, supprimer ou transformer des valeurs dans un tableau JavaScript. La bonne pratique consiste à choisir la méthode adaptée au contexte et à comprendre l’effet sur le tableau et sur les références.

Exemple récapitulatif: ajouter une valeur et mettre à jour le tableau

Supposons que l’on veuille ajouter une valeur à la fin et ensuite supprimer le premier élément :

var tab = [10, 20, 30];
tab.push(40); // tab est [10, 20, 30, 40]
tab.shift(); // tab est [20, 30, 40]

Lire aussi: Fiche INSEE : le guide

balises: