Les tableaux sont l'une des structures de données les plus fondamentales de JavaScript. Avec un tableau, vous pouvez stocker plusieurs valeurs dans une seule variable. JavaScript fournit de nombreuses méthodes intégrées pour manipuler les tableaux, ce qui les rend incroyablement polyvalents. Dans cet article, nous explorerons toutes les méthodes de tableau intégrées et comment les utiliser efficacement dans vos projets JavaScript.

Méthodes de base

pourChaque()

La méthode forEach() vous permet de parcourir un tableau et d'exécuter une fonction fournie une fois pour chaque élément du tableau. C'est un moyen simple de parcourir un tableau.

const array = [1, 2, 3, 4, 5];

array.forEach((element) => {
  console.log(element);
});

carte()

La méthode map() crée un nouveau tableau rempli avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau. Il est généralement utilisé pour transformer des données.

const array = [1, 2, 3, 4, 5];

const doubled = array.map((element) => element * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

filtre()

La méthode filter() crée un nouveau tableau avec tous les éléments qui réussissent le test implémenté par la fonction fournie. C'est utile lorsque vous devez filtrer certains éléments d'un tableau en fonction d'une condition.

const array = [1, 2, 3, 4, 5];

const evenNumbers = array.filter((element) => element % 2 === 0);

console.log(evenNumbers); // [2, 4]

réduire()

La méthode réduire() exécute une fonction de réduction sur chaque élément du tableau, ce qui donne une valeur de sortie unique. Il est souvent utilisé pour additionner des valeurs, accumuler des totaux ou fusionner des tableaux en une seule valeur.

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentValue) => accumulator   currentValue, 0);

console.log(sum); // 15

trouver()

La méthode find() renvoie la valeur du premier élément du tableau qui satisfait à la fonction de test fournie. Il s'arrête après avoir trouvé la première correspondance.

const array = [1, 2, 3, 4, 5];

const found = array.find((element) => element > 3);

console.log(found); // 4

trouverIndex()

La méthode findIndex() renvoie l'index du premier élément du tableau qui satisfait à la fonction de test fournie. Si aucun élément ne satisfait à la fonction de test, il renvoie -1.

const array = [1, 2, 3, 4, 5];

const index = array.findIndex((element) => element > 3);

console.log(index); // 3

trier()

La méthode sort() trie les éléments d'un tableau sur place et renvoie le tableau trié. Il est couramment utilisé pour trier les chaînes et les nombres, mais il peut nécessiter une fonction de comparaison pour trier correctement les nombres.

const array = [5, 3, 8, 1, 2];

const sortedArray = array.sort((a, b) => a - b);

console.log(sortedArray); // [1, 2, 3, 5, 8]

inverse()

La méthode reverse() inverse les éléments d'un tableau en place. Le premier élément du tableau devient le dernier et le dernier devient le premier.

const array = [1, 2, 3, 4, 5];

const reversedArray = array.reverse();

console.log(reversedArray); // [5, 4, 3, 2, 1]

concaténer()

La méthode concat() est utilisée pour fusionner deux ou plusieurs tableaux. Il renvoie un nouveau tableau, laissant les tableaux d'origine inchangés.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const concatenatedArray = array1.concat(array2);

console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]

tranche()

La méthode slice() renvoie une copie superficielle d'une partie d'un tableau dans un nouvel objet tableau sélectionné du début à la fin (fin non incluse).

const array = [1, 2, 3, 4, 5];

const slicedArray = array.slice(1, 4);

console.log(slicedArray); // [2, 3, 4]

épissure()

La méthode splice() modifie le contenu d'un tableau en supprimant, remplaçant ou ajoutant des éléments.

const array = [1, 2, 3, 4, 5];

array.splice(2, 1, 6, 7);

console.log(array); // [1, 2, 6, 7, 4, 5]

pousser()

La méthode push() ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur du tableau.

const array = [1, 2, 3];

array.push(4, 5);

console.log(array); // [1, 2, 3, 4, 5]

populaire()

La méthode pop() supprime le dernier élément d'un tableau et renvoie cet élément.

const array = [1, 2, 3, 4, 5];

const lastElement = array.pop();

console.log(lastElement); // 5
console.log(array); // [1, 2, 3, 4]

changement()

La méthode shift() supprime le premier élément d'un tableau et renvoie cet élément.

const array = [1, 2, 3, 4, 5];

const firstElement = array.shift();

console.log(firstElement); // 1
console.log(array); // [2, 3, 4, 5]

décaler()

La méthode unshift() ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur du tableau.

const array = [2, 3, 4, 5];

array.unshift(1);

console.log(array); // [1, 2, 3, 4, 5]

rejoindre()

La méthode join() crée et renvoie une nouvelle chaîne en concaténant tous les éléments d'un tableau, séparés par des virgules ou une chaîne de séparation spécifiée.

const array = [1, 2, 3, 4, 5];

const joinedString = array.join('-');

console.log(joinedString); // "1-2-3-4-5"

Méthodes supplémentaires

chaque()

La méthode Every() teste si tous les éléments du tableau réussissent la fonction de test fournie.

const array = [2, 4, 6, 8];

const allEven = array.every((element) => element % 2 === 0);

console.log(allEven); // true

quelques()

La méthode some() teste si au moins un élément du tableau réussit la fonction de test fournie.

const array = [1, 2, 3, 4, 5];

const hasEven = array.some((element) => element % 2 === 0);

console.log(hasEven); // true

plat()

La méthode flat() crée un nouveau tableau avec tous les éléments du sous-tableau concaténés de manière récursive jusqu'à la profondeur spécifiée.

const array = [1, [2, [3, [4]]]];

const flattenedArray = array.flat(2);

console.log(flattenedArray); // [1, 2, 3, [4]]

flatMap()

La méthode flatMap() mappe d'abord chaque élément à l'aide d'une fonction de mappage, puis aplatit le résultat dans un nouveau tableau. C'est une combinaison de map() et flat().

const array = [1, 2, 3, 4];

const flattened = array.flatMap((num) => [num, num * 2]);

console.log(flattened); // [1, 2, 2, 4, 3, 6, 4, 8]

remplir()

La méthode fill() remplit tous les éléments d'un tableau avec une valeur statique d'un index de début à un index de fin.

const array = [1, 2, 3, 4, 5];

array.fill(0, 2, 4);

console.log(array); // [1, 2, 0, 0, 5]

copierDans()

La méthode copyWithin() copie superficiellement une partie d'un tableau vers un autre emplacement du même tableau sans modifier sa longueur.

const array = [1, 2, 3, 4, 5];

array.copyWithin(0, 3, 5);

console.log(array); // [4, 5, 3, 4, 5]

inclut()

La méthode include() vérifie si un tableau contient une certaine valeur.

const array = [1, 2, 3, 4, 5];

const hasThree =

 array.includes(3);

console.log(hasThree); // true

àChaîne()

La méthode toString() convertit un tableau en chaîne, séparé par des virgules.

const array = [1, 2, 3, 4, 5];

const arrayString = array.toString();

console.log(arrayString); // "1,2,3,4,5"

indexDe()

La méthode indexOf() renvoie le premier index auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.

const array = [1, 2, 3, 4, 5];

const index = array.indexOf(3);

console.log(index); // 2

dernierIndexOf()

La méthode lastIndexOf() renvoie le dernier index auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.

const array = [1, 2, 3, 4, 3, 5];

const lastIndex = array.lastIndexOf(3);

console.log(lastIndex); // 4

depuis()

La méthode Array.from() crée une nouvelle instance de tableau à partir d'un objet de type tableau ou itérable.

const array = Array.from('hello');

console.log(array); // ['h', 'e', 'l', 'l', 'o']

estArray()

La méthode Array.isArray() vérifie si la valeur transmise est un tableau.

const array = [1, 2, 3, 4, 5];
const notArray = { a: 1, b: 2 };

console.log(Array.isArray(array)); // true
console.log(Array.isArray(notArray)); // false

de()

La méthode Array.of() crée une nouvelle instance de tableau avec un nombre variable d'éléments.

const array1 = Array.of(1, 2, 3);
const array2 = Array.of('a', 'b', 'c');

console.log(array1); // [1, 2, 3]
console.log(array2); // ['a', 'b', 'c']

Conclusion

Les tableaux JavaScript sont livrés avec un large éventail de méthodes intégrées qui permettent une manipulation puissante des données. Comprendre ces méthodes vous rendra plus efficace dans l’écriture de code propre et concis. Prenez le temps d'expérimenter ces méthodes et voyez comment elles peuvent améliorer votre code.
Publié à l'origine : Guide des méthodes de tableau JavaScript