Explication détaillée de Array.prototype.map() dans les connaissances Javascript_Basic

Dans notre développement quotidien, l'exploitation et la conversion de tableaux sont une opération très courante. Prenons un exemple :

Copier le code Le code est le suivant :

var desCouleurs = [],
srcColors = [
{r : 255, g : 255, b : 255}, // Blanc
{r : 128, g : 128, b : 128}, // Gris
{r : 0, g : 0, b : 0} // Noir
];

pour (var i = 0, ilen = srcColors.length; i < ilen; i ) {
var couleur = srcColors[i],
format = fonction (couleur) {
               return Math.round(color / 2);
        };

desColors.push( {
r: format(couleur.r),
g: format(couleur.g),
           b : format(color.b)
});
>

// Sorties :
// [
// {r : 128, g : 128, b : 128},
// {r : 64, g : 64, b : 64 },
// {r : 0, g : 0, b : 0 }
// ];
console.log(desColors);

Comme le montre l'exemple ci-dessus, le taux de répétition de toutes les opérations est relativement élevé. Comment l'optimiser ? Heureusement, Ecmascript 5 nous fournit une méthode map, que nous pouvons utiliser pour optimiser l'exemple ci-dessus :

Copier le code Le code est le suivant :

var srcColors = [
{r : 255, g : 255, b : 255}, // Blanc
{r : 128, g : 128, b : 128}, // Gris
{r : 0, g : 0, b : 0} // Noir
],
DesColors = srcColors.map(function(val) {
         var format = fonction (couleur) {
               return Math.round(color/2);
        };
         revenir {
             r: format(val.r),
g : format(val.g),
                b: format(val.b)
>
});
// Sorties :
// [
// {r : 128, g : 128, b : 128},
// {r : 64, g : 64, b : 64 },
// {r : 0, g : 0, b : 0 }
// ];
console.log(desColors);

Comme le montre l'exemple ci-dessus, nous utilisons map pour remplacer la partie for de la boucle, nous n'avons donc qu'à nous soucier de la logique d'implémentation de chaque élément lui-même. Pour plus de détails sur la méthode cartographique, veuillez cliquer ici.

1.map définition de base :
array.map(callback[, thisArg]);

La méthode map appellera la fonction de rappel une fois pour chaque élément du tableau d'origine dans l'ordre. Les valeurs de retour après chaque exécution de rappel sont combinées pour former un nouveau tableau. La fonction de rappel ne sera appelée que sur les index qui ont des valeurs ; les index qui n’ont jamais reçu de valeur ou supprimés à l’aide de delete ne seront pas appelés.

La fonction de rappel sera automatiquement transmise dans trois paramètres : élément du tableau, index de l'élément et le tableau d'origine lui-même.

Si le paramètre thisArg a une valeur, chaque fois que la fonction de rappel est appelée, celle-ci pointera vers l'objet sur le paramètre thisArg. Si le paramètre thisArg est omis ou si une valeur nulle ou indéfinie lui est attribuée, cela pointe vers l'objet global.

map ne modifie pas le tableau d'origine lui-même (bien sûr, le tableau d'origine peut être modifié lors de l'exécution du rappel).

Lorsque la méthode map est exécutée sur un tableau, la longueur du tableau est déterminée avant l'appel de la première méthode de rappel. Pendant tout le processus d'exécution de la méthode map, peu importe si l'opération dans la fonction de rappel ajoute ou supprime des éléments au tableau d'origine. La méthode map ne saura pas que si les éléments du tableau augmentent, les éléments nouvellement ajoutés ne seront pas traversés par la carte. Si les éléments du tableau diminuent, la méthode map pensera également que la longueur du tableau d'origine n'a pas changé, ce qui entraîne. un accès au tableau hors limites. Si des éléments du tableau sont modifiés ou supprimés, leurs valeurs transmises dans le rappel sont les valeurs au moment où la méthode map les atteint.

Instance 2.map :

Copier le code Le code est le suivant :

//Exemple 1 : Appel de la méthode map sur une chaîne
var result = Array.prototype.map.call("Bonjour tout le monde", function(x, index, arr) {
//Chaîne {0 : "H", 1 : "e", 2 : "l", 3 : "l", 4 : "o", 5 : " ", 6 : "w", 7 : "o" , 8 : "r", 9 : "l", 10 : "d", longueur : 11}
console.log(arr);
Renvoie x.charCodeAt(0);
});
//Sorties : [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log(résultat);

L'exemple ci-dessus montre l'utilisation de la méthode map sur une chaîne pour obtenir un tableau composé des codes ASCII correspondant à chaque caractère de la chaîne. Veuillez faire attention aux résultats imprimés par console.log(arr).

Copier le code Le code est le suivant :

//Exemple 2 : Quel est le résultat de l'opération suivante ?
var result = ["1", "2", "3"].map(parseInt);
//Sorties : [1, NaN, NaN]
console.log(résultat);

Peut-être avez-vous des questions, pourquoi pas [1,2,3] ? Nous savons que la méthode parseInt peut recevoir deux paramètres. Le premier paramètre est la valeur qui doit être convertie et le deuxième paramètre est le numéro de base. Si vous ne comprenez pas, vous pouvez cliquer ici. Lorsque nous utilisons la méthode map, la fonction de rappel reçoit trois paramètres, tandis que parseInt ne peut recevoir que deux paramètres au maximum, de sorte que le troisième paramètre est directement ignoré. En même temps, parseInt traite la valeur d'index transmise comme un numéro de base. use. Renvoyant ainsi NaN. Regardez le résultat ci-dessous :

Copier le code Le code est le suivant :

//Sorties : 1
console.log(parseInt("1", 0));
//Sorties : 1
console.log(parseInt("1", undefined));
//Sorties : NaN
console.log(parseInt("2", 1));
//Sorties : NaN
console.log(parseInt("3", 2));

Les deux derniers sont faciles à comprendre, mais pourquoi les deux premiers renvoient-ils 1 ? Pour expliquer ce problème, jetons un œil à la description officielle :
Si la base est indéfinie ou 0 (ou absente), JavaScript suppose ce qui suit :
a) Si la chaîne d'entrée commence par « 0x » ou « 0X », la base est 16 (hexadécimale) et le reste de la chaîne est analysé.
b) Si la chaîne d'entrée commence par « 0 », la base est huit (octal) ou 10 (décimal). La base exacte choisie dépend de l'implémentation. ECMAScript 5 spécifie que 10 (décimal) est utilisé, mais. tous les navigateurs ne le prennent pas encore en charge. Pour cette raison, spécifiez toujours une base lorsque vous utilisez parseInt.
c) Si la chaîne d'entrée commence par une autre valeur, la base est 10 (décimale).
Au troisième point, lorsque string est une autre valeur, la base est par défaut 10.

Alors, comment pouvons-nous le modifier pour que l'exemple ci-dessus s'affiche normalement ? Regardez l'exemple suivant :

Copier le code Le code est le suivant :

var résultat = ["1", "2", "3"].map(function(val) {
Renvoie parseInt(val, 10);
});
//Sorties : [1, 2, 3]
console.log(résultat);

3.Compatibilité de la méthode cartographique :
La méthode map n'est pas supportée dans les navigateurs IE8 et inférieurs. Pour être compatible avec les anciennes versions des navigateurs, vous pouvez :

.

a) N'utilisez pas <font face="NSimsun">map</font>.b) Utilisez quelque chose comme es5-shim pour rendre le support d'IE plus ancien <font face="NSimsun">map</font>.c) Utilisez la méthode <font face="NSimsun">_.map</font> dans Underscore ou Lodash pour une fonction utilitaire équivalente.

Ce qui précède est ma compréhension de la méthode de la carte. J'espère que cela sera utile aux débutants. J'espère que toute inexactitude dans l'article sera corrigée !