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é.

<code class="language-javascript">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']</code>

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.

<code class="language-javascript">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 }]</code>

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.

<code class="language-javascript">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</code>

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

<code class="language-javascript">[1, 2, 3].forEach(n => console.log(n));
['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));</code>

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.

<code class="language-javascript">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</code>

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.

<code class="language-javascript">const fruits = ['apple', 'banana', 'cherry'];
const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1
const userIndex = users2.findIndex(u => u.id === 2); // 1</code>

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.

<code class="language-javascript">const hasEven = [1, 2, 3].some(n => n % 2 === 0); // true
const hasExpensive = products.some(p => p.price > 15); // true</code>

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.

<code class="language-javascript">const allPositive = [1, 2, 3].every(n => n > 0); // true</code>

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

<code class="language-javascript">const numbers2 = [1, 2, 3];
const hasTwo = numbers2.includes(2); // true
const hasZero = numbers2.includes(0); // false</code>

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.

<code class="language-javascript">const colors = ['red', 'blue', 'green'];
const blueIndex = colors.indexOf('blue'); // 1
const yellowIndex = colors.indexOf('yellow'); // -1</code>

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

<code class="language-javascript">const arr = [1, 2, 3, 4, 5];
const middle = arr.slice(1, 4); // [2, 3, 4]
const last = arr.slice(-2); // [4, 5]</code>

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.

<code class="language-javascript">const months = ['Jan', 'March', 'April'];
months.splice(1, 0, 'Feb'); // ['Jan', 'Feb', 'March', 'April']
months.splice(2, 1); // ['Jan', 'Feb', 'April']</code>

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.

<code class="language-javascript">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']</code>

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).

<code class="language-javascript">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 }]</code>

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!