Méthodes JavaScript du tableau: trier, carte, filtre et réduire

Maître la méthode JavaScript Array: tri, cartographie, filtrage et réglementation pour améliorer votre efficacité de développement Web! Cet article traite des méthodes

, sort, map et filter du tableau JavaScript, et fournit des exemples pratiques pour vous aider à vous compétence dans le traitement des données. reduce

1. array.prototype.sort

   Méthode de tri

Les méthodes organisent les éléments du tableau en fonction de l'ordre spécifié. Par défaut, il a trié l'élément de chaîne dans la séquence séquentielle du dictionnaire. Mais grâce à des fonctions de comparaison personnalisées, vous pouvez obtenir une logique de tri plus compliquée.

grammaire sort

: Définissez les fonctions d'ordre de tri. Il reçoit deux paramètres (a, b) et revient:

<code class="language-javascript">array.sort([compareFunction])</code>

Valeur négative: si A doit être classé avant B.

• zéro: si A et B sont égaux. compareFunction
  Valeur positive: si A doit être classé derrière B.
  • Exemple: Triez le nombre dans l'ordre séquentiel
Exemple: Trier par objet de tri d'attribut

<code class="language-javascript">const numbers = [42, 7, 19, 73, 23];

numbers.sort((a, b) => a - b);

console.log(numbers); // 输出：[7, 19, 23, 42, 73]</code>

Les méthodes modifient le tableau d'origine.

Pour les nombres ou le tri complexe, il est nécessaire de fournir une fonction de comparaison pour éviter les accidents.

<code class="language-javascript">const books = [
  { title: 'Book A', year: 2001 },
  { title: 'Book B', year: 1998 },
  { title: 'Book C', year: 2015 }
];

books.sort((a, b) => a.year - b.year);

console.log(books); // 输出：按年份升序排列的书籍数组</code>

• sort
array.prototype.map
• Méthode MAP

2. Les méthodes créent un nouveau tableau en appliquant la fonction fournie à chaque élément du tableau d'origine. Il est souvent utilisé dans la conversion des données.

   grammaire

: Pour les fonctions exécutées par chaque élément, recevez:

élément actuel. map

Index élémentaire.

tableau d'origine.

<code class="language-javascript">array.map(callback(element, index, array))</code>

• callback
  Exemple: convertir le tableau des nombres
  • Exemple: données formatales
  La méthode ne modifiera pas le tableau d'origine et il renvoie un nouveau tableau.

Il est très adapté à la conversion de la structure des données.

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5];

const squares = numbers.map(num => num ** 2);

console.log(squares); // 输出：[1, 4, 9, 16, 25]</code>

array.prototype.filter

<code class="language-javascript">const users = [
  { firstName: 'John', lastName: 'Doe' },
  { firstName: 'Jane', lastName: 'Smith' }
];

const fullNames = users.map(user => `${user.firstName} ${user.lastName}`);

console.log(fullNames); // 输出：['John Doe', 'Jane Smith']</code>

Méthode de filtre

• map
Créez un nouveau tableau, qui ne contient que des éléments qui remplissent les conditions données. Il est souvent utilisé pour extraire des sous-ensembles de données.
grammaire

3. : Déterminez s'il doit contenir une fonction (return true) ou exclure (dos false) des éléments.

   Exemple: filtrez le nombre pair

Exemple: filtrez l'objet en fonction de la condition

filter

Les méthodes ne modifieront pas le tableau d'origine.

<code class="language-javascript">array.filter(callback(element, index, array))</code>

Il s'agit d'un outil puissant pour extraire des données connexes ou nettoyer les tableaux.

• callback

array.prototype.reduce

Méthode de statue

<code class="language-javascript">const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter(num => num % 2 === 0);

console.log(evens); // 输出：[2, 4, 6]</code>

La méthode applique une fonction à chaque élément (de gauche à droite) de l'accumulateur et du tableau, et l'attribue à une seule valeur.

<code class="language-javascript">const products = [
  { name: 'Laptop', price: 1200 },
  { name: 'Phone', price: 800 },
  { name: 'Tablet', price: 500 }
];

const expensiveProducts = products.filter(product => product.price > 700);

console.log(expensiveProducts); // 输出：价格高于700的产品数组</code>

grammaire

<code class="language-javascript">array.sort([compareFunction])</code>

: Pour la fonction de chaque élément, les paramètres sont:
• callback Cumulateur.
  • élément actuel.
  • Index de l'élément actuel.
  • tableau d'origine.
  : La valeur initiale de l'accumulateur (facultatif, mais elle est recommandée).
• initialValue Exemple: Recherche de paix

Exemple: les données de groupe selon les attributs

<code class="language-javascript">const numbers = [42, 7, 19, 73, 23];

numbers.sort((a, b) => a - b);

console.log(numbers); // 输出：[7, 19, 23, 42, 73]</code>

La méthode est très flexible et peut générer un tableau, des objets ou des valeurs uniques.

<code class="language-javascript">const books = [
  { title: 'Book A', year: 2001 },
  { title: 'Book B', year: 1998 },
  { title: 'Book C', year: 2015 }
];

books.sort((a, b) => a.year - b.year);

console.log(books); // 输出：按年份升序排列的书籍数组</code>

Il s'agit d'un outil puissant pour la conversion personnalisée, l'agrégation de données, etc.
• reduce Fournissez toujours la valeur initiale pour obtenir une meilleure prévisibilité.
combinaison de méthodes
• En combinant les méthodes ,
et

, l'efficacité de traitement des données peut être optimisée, en particulier lorsqu'il s'agit de grands ensembles de données, évitez les itérations multiples pour améliorer les performances.

Conclusion

> Les méthodes de JavaScript map, filter, reduce et

sont essentielles pour les opérations de données efficaces et élégantes. Comprendre leurs mécanismes et leurs applications peut aider les développeurs à écrire du code plus concis et plus facile. Pratiquez plus et maîtrisez ces méthodes!

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!