Un guide pour maîtriser les tableaux JavaScript

Les tableaux sont l'une des structures de données les plus couramment utilisées en JavaScript. Ils vous permettent de stocker plusieurs valeurs dans une seule variable et sont dotés d'un riche ensemble de fonctions intégrées qui rendent la manipulation et l'utilisation des données simples et efficaces. Dans cet article, nous explorerons en détail les fonctions de tableau JavaScript, en fournissant des explications, des exemples et des commentaires pour vous aider à les maîtriser.

Introduction aux tableaux en JavaScript

Un tableau est une collection ordonnée d'éléments pouvant contenir différents types de données, notamment des nombres, des chaînes, des objets et même d'autres tableaux.

let fruits = ["Apple", "Banana", "Cherry"];
let numbers = [1, 2, 3, 4, 5];
let mixed = [1, "Apple", true, {name: "John"}, [1, 2, 3]];

Création de tableaux

Les tableaux peuvent être créés à l'aide de littéraux de tableau ou du constructeur Array.

let arr1 = [1, 2, 3];
let arr2 = new Array(1, 2, 3);
console.log(arr1); // Output: [1, 2, 3]
console.log(arr2); // Output: [1, 2, 3]

Propriétés du tableau

• length : renvoie le nombre d'éléments dans un tableau.

let arr = [1, 2, 3, 4, 5];
console.log(arr.length); // Output: 5

Méthodes de tableau

1. pousser()

Ajoute un ou plusieurs éléments à la fin d'un tableau et renvoie la nouvelle longueur.

let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // Output: [1, 2, 3, 4]

2. pop()

Supprime le dernier élément d'un tableau et renvoie cet élément.

let arr = [1, 2, 3];
let last = arr.pop();
console.log(arr); // Output: [1, 2, 3]
console.log(last); // Output: 3

3. décalage()

Supprime le premier élément d'un tableau et renvoie cet élément.

let arr = [1, 2, 3];
let first = arr.shift();
console.log(arr); // Output: [2, 3]
console.log(first); // Output: 1

4. décaler()

Ajoute un ou plusieurs éléments au début d'un tableau et renvoie la nouvelle longueur.

let arr = [2, 3];
arr.unshift(1);
console.log(arr); // Output: [1, 2, 3]

5. concaténer()

Fusionne deux tableaux ou plus et renvoie un nouveau tableau.

let arr1 = [1, 2];
let arr2 = [3, 4];
let merged = arr1.concat(arr2);
console.log(merged); // Output: [1, 2, 3, 4]

6. rejoindre()

Joint tous les éléments d'un tableau dans une chaîne.

let arr = [1, 2, 3];
let str = arr.join("-");
console.log(str); // Output: "1-2-3"

7. inverse()

Inverse l'ordre des éléments dans un tableau.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // Output: [3, 2, 1]

8. tranche()

Renvoie une copie superficielle d'une partie d'un tableau dans un nouvel objet tableau.

let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 3);
console.log(sliced); // Output: [2, 3]

9. épissure()

Modifie le contenu d'un tableau en supprimant, remplaçant ou ajoutant des éléments.

let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // Output: [1, "a", "b", 4, 5]

10. trier()

Trie les éléments d'un tableau sur place et renvoie le tableau trié.

let arr = [3, 1, 4, 1, 5, 9];
arr.sort((a, b) => a - b);
console.log(arr); // Output: [1, 1, 3, 4, 5, 9]

11. filtre()

Crée un nouveau tableau avec tous les éléments qui réussissent le test implémenté par la fonction fournie.

let arr = [1, 2, 3, 4, 5];
let filtered = arr.filter(x => x > 2);
console.log(filtered); // Output: [3, 4, 5]

12. carte()

Crée un nouveau tableau avec les résultats de l'appel d'une fonction fournie sur chaque élément du tableau appelant.

let arr = [1, 2, 3];
let mapped = arr.map(x => x * 2);
console.log(mapped); // Output: [2, 4, 6]

13. réduire()

Applique une fonction à un accumulateur et à chaque élément du tableau pour le réduire à une seule valeur.

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 10

14. trouver()

Renvoie la valeur du premier élément du tableau qui satisfait à la fonction de test fournie.

let arr = [1, 2, 3, 4, 5];
let found = arr.find(x => x > 3);
console.log(found); // Output: 4

15. findIndex()

Renvoie l'index du premier élément du tableau qui satisfait à la fonction de test fournie.

let arr = [1, 2, 3, 4, 5];
let index = arr.findIndex(x => x > 3);
console.log(index); // Output: 3

16. chaque()

Teste si tous les éléments du tableau réussissent le test implémenté par la fonction fournie.

let arr = [1, 2, 3, 4, 5];
let allBelowTen = arr.every(x => x < 10);
console.log(allBelowTen); // Output: true

17. certains()

Teste si au moins un élément du tableau réussit le test implémenté par la fonction fournie.

let arr = [1, 2, 3, 4, 5];
let anyAboveThree = arr.some(x => x > 3);
console.log(anyAboveThree); // Output: true

18. inclut()

Détermine si un tableau inclut une certaine valeur parmi ses entrées.

let arr = [1, 2, 3, 4, 5];
let hasThree = arr.includes(3);
console.log(hasThree); // Output: true

19. indexDe()

Renvoie le premier index auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.

let arr = [1, 2, 3, 4, 5];
let index = arr.indexOf(3);
console.log(index); // Output: 2

20. dernierIndexOf()

Renvoie le dernier index auquel un élément donné peut être trouvé dans le tableau, ou -1 s'il n'est pas présent.

let arr = [1, 2, 3, 4, 5, 3];
let index = arr.lastIndexOf(3);
console.log(index); // Output: 5

21. plat()

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.

let arr = [1, [2, [3, [4]]]];
let flattened = arr.flat(2);
console.log(flattened); // Output: [1, 2, 3, [4]]

22. flatMap()

Mappe d'abord chaque élément à l'aide d'une fonction de mappage, puis aplatit le résultat dans un nouveau tableau.

let arr = [1, 2, 3];
let flatMapped = arr.flatMap(x => [x, x * 2]);
console.log(flatMapped); // Output: [1, 2, 2, 4, 3, 6]

23. de()

Crée une nouvelle instance de tableau copiée superficiellement à partir d'un objet de type tableau ou itérable.

let str = "Hello";
let arr = Array.from(str);
console.log(arr); // Output: ["H", "e", "l", "l", "o"]

24. estArray()

Détermine si la valeur transmise est un tableau.

console.log(Array.isArray([1, 2, 3])); // Output: true
console.log(Array.isArray("Hello")); // Output: false

25. de()

Crée un

nouvelle instance de Array avec un nombre variable d'arguments, quel que soit le nombre ou le type des arguments.

let arr = Array.of(1, 2, 3);
console.log(arr); // Output: [1, 2, 3]

Practical Examples

Example 1: Removing Duplicates from an Array

let arr = [1, 2, 3, 3, 4, 4, 5];
let unique = [...new Set(arr)];
console.log(unique); // Output: [1, 2, 3, 4, 5]

Example 2: Summing All Values in an Array

let arr = [1, 2, 3, 4, 5];
let sum = arr.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // Output: 15

Example 3: Flattening a Deeply Nested Array

let arr = [1, [2, [3, [4, [5]]]]];
let flattened = arr.flat(Infinity);
console.log(flattened); // Output: [1, 2, 3, 4, 5]

Example 4: Finding the Maximum Value in an Array

let arr = [1, 2, 3, 4, 5];
let max = Math.max(...arr);
console.log(max); // Output: 5

Example 5: Creating an Array of Key-Value Pairs

let obj = { a: 1, b: 2, c: 3 };
let entries = Object.entries(obj);
console.log(entries); // Output: [["a", 1], ["b", 2], ["c", 3]]

Conclusion

Arrays are an essential part of JavaScript, providing a powerful way to manage collections of data. By mastering array functions, you can perform complex data manipulations with ease and write more efficient and readable code. This comprehensive guide has covered the most important array functions in JavaScript, complete with detailed examples and explanations. Practice using these functions and experiment with different use cases to deepen your understanding and enhance your coding skills.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!