Manipuler des tableaux en JavaScript : un guide complet

Introduction

Les tableaux sont une structure de données courante en programmation. Ils permettent de stocker et de manipuler des collections d’éléments sous forme d’un ensemble d’indices numériques. Dans cet article, nous allons explorer les différentes méthodes pour créer, modifier et manipuler des tableaux en JavaScript.

Création de tableaux

Il existe plusieurs façons de créer un tableau en JavaScript. La plus commune est d’utiliser la notation littérale de tableau :

var arr = [1, 2, 3, 4];

Cela crée un nouveau tableau avec les éléments spécifiés. Vous pouvez également utiliser le constructeur Array pour créer un nouveau tableau :

var arr2 = new Array(1, 2, 3, 4);

Notez que si vous utilisez le constructeur Array sans arguments, il crée un tableau vide.

Initialisation de tableaux

Il est possible d’initialiser des tableaux avec une valeur spécifique. Par exemple :

var arr = new Array(10).fill(0);

Cela crée un tableau de 10 éléments, tous initiaux à 0.

Méthodes pour les tableaux

Les tableaux en JavaScript disposent d’une série de méthodes qui peuvent être utilisées pour les manipuler. Voici quelques-unes des plus courantes :

Joining array elements in a string

La méthode join() permet de rejoindre tous les éléments d’un tableau sous forme de chaîne de caractères :

console.log(["Hello", " ", "world"].join(""));
// "Hello world"

Notez que les éléments qui ne sont pas des chaînes de caractères seront convertis en telles.

Removing/Adding elements using splice()

La méthode splice() permet de supprimer ou d’insérer des éléments dans un tableau. Par exemple, pour supprimer le premier élément :

var values = [1, 2, 3, 4];
var i = values.indexOf(1);
if (i >= 0) {
    values.splice(i, 1);
}
// [2, 3, 4]

Pour insérer des éléments à la fin d’un tableau :

var values = [1, 2, 3, 4];
values.splice(values.length + 1, 0, 5, 6, 7);
//[1, 2, 3, 4, 5, 6, 7]

The entries() method

La méthode entries() retourne un nouvel objet itérateur qui contient les paires index-valeur pour chaque élément du tableau :

var letters = ['a','b','c'];
for(const[index,element] of letters.entries()){
    console.log(index, element);
}
// 0 "a"
// 1 "b"
// 2 "c"

Notez que cette méthode n’est pas supportée par Internet Explorer.

Remove value from array

Pour supprimer un élément spécifique d’un tableau, vous pouvez utiliser la méthode filter() :

var array = [1, 2, 3, 4];
array.filter(function(val) {
    return val !== 3;
});
// [1, 2, 4]

Flattening Arrays

Il est possible de flatter un tableau en utilisant la méthode concat() et l’opérateur spread (...) :

function flattenES6(arr) {
    return [].concat(...arr);
}
var arrL1 = [1, 2, [3, 4]];
console.log(flattenES6(arrL1));
// [1, 2, 3, 4]

Append/Prepend items to Array

La méthode unshift() permet d’ajouter des éléments à la fin d’un tableau :

var array = [3, 4, 5, 6];
array.unshift(1, 2);
// [1, 2, 3, 4, 5, 6]

La méthode push() permet d’ajouter des éléments à la fin d’un tableau :

var array = [1, 2, 3];
array.push(4, 5, 6);
// [1, 2, 3, 4, 5, 6]

Les deux méthodes renvoient la nouvelle longueur du tableau.

Object keys and values to array

Il est possible de convertir les clés et valeurs d’un objet en tableau en utilisant une boucle for :

var object = { key1: 10, key2: 3, key3: 40, key4: 20 };
var array = [];
for(var people in object) {
    array.push([people, object[people]]);
}
// [["key1", 10], ["key2", 3], ["key3", 40], ["key4", 20]]

Logical connective of values

Les méthodes some() et every() permettent de réaliser une connexion logique entre les éléments d’un tableau. La méthode some() combine les valeurs avec un OR, tandis que la méthode every() les combine avec un AND :

[false, false].some(function(value) {
    return value;
});
// false

[true, true].some(function(value) {
    return value;
});
// true

[false, false].every(function(value) {
    return value;
});
// false

[false, true].every(function(value) {
    return value;
});
// false

Checking if an object is an Array

La méthode Array.isArray() permet de vérifier si un objet est un tableau :

Array.isArray([])
// true

Array.isArray([1, 2, 3])
// true

Array.isArray({})
// false

Array.isArray(1)
// false

Notez que cette méthode a l’avantage sur la méthode instanceof de toujours retourner vrai même si le prototype du tableau a été changé.

Conclusion

Dans cet article, nous avons exploré les différentes méthodes pour créer, modifier et manipuler des tableaux en JavaScript. Nous avons également vu comment utiliser les méthodes some() et every() pour réaliser une connexion logique entre les éléments d’un tableau. Enfin, nous avons vu comment vérifier si un objet est un tableau en utilisant la méthode Array.isArray().