Maison  >  Article  >  interface Web  >  fonction map en JavaScript : comment créer un nouveau tableau ?

fonction map en JavaScript : comment créer un nouveau tableau ?

WBOY
WBOYoriginal
2023-11-18 12:14:051673parcourir

fonction map en JavaScript : comment créer un nouveau tableau ?

fonction map en JavaScript : comment créer un nouveau tableau ?

Introduction : En JavaScript, le tableau est une structure de données très couramment utilisée. Elle fournit de nombreuses méthodes intégrées pour exploiter et traiter les tableaux. Parmi elles, la fonction map est une méthode très utile. Elle peut traiter chaque élément du tableau selon des règles spécifiées et créer un nouveau tableau. Cet article présentera la fonction map en JavaScript, comment l'utiliser et quelques exemples de code pratiques.

1. Qu'est-ce que la fonction carte ?

En JavaScript, la fonction map est une méthode intégrée d'un tableau. Elle est utilisée pour traiter chaque élément du tableau et renvoyer le résultat traité sous la forme d'un nouveau tableau. En termes simples, la fonction map boucle sur un tableau, applique une fonction de traitement à chaque élément et forme un nouveau tableau avec la valeur de retour de la fonction.

2. Comment utiliser la fonction map pour créer un nouveau tableau ?

Créer un nouveau tableau à l'aide de la fonction map est très simple, suivez simplement les étapes ci-dessous :

Étape 1 : Préparer un tableau
Tout d'abord, nous devons préparer un tableau comme tableau cible de la fonction map. Ce tableau peut contenir des éléments de tout type, tels que des nombres, des chaînes, des objets, etc.

const numbers = [1, 2, 3, 4, 5];

Étape 2 : Définir une fonction de traitement
Ensuite, nous devons définir une fonction de traitement pour traiter chaque élément du tableau. Cette fonction peut être une fonction prédéfinie ou une fonction anonyme.

function double(number) {
  return number * 2;
}

或

const double = function(number) {
  return number * 2;
};

Étape 3 : Utilisez la fonction map pour traiter le tableau
Enfin, nous utilisons la fonction map pour traiter le tableau et enregistrer les résultats traités dans un nouveau tableau.

const doubledNumbers = numbers.map(double);

De cette façon, nous avons réussi à créer un nouveau tableau doubléNumbers, dans lequel chaque élément est le résultat de la multiplication des éléments du tableau d'origine par 2.

3. Exemples de code réels

Ci-dessous, nous démontrerons l'utilisation de la fonction map à travers quelques exemples de code réels.

  1. Convertir une chaîne d'un tableau en lettres majuscules :
const strings = ['apple', 'banana', 'orange'];
const uppercaseStrings = strings.map(function(string) {
  return string.toUpperCase();
});

console.log(uppercaseStrings);
// 输出:['APPLE', 'BANANA', 'ORANGE']
  1. Mettre au carré un nombre dans un tableau :
const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
  return number ** 2;
});

console.log(squaredNumbers);
// 输出:[1, 4, 9, 16, 25]
  1. Extraire une propriété d'objet d'un tableau :
const books = [
  { title: 'JavaScript高级程序设计', author: 'Nicholas C. Zakas' },
  { title: 'JavaScript权威指南', author: 'David Flanagan' },
  { title: 'JavaScript设计模式', author: 'Addy Osmani' }
];
const titles = books.map(function(book) {
  return book.title;
});

console.log(titles);
// 输出:['JavaScript高级程序设计', 'JavaScript权威指南', 'JavaScript设计模式']

Résumé : En JavaScript, la fonction map est une méthode très utile qui permet de traiter chaque élément d'un tableau et de créer un nouveau tableau selon des règles spécifiées. Utiliser la fonction map pour créer un nouveau tableau est très simple. Il vous suffit de préparer un tableau cible, de définir une fonction de traitement et d'utiliser la fonction map pour le traiter. Dans les applications pratiques, la fonction map peut grandement simplifier l'écriture de code et améliorer l'efficacité du développement. Pour résumer, maîtriser l’utilisation de la fonction map est une compétence très importante pour le développement 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!

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