Que sont les tableaux ?

Les tableaux sont une structure de données qui stocke une collection ordonnée d'éléments. En JavaScript, les tableaux sont classés comme un type spécial d'objet et peuvent stocker des nombres, des chaînes, des objets ou d'autres tableaux. Les éléments d'un tableau sont placés entre crochets [ ] et utilisent un index de base zéro. Un index de base zéro signifie que le premier élément d'un tableau aura un indice de 0, le deuxième élément aura un indice de 1, et ainsi de suite.

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"

Comment les tableaux peuvent-ils être modifiés ou manipulés ?

Index de l'élément dans un tableau

Un nouvel élément peut être ajouté à un tableau en attribuant une valeur à un index vide.

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]

Les éléments d'un tableau peuvent être modifiés en réaffectant une nouvelle valeur à un index existant.

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

Méthodes de tableau

Les tableaux peuvent également être modifiés ou manipulés avec des méthodes de tableau telles que « push », « pop », « unshift », « shift », « slice » et « splice ».

'pousser()'

La méthode 'push' prend un ou plusieurs éléments comme arguments, ajoute les éléments à la fin du tableau et renvoie la longueur du tableau modifié.

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]

'populaire()'

La méthode 'pop' ne prend aucun argument, supprime le dernier élément du tableau et renvoie l'élément supprimé.

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

'unshift()'

La méthode 'unshift' prend un ou plusieurs éléments comme arguments, ajoute les éléments au début du tableau et renvoie la longueur du tableau modifié.

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]

'changement()'

La méthode 'shift' ne prend aucun argument, supprime le premier élément d'un tableau et renvoie l'élément supprimé.

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'tranche()'

La méthode 'slice' prend deux arguments facultatifs (startIndex, endIndex) et renvoie un nouveau tableau avec les éléments de startIndex jusqu'à, mais sans inclure, l'endIndex du tableau d'origine.
Si startIndex est omis, 0 est utilisé.
Si endIndex est omis, la longueur du tableau est utilisée. Les nombres d'index négatifs peuvent être utilisés pour compter à rebours à partir de la fin du tableau.

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'épissure()'

La méthode 'splice' prend un ou plusieurs arguments (startIndex, deleteCount, element1, element2, ...) et renvoie un nouveau tableau contenant tous les éléments supprimés. À partir du startIndex, le nombre d'éléments deleteCount est supprimé et les arguments d'élément suivants seront ajoutés au tableau en commençant par le startIndex. Si deleteCount est omis, tous les éléments de startIndex jusqu'à la fin du tableau sont supprimés. Si les arguments de l'élément sont omis, aucun élément n'est ajouté.

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]

Étant donné que 'push', 'pop', 'unshift', 'shift et 'splice' modifient le tableau d'origine, ils sont classés comme méthodes destructrices. La méthode « slice » laisse le tableau d'origine intact, il est donc classé comme non destructif.

Opérateur de propagation '...'

Pour ajouter des éléments ou copier un tableau de manière non destructive, l'opérateur spread peut être utilisé. L'opérateur spread répartit un tableau en ses éléments.

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]

Sans l'opérateur de propagation, le tableau d'origine serait imbriqué dans le nouveau tableau.

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];

Méthodes de tableaux itératifs

Les méthodes de tableau itératives appellent une fonction fournie sur chaque élément d'un tableau et renvoient une valeur ou un nouveau tableau. La fonction fournie est appelée avec trois arguments : l'élément actuel, l'index de l'élément actuel et le tableau d'origine sur lequel la méthode a été appelée.

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}

Quelques exemples de méthodes de tableau itératives sont : 'find', 'filter', 'map' et 'reduce'.

'trouver()'

La méthode 'find' prend une fonction comme argument et renvoie le premier élément du tableau qui satisfait aux conditions de la fonction.

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;

'filtre()'

La méthode 'filter' est similaire à la méthode 'find', mais renvoie à la place un tableau de tous les éléments qui satisfont aux conditions de la fonction donnée.

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];

'carte()'

La méthode 'map' renvoie un nouveau tableau avec les résultats de l'appel de la fonction sur chaque élément du tableau d'origine.

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]

'réduire()'

La méthode 'reduce' prend une fonction et une valeur initiale comme argument. La fonction fournie reçoit quatre arguments : l'accumulateur, la valeur actuelle, l'index actuel et le tableau d'origine. La valeur initiale fournie est la valeur de l'accumulateur pour le premier élément du tableau. Le résultat de la fonction pour chaque élément est utilisé comme valeur de l'accumulateur pour l'élément suivant du tableau. Si aucune valeur initiale n'est fournie, l'accumulateur est défini sur le premier élément du tableau et la fonction de rappel est appelée à partir du deuxième élément.

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc   number), 0);
// returns 15