Comment utiliser les cartes JavaScript - .map()

De la boucle for classique à la méthode forEach(), diverses techniques et méthodes sont utilisées pour parcourir 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 en appelant une fonction spécifique sur chaque élément du tableau parent. .carte() est une méthode non mutante qui crée un nouveau tableau js, par opposition à méthodes de mutation, qui modifient uniquement le tableau appelant.

Cette méthode peut avoir de nombreuses utilisations lorsque vous travaillez avec des tableaux. Dans ce didacticiel, vous examinerez quatre utilisations remarquables de .map() en JavaScript : appeler une fonction d'éléments de tableau, convertir des chaînes aux tableaux, au rendu des listes dans les bibliothèques JavaScript et au reformatage objets de tableau.

Comment appeler une fonction JS pour chaque élément d'un tableau

.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 en cours de traitement par la fonction. C'est un paramètre requis. Avec ce paramètre, vous pouvez modifier chaque élément dans un tableau et renvoyez-le en tant que membre modifié de votre nouveau tableau.

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 dans le console :

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

Cela peut être encore simplifié pour le rendre plus propre avec :

// 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 dans le console :

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

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

Comment convertir une chaîne JS en tableau

.map() est connu pour appartenir au prototype du tableau. Dans cette étape, vous l'utiliserez pour convertir une chaîne en tableau. Vous n'êtes pas développer la méthode pour travailler pour les chaînes ici. Vous utiliserez plutôt le Méthode spéciale .call().

Tout 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 vers une chaîne.

.call() peut recevoir des arguments 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 dans la console :

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

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

Cela fonctionne comme la méthode .split() d'une chaîne, sauf que chaque caractère de chaîne individuel peut être modifié avant d'être renvoyé dans un tableau.

Comment rendre Listes dans les bibliothèques JavaScript

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

Voici un exemple de composant 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> {name} </li>)}</ul>
  </div>);const rootElement = document.getElementById("root");ReactDOM.render(<nameslist></nameslist>, rootElement);

Il s'agit d'un composant sans état dans React, qui restitue un div avec une liste. Les éléments de liste individuels sont rendus à l'aide de .map() pour parcourir le tableau de noms. Ce composant est rendu à l'aide de ReactDOM sur l'élément DOM avec l'ID de racine.

Comment reformater des objets de tableau JavaScript

.map() peut être utilisé pour parcourir des objets dans un tableau et, de la même manière que les tableaux traditionnels, modifiez le contenu de chaque objet individuel et renvoie un nouveau tableau. Ce la 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 dans le console :

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

Ici, vous avez modifié chaque objet du tableau à l'aide du crochet et du point notation. Ce cas d'utilisation peut être utilisé pour traiter ou condenser les informations reçues données avant d'être enregistrées ou analysées sur une application frontale.

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!