Dans notre développement quotidien, l'exploitation et la conversion des tableaux sont une opération très courante. Jetons un coup d'œil à un exemple:
La copie de code est la suivante:
var descolors = [],
srccolors = [
{r: 255, g: 255, b: 255}, // blanc
{r: 128, g: 128, b: 128}, // gris
{r: 0, g: 0, b: 0} // noir
]]
for (var i = 0, ilen = srccolors.length; i <ilen; i ++) {
var color = srccolors [i],
format = fonction (couleur) {
Retour Math.round (Color / 2);
};
Descolors.push ({
R: Format (Color.R),
G: Format (Color.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);
D'après l'exemple ci-dessus, nous pouvons voir que toutes les opérations ont un taux de répétition relativement élevé. Comment l'optimiser? Heureusement, Ecmascript 5 nous fournit une méthode de carte, que nous pouvons utiliser pour optimiser l'exemple ci-dessus:
La copie de code est la suivante:
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 (fonction (val) {
var format = fonction (couleur) {
Retour Math.round (Color / 2);
};
retour {
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);
D'après l'exemple ci-dessus, nous pouvons voir que nous avons utilisé MAP pour remplacer la partie de la boucle pour, afin que nous ayons seulement besoin de nous soucier de la logique d'implémentation de chaque élément lui-même. Pour plus de détails sur la méthode de la carte, veuillez cliquer ici.
1. Carte Définition de base:
array.map (rappel [, thisarg]);
La méthode MAP appelle la fonction de rappel une fois pour chaque élément du tableau d'origine. Rappel Les valeurs de retour après chaque exécution sont combinées pour former un nouveau tableau. La fonction de rappel ne sera appelée que sur des index avec une valeur; Les index qui n'ont jamais été attribués de valeurs ou supprimés avec Supprimer ne seront pas appelés.
La fonction de rappel sera automatiquement transmise en trois paramètres: élément de tableau, index d'élément et le tableau d'origine lui-même.
Si le paramètre de ThisArg a une valeur, cela pointera vers cet objet sur ce paramètre ThisArg chaque fois que la fonction de rappel est appelée. Si le paramètre ThisArg est omis ou si la valeur est attribuée à Null ou non définie, cela pointe vers l'objet global.
MAP ne modifie pas le tableau d'origine lui-même qui l'appelle (bien sûr, il peut modifier le tableau d'origine lorsque le rappel est exécuté).
Lorsqu'un tableau exécute une méthode de carte, la longueur du tableau est déterminée avant que la première méthode de rappel ne soit appelée. Pendant l'ensemble du fonctionnement de la méthode MAP, que les opérations de la fonction de rappel ajoutent ou suppriment des éléments au tableau d'origine. La méthode de la carte ne le saura pas. Si l'élément de tableau augmente, l'élément nouvellement ajouté ne sera pas traversé par la carte. Si l'élément de tableau diminue, la méthode MAP pense également que la longueur du tableau d'origine n'a pas changé, ce qui entraîne l'accès à la table à la sortie. Si les éléments du tableau sont modifiés ou supprimés, la valeur qu'ils sont transmis dans le rappel est la valeur de la méthode de carte traversant leur moment.
2.Map Instance:
La copie de code est la suivante:
// Exemple 1: Méthode de la carte d'appel sur la chaîne
var result = array.prototype.map.call ("Hello World", fonction (x, index, arr) {
// String {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);
return x.Charcodeat (0);
});
// Sorties: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log (résultat);
L'exemple ci-dessus démontre l'utilisation de la méthode MAP sur une chaîne pour obtenir un tableau de codes ASCII correspondant à chaque caractère d'une chaîne. Veuillez prêter attention aux résultats d'impression de Console.log (ARR) imprimé.
La copie de code est la suivante:
// 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 que vous aurez une question, 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 nombre de binaires. 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 rejeté. Dans le même temps, ParseInt utilise la valeur d'index adoptée comme numéro binaire, renvoyant ainsi NAN. Regardez les résultats de sortie suivants:
La copie de code est la suivante:
// ouputs: 1
console.log (parseInt ("1", 0));
// ouputs: 1
console.log (parseInt ("1", undefined));
// ouputs: nan
console.log (parseInt ("2", 1));
// ouputs: nan
console.log (parseInt ("3", 2));
Les deux derniers sont faciles à comprendre, mais pourquoi les deux premiers retournent-ils 1? Pour expliquer ce problème, jetons un coup d'œil à la description officielle:
Si Radix n'est pas défini ou 0 (ou absent), JavaScript suppose ce qui suit:
A) Si la chaîne d'entrée commence par «0x» ou «0x», Radix est 16 (hexadécimal) et le reste de la chaîne est analysé.
B) Si la chaîne d'entrée commence par "0", le radix est huit (octal) ou 10 (décimal). Exactement quel radix est choisi est dépendant de l'implémentation. Les spécifications ECMAScript 5 que 10 (décimal) sont utilisées, mais tous les navigateurs ne le soutiennent pas encore. Pour cette raison, spécifiez toujours un radix lorsque vous utilisez Parseint.
c) Si la chaîne d'entrée commence par une autre valeur, le radix est 10 (décimal).
Dans le troisième point, lorsque la chaîne est une autre valeur, la valeur par défaut est 10.
Alors, comment le modifier pour faire l'exemple ci-dessus normalement? Voir l'exemple suivant:
La copie de code est la suivante:
var result = ["1", "2", "3"]. map (fonction (val) {
RETOUR PARSEINT (Val, 10);
});
// Sorties: [1, 2, 3]
console.log (résultat);
3. Compatibilité de la méthode de la carte:
La méthode MAP n'est pas prise en charge dans IE8 et sous les navigateurs. Si vous souhaitez être compatible avec les anciennes versions des navigateurs, vous pouvez:
a) N'utilisez pas map .b) Utilisez quelque chose comme ES5-SHIM pour faire map de support d'IE plus ancien .C) Utilisez la méthode _.map dans Soulignement ou Lodash pour une fonction utilitaire équivalente.
Ce qui précède est la compréhension de la méthode de la carte. J'espère que ce sera utile aux débutants. S'il y a des points inappropriés dans l'article, j'espère que vous pourrez le corriger!