les méthodes de tableau les plus populaires en JavaScript que vous ne voulez pas manquer !

Ce guide explore quatorze méthodes de tableau JavaScript indispensables. Nous décrirons chaque méthode et illustrerons son utilisation avec des exemples.

1. map() : Transforme chaque élément du tableau et renvoie un nouveau tableau avec les résultats. Le tableau d'origine reste inchangé.

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']

2. filter() : Crée un nouveau tableau contenant uniquement les éléments qui réussissent une fonction de test fournie. Le tableau d'origine est intact.

const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]

3. reduce() : applique une fonction de manière cumulative aux éléments du tableau pour les réduire à une seule valeur. Considérez-le comme une combinaison itérative d'éléments.

const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0); // 6
const cart = [{ price: 10 }, { price: 20 }];
const total = cart.reduce((sum, item) => sum + item.price, 0); // 30

4. forEach() : Exécute une fonction fournie une fois pour chaque élément du tableau. Il ne renvoie pas de valeur (renvoie undefined).

[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));

5. find() : renvoie le premier élément qui satisfait à une fonction de test fournie. Si aucun élément ne satisfait à la condition, il renvoie undefined.

const users2 = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
const john = users2.find(user => user.name === 'John'); // { id: 1, name: 'John' }
const nums2 = [1, 2, 3, 4];
const firstEven = nums2.find(n => n % 2 === 0); // 2

6. findIndex() : renvoie l'index du premier élément qui satisfait une fonction de test fournie. Renvoie -1 si aucun élément ne satisfait à la condition.

const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1

7. some() : Teste si au moins un élément du tableau réussit le test implémenté par la fonction fournie. Renvoie true si au moins un élément réussit, sinon false.

const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true

8. every() : Teste si tous les éléments du tableau réussissent le test implémenté par la fonction fournie. Renvoie true uniquement si tous les éléments réussissent, sinon false.

const allPositive = [1, 2, 3].every(n => n > 0); // true

9. includes() : Détermine si un tableau inclut une certaine valeur parmi ses entrées, renvoyant true ou false selon le cas.

const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false

10. 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 colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1

11. slice() : Extrait une section d'un tableau et la renvoie sous la forme d'un nouveau tableau, sans modifier l'original.

const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]

12. splice() : Modifie le contenu d'un tableau en supprimant ou en remplaçant des éléments existants et/ou en ajoutant de nouveaux éléments en place. Modifie le tableau d'origine.

const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']

13. sort() : Trie les éléments d'un tableau en place. Par défaut, il trie sous forme de chaînes ; pour le tri numérique, une fonction de comparaison est nécessaire.

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); // [2, 4, 6]
const users = [{ name: 'John' }, { name: 'Jane' }];
const names = users.map(user => user.name); // ['John', 'Jane']

14. join() : Crée et renvoie une nouvelle chaîne en concaténant tous les éléments d'un tableau (séparés par une chaîne de séparation spécifiée).

const nums = [1, 2, 3, 4, 5, 6];
const evenNums = nums.filter(n => n % 2 === 0); // [2, 4, 6]
const products = [{ price: 10 }, { price: 20 }];
const expensive = products.filter(p => p.price > 15); // [{ price: 20 }]

La maîtrise de ces méthodes améliore considérablement vos capacités de manipulation de tableaux JavaScript.

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!