Analyse sur la façon d'utiliser la méthode map() pour le traitement des tableaux en JavaScript

Cet article vous présentera l'utilisation de la méthode map() pour traiter les données du tableau et la différence entre la méthode map() et l'instruction forEach. Le contenu est très détaillé ci-dessous.

Tout d'abord, jetons un coup d'œil à la syntaxe de base de map()

var array = [ 数组数据 ];
array.map(回调函数);

La carte est utilisée pour la méthode de données de tableau qui exécute une "fonction de rappel" pour chaque élément et renvoie le résultat sous la forme d'un nouveau tableau.

En d'autres termes, en écrivant le processus à exécuter dans cette fonction, vous pouvez effectuer n'importe quelle opération sur chaque élément du tableau !

Comment parcourir un tableau en utilisant la méthode map ?

L'exemple suivant est un exemple d'utilisation de la méthode map sur un tableau contenant des données numériques

var items = [1,2,3,4,5];
 
var result = items.map(function( value ) {
    return value * 2;
});
console.log( result );

Le résultat de sortie est le suivant

Dans cet exemple, la fonction de rappel est utilisée pour doubler chaque élément du tableau de valeurs​​de 1 à 5.

Pour cette raison, nous allouons un tableau dont le résultat est doublé comme valeur de retour de "result", afin que vous puissiez voir que le résultat de sortie devient le double de sa propre valeur.

Au départ, il s'agissait d'écrire des boucles en utilisant des instructions for ou while, mais utiliser map est très pratique car il peut être implémenté avec un programme très simple !

Il existe également une méthode réduire() en Analyse sur la façon dutiliser la méthode map() pour le traitement des tableaux en JavaScript qui est similaire à la méthode map() Vous pouvez vous référer à cet article sur la méthode réduire() : Comment utiliser réduire en Analyse sur la façon dutiliser la méthode map() pour le traitement des tableaux en JavaScript

Pour plus d'informations sur la différence entre les méthodes réduire() et map(), veuillez vous référer à cet article :

Quelle est la différence entre map() et réduire() en Analyse sur la façon dutiliser la méthode map() pour le traitement des tableaux en JavaScript

map( ) et l'instruction forEach ?

map() est similaire à l'instruction forEach, elle peut opérer sur les tableaux de la même manière.

Regardons un exemple spécifique

//forEach
[1,2,3].forEach(function( value ) {
   console.log( value );
});
 
 
//map
[1,2,3].map(function( value ) {
    console.log( value );
});

Les résultats de sortie sont les mêmes que

Tout comme vous êtes ici Comme le montre l'exemple, les résultats obtenus par forEach et map sont les mêmes.

Alors, quelle est la différence entre eux ? La plus grande différence est de savoir s'ils ont une valeur de retour.

En d'autres termes, forEach n'est qu'une méthode d'exécution, et map renvoie le résultat sous forme de données de tableau après l'exécution.

Regardons l'exemple spécifiquement

forEach :

var result = [1,2,3].forEach(function( value ) {
 
    return value * 2;
 
});
 
console.log( result );

Le résultat de sortie est le suivant :

La valeur de retour de forEach n'est pas visible.

carte :

var result = [1,2,3].map(function( value ) {
 
    return value * 2;
 
});
 
console.log( result );

Le résultat de sortie est

Les données du tableau peuvent être exécutées as Le résultat est renvoyé.

fonction de rappel de carte

Avant nous avons vu que la fonction de rappel n'a qu'un seul paramètre, mais en fait vous pouvez l'utiliser pour avoir trois paramètres !

数组数据.map( function( value, index, array ) {

});

Value est la valeur du tableau

index est le numéro d'index du tableau

array est le tableau en cours de traitement

Pour exemple, dans l'exemple suivant, nous utiliserons le paramètre index pour doubler la valeur d'un nombre pair

var items = [1,2,3,4,5,6,7,8,9];
var result = items.map( function( value, index, array ) {
    if( index % 2 !== 0 ) {
        return value * 2;
    }
    else {
        return value;
    }
});
console.log( result );

Le résultat de sortie est le suivant

De plus, map A une fonction qui n'apporte aucune modification aux données du tableau d'origine, mais si vous utilisez le troisième paramètre du tableau, vous pouvez également modifier les données d'origine !

var items = [1,2,3,4,5,6,7,8,9];
 
items.map( function( value, index, array ) {
 
    array[index] = value * 2;
 
});
 
console.log( items );

Le résultat est le suivant

Dans le passé, la "fonction de rappel" était spécifiée comme premier paramètre de "map", mais en fait, vous pouvez spécifier n'importe quel "objet" comme deuxième paramètre !

var array = [ 数组数据 ]; 
//指定对象为第2个参数
array.map( 回调函数, 对象 );

Cela permet de combiner des tableaux et des objets spécifiés pour une programmation plus pratique.

Par exemple, dans l'exemple suivant, l'objet simple food foodList est spécifié comme deuxième paramètre de map.

var foodList = {
  '苹果': 45,
  '哈密瓜': 50,
  '猕猴桃': 60,
  '草莓': 40
};
数组.map( function( value ) {
 
}, foodList );

Nous spécifions n'importe quel mot-clé de l'objet et renvoyons "prix".

var foodList = {
  '苹果': 45,
  '哈密瓜': 50,
  '猕猴桃': 60,
  '草莓': 40
};
var order = ['草莓', '猕猴桃'];
var result = order.map( function( value, index, array ) {
    return this[value];
 
}, foodList );
console.log( result );

Le résultat est le suivant

Dans cet exemple, vous pouvez voir que le mot-clé est défini dans l'ordre du tableau, à partir duquel il est obtenu avec l'objet possédé Le mot clé correspond à "prix" et le renvoie sous forme de tableau.

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!