Maison >interface Web >js tutoriel >il faut connaître les méthodes de tableau JavaScript

il faut connaître les méthodes de tableau JavaScript

Linda Hamilton
Linda Hamiltonoriginal
2025-01-23 04:29:09520parcourir

ust Know JavaScript Array Methods

Ce guide explore six méthodes fondamentales de tableau JavaScript : filter, map, reduce, some, every et includes. Les maîtriser améliorera considérablement vos compétences en programmation JavaScript.

1. filter()Méthode :

La méthode filter() crée un nouveau tableau contenant uniquement des éléments satisfaisant une condition spécifiée. Les éléments ne remplissant pas la condition sont omis.

Comment ça marche :

  • Parcourt chaque élément du tableau.
  • Applique une fonction de rappel à chaque élément.
  • Si le rappel renvoie true, l'élément est inclus dans le nouveau tableau ; sinon, c'est exclu.
<code class="language-javascript">let boxers = [
    { name: "Tyson Fury", weight: 280 },
    { name: "Mairis Briedis", weight: 199 },
    { name: "Artur Beterbiev", weight: 175 },
    { name: "Jermall Charlo", weight: 160 },
    { name: "Terence Crawford", weight: 146 }
];

// Filter boxers weighing over 170 pounds
let heavyweights = boxers.filter(boxer => boxer.weight > 170);

console.log(heavyweights);</code>

Sortie :

<code class="language-javascript">[
    { name: "Tyson Fury", weight: 280 },
    { name: "Mairis Briedis", weight: 199 },
    { name: "Artur Beterbiev", weight: 175 }
]</code>

2. map()Méthode :

La méthode map() transforme chaque élément d'un tableau et renvoie un nouveau tableau avec les éléments transformés.

Comment ça marche :

  • Parcourt chaque élément du tableau.
  • Applique une fonction de rappel à chaque élément.
  • La valeur de retour du rappel remplace l'élément d'origine dans le nouveau tableau.
<code class="language-javascript">let decimalNumbers = [222, 354, 4684, 123, 5];

// Convert decimal numbers to hexadecimal
let hexNumbers = decimalNumbers.map(num => num.toString(16));

console.log(hexNumbers);</code>

3. reduce()Méthode :

La méthode reduce() applique de manière itérative une fonction de rappel à chaque élément, accumulant une seule valeur de résultat.

Comment ça marche :

  • Parcourt le tableau.
  • Applique le rappel à un accumulateur et à l'élément actuel.
  • Le résultat du rappel devient la nouvelle valeur de l'accumulateur.
  • La valeur finale de l'accumulateur est renvoyée.
<code class="language-javascript">let numbers = [1, 2, 3, 4, 5];

// Calculate the sum of all numbers
let sum = numbers.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); // Output: 15</code>

4. some()Méthode :

La méthode some() vérifie si au moins un élément satisfait une condition donnée. Il renvoie true si une correspondance est trouvée, false sinon.

Comment ça marche :

  • Parcourt le tableau.
  • S'arrête et revient true immédiatement après avoir trouvé un élément satisfaisant la condition.
  • Renvoie false si aucun élément ne satisfait à la condition.
<code class="language-javascript">let ages = [16, 20, 14, 18];

// Check if at least one person is an adult (≥ 18)
let hasAdult = ages.some(age => age >= 18);

console.log(hasAdult); // Output: true</code>

5. every()Méthode :

La méthode every() vérifie si tous les éléments satisfont à une condition donnée. Renvoie true uniquement si chaque élément réussit ; sinon, false.

Comment ça marche :

  • Parcourt le tableau.
  • Renvoie false immédiatement si un élément ne remplit pas la condition.
  • Renvoie true uniquement si tous les éléments réussissent.
<code class="language-javascript">let scores = [80, 85, 90, 95];

// Check if all scores are above 75
let allAbove75 = scores.every(score => score > 75);

console.log(allAbove75); // Output: true</code>

6. includes()Méthode :

La méthode includes() vérifie si un tableau contient une valeur spécifique. Renvoie true si trouvé, false sinon.

Comment ça marche :

  • Recherche la valeur en utilisant l'égalité stricte (===).
  • Un index de départ facultatif peut être spécifié.
<code class="language-javascript">let boxers = [
    { name: "Tyson Fury", weight: 280 },
    { name: "Mairis Briedis", weight: 199 },
    { name: "Artur Beterbiev", weight: 175 },
    { name: "Jermall Charlo", weight: 160 },
    { name: "Terence Crawford", weight: 146 }
];

// Filter boxers weighing over 170 pounds
let heavyweights = boxers.filter(boxer => boxer.weight > 170);

console.log(heavyweights);</code>

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Programmation Web tendance enArticle suivant:Programmation Web tendance en