Tutorial

Comment utiliser .map() pour Iterate via Array Items dans JavaScript

Published on October 22, 2020
author

William Imoh

Français
Comment utiliser .map() pour Iterate via Array Items dans JavaScript

Introduction

De la forloop classique à la méthode forEach(), diverses techniques et méthodes sont utilisées pour itérer à travers des ensembles de données en JavaScript. L’une des méthodes les plus populaires est la méthode .map(). .map() crée un tableau à partir de l’appel d’une fonction spécifique sur chaque élément du tableau parent. .map() est une méthode non mutante qui crée un nouveau tableau par opposition aux méthodes mutantes, qui ne font que modifier le tableau appelant.

Cette méthode peut avoir de nombreux usages lorsqu’on travaille avec des tableaux. Dans ce tutoriel, nous examinerons quatre utilisations importantes de .map() en JavaScript : appel d’une fonction d’éléments de tableau, conversion de chaînes de caractères en tableaux, rendu de listes dans des bibliothèques JavaScript et reformatage d’objets de tableau.

Conditions préalables

Ce tutoriel ne nécessite aucun codage, mais si vous souhaitez suivre les exemples, vous pouvez soit utiliser le Node.js REPL, soit recourir à des outils de développement de navigateur.

Étape 1 - Appeler une fonction sur chaque élément d’un tableauélément

.map() accepte une fonction de rappel comme l’un de ses arguments, et un paramètre important de cette fonction est la valeur actuelle de l’élément traité par la fonction.  Il s’agit d’un paramètre obligatoire. Avec ce paramètre, vous pouvez modifier chaque élément d’un tableau et créer une nouvelle fonction.

Voici un exemple :

const sweetArray = [2, 3, 4, 5, 35]
const sweeterArray = sweetArray.map(sweetItem => {
    return sweetItem * 2
})

console.log(sweeterArray)

Cette sortie est enregistrée sur la console :

Output
[ 4, 6, 8, 10, 70 ]

Il est possible de la simplifier encore un peu pour la rendre plus claire :

// create a function to use
const makeSweeter = sweetItem => sweetItem * 2;

// we have an array
const sweetArray = [2, 3, 4, 5, 35];

// call the function we made. more readable
const sweeterArray = sweetArray.map(makeSweeter);

console.log(sweeterArray);

La même sortie est enregistrée sur la console :

Output
[ 4, 6, 8, 10, 70 ]

Avoir un code comme sweetArray.map(makeSweeter) rend votre code un peu plus lisible.

Étape 2 - Convertir une chaîne de caractères en un tableau

.map() est connu pour faire partie du prototype de tableau. Dans cette étape, vous l’utiliserez pour convertir une chaîne de caractères en un tableau.  Vous ne développez pas ici la méthode afin qu’elle fonctionne pour des chaînes de caractères. Au contraire, vous utiliserez la méthode spéciale .call()

Tout ce qui est en JavaScript est un objet, et les méthodes sont des fonctions attachées à ces objets. .call() vous permet d’utiliser le contexte d’un objet sur un autre. Par conséquent, vous copieriez le contexte de .map() dans un tableau sur une chaîne.de caractères.

.call() peut être des arguments transmis du contexte à utiliser et des paramètres pour les arguments de la fonction d’origine.

Voici un exemple :

const name = "Sammy"
const map = Array.prototype.map

const newName = map.call(name, eachLetter => {
    return `${eachLetter}a`
})

console.log(newName)

Cette sortie est enregistrée sur la console :

  1. Output
    [ "Sa", "aa", "ma", "ma", "ya" ]

Ici, vous avez utilisé le contexte de .map() sur une chaîne de caractères et passé un argument de la fonction que .map() attend.

Elle fonctionne comme la méthode .split() d’une chaîne, à la différence près que chaque caractère de la chaîne peut être modifié avant d’être renvoyé dans un tableau.

Étape 3 - Rendu des listes dans la bibliothèque JavaScript

Les bibliothèques JavaScript comme React utilisent .map() pour rendre les éléments en une liste. Cela nécessite toutefois une syntaxe JSX, car la méthode .map() est enveloppée dans la syntaxe JSX.

Voici un exemple d’une composante React :

import React from "react";
import ReactDOM from "react-dom";

const names = ["whale", "squid", "turtle", "coral", "starfish"];

const NamesList = () => (
  <div>
    <ul>{names.map(name => <li key={name}> {name} </li>)}</ul>
  </div>
);

const rootElement = document.getElementById("root");
ReactDOM.render(<NamesList />, rootElement);

Il s’agit d’un élément apatride dans React qui rend une div avec une liste.  Les différents éléments de la liste sont rendus à l’aide de .map() pour itérer sur le tableau de noms initialement créé. Ce composant est rendu à l’aide de ReactDOM sur l’élément DOM avec Id of root.

Étape 4 - Reformater les objets de tableau

.map() peut être utilisé pour itérer à travers des objets dans un tableau et, de manière similaire aux tableaux traditionnels, modifier le contenu de chaque objet individuel et renvoyer un nouveau tableau.  Cette modification est effectuée en fonction de ce qui est renvoyé dans la fonction de rappel.

Voici un exemple :

const myUsers = [
    { name: 'shark', likes: 'ocean' },
    { name: 'turtle', likes: 'pond' },
    { name: 'otter', likes: 'fish biscuits' }
]

const usersByLikes = myUsers.map(item => {
    const container = {};

    container[item.name] = item.likes;
    container.age = item.name.length * 10;

    return container;
})

console.log(usersByLikes);

Cette sortie est enregistrée sur la console :

Output
[ {shark: "ocean", age: 50}, {turtle: "pond", age: 60}, {otter: "fish biscuits", age: 50} ]

Ici, vous avez modifié chaque objet du tableau en utilisant la notation par parenthèses et points. Ce cas d’utilisation peut être utilisé pour traiter ou condenser les données reçues avant qu’elles ne soient sauvegardées ou analysées sur une application frontale.

Conclusion

Dans ce tutoriel, nous avons examiné quatre utilisations de la méthode .map() en JavaScript. En combinaison avec d’autres méthodes, la fonctionnalité de .map() peut être étendue. Pour plus d’informations, consultez notre article Comment utiliser les méthodes de tableau en JavaScript : Méthodes d’itération.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
William Imoh

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more