Detaillierte Erklärung von Array.prototype.map() in Javascript_Grundkenntnisse

In unserer täglichen Entwicklung ist das Betreiben und Konvertieren von Arrays ein sehr häufiger Vorgang. Schauen wir uns ein Beispiel an:

Code kopieren Der Code lautet wie folgt:

var desColors = [],
srcColors = [
{r: 255, g: 255, b: 255}, // Weiß
{r: 128, g: 128, b: 128}, // Grau
{r: 0, g: 0, b: 0} // Schwarz
];

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

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

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

Wie aus dem obigen Beispiel ersichtlich ist, ist die Wiederholungsrate aller Vorgänge relativ hoch. Wie können wir sie optimieren? Glücklicherweise stellt uns Ecmascript 5 eine Kartenmethode zur Verfügung, mit der wir das obige Beispiel optimieren können:

Code kopieren Der Code lautet wie folgt:

var srcColors = [
{r: 255, g: 255, b: 255}, // Weiß
{r: 128, g: 128, b: 128}, // Grau
{r: 0, g: 0, b: 0} // Schwarz
],
DesColors = srcColors.map(function(val) {
         var format = function(color) {
               return Math.round(color/2);
        };
         return {
             r: format(val.r),
g: format(val.g),
                b: format(val.b)
}
});
// Ausgaben:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64 },
// {r: 0, g: 0, b: 0 }
// ];
console.log(desColors);

Wie aus dem obigen Beispiel ersichtlich ist, verwenden wir Map, um den for-Schleifenteil zu ersetzen, sodass wir uns nur um die Implementierungslogik jedes Elements selbst kümmern müssen. Für Einzelheiten zur Kartenmethode klicken Sie bitte hier.

1.map-Grunddefinition:
array.map(callback[, thisArg]);

Die Map-Methode ruft die Rückruffunktion einmal für jedes Element im ursprünglichen Array nacheinander auf. Die Rückgabewerte nach jeder Callback-Ausführung werden zu einem neuen Array zusammengefasst. Die Callback-Funktion wird nur für Indizes aufgerufen, die Werte haben. Indizes, denen noch nie ein Wert zugewiesen oder mit „Delete“ gelöscht wurde, werden nicht aufgerufen.

Die Rückruffunktion wird automatisch in drei Parametern übergeben: Array-Element, Elementindex und das ursprüngliche Array selbst.

Wenn der Parameter thisArg einen Wert hat, zeigt dieser bei jedem Aufruf der Rückruffunktion auf das Objekt im Parameter thisArg. Wenn der Parameter thisArg weggelassen wird oder ihm der Wert null oder undefiniert zugewiesen wird, zeigt dies auf das globale Objekt.

map ändert nicht das ursprüngliche Array selbst (natürlich kann das ursprüngliche Array geändert werden, wenn ein Rückruf ausgeführt wird).

Wenn die Map-Methode auf einem Array ausgeführt wird, wird die Länge des Arrays bestimmt, bevor die erste Rückrufmethode aufgerufen wird. Während des gesamten laufenden Prozesses der Map-Methode, unabhängig davon, ob die Operation in der Rückruffunktion Elemente zum ursprünglichen Array hinzufügt oder löscht. Die Kartenmethode weiß nicht, dass bei einer Vergrößerung der Array-Elemente die neu hinzugefügten Elemente nicht von der Karte durchlaufen werden. Wenn die Array-Elemente abnehmen, geht die Kartenmethode auch davon aus, dass sich die Länge des ursprünglichen Arrays nicht geändert hat ein außerhalb der Grenzen liegender Array-Zugriff. Wenn Elemente im Array geändert oder gelöscht werden, sind ihre an den Rückruf übergebenen Werte die Werte in dem Moment, in dem die Kartenmethode zu ihnen wechselt.

2.map-Instanz:

Code kopieren Der Code lautet wie folgt:

//Beispiel 1: Aufruf der Map-Methode für einen String
var result = Array.prototype.map.call("Hallo Welt", function(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“, Länge: 11}
console.log(arr);
Gibt x.charCodeAt(0);
zurück });
//Ausgaben: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log(result);

Das obige Beispiel zeigt die Verwendung der Map-Methode für einen String, um ein Array zu erhalten, das aus den ASCII-Codes besteht, die jedem Zeichen im String entsprechen. Bitte beachten Sie die von console.log(arr) gedruckten Ergebnisse.

Code kopieren Der Code lautet wie folgt:

//Beispiel 2: Was ist das Ergebnis der folgenden Operation?
var result = ["1", "2", "3"].map(parseInt);
//Ausgaben: [1, NaN, NaN]
console.log(result);

Vielleicht haben Sie Fragen, warum nicht [1,2,3]? Wir wissen, dass die parseInt-Methode zwei Parameter empfangen kann. Der erste Parameter ist der Wert, der konvertiert werden muss, und der zweite Parameter ist die Basiszahl. Wenn Sie nicht verstehen, können Sie hier klicken. Wenn wir die Map-Methode verwenden, empfängt die Callback-Funktion höchstens zwei Parameter, sodass der dritte Parameter direkt verworfen wird. Gleichzeitig behandelt parseInt den übergebenen Indexwert als Basiszahl verwenden. Dadurch wird NaN zurückgegeben. Schauen Sie sich die Ausgabe unten an:

Code kopieren Der Code lautet wie folgt:

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

Die letzten beiden sind leicht zu verstehen, aber warum geben die ersten beiden 1 zurück? Um dieses Problem zu erklären, werfen wir einen Blick auf die offizielle Beschreibung:
Wenn radix undefiniert oder 0 ist (oder fehlt), geht JavaScript von Folgendem aus:
a) Wenn die Eingabezeichenfolge mit „0x“ oder „0X“ beginnt, ist die Basis 16 (hexadezimal) und der Rest der Zeichenfolge wird analysiert.
b) Wenn die Eingabezeichenfolge mit „0“ beginnt, ist die Basiszahl acht (oktal) oder 10 (dezimal). ECMAScript 5 gibt an, dass 10 (dezimal) verwendet wird Dies wird noch nicht von allen Browsern unterstützt. Geben Sie daher bei der Verwendung von parseInt.
immer einen Basiswert an c) Wenn die Eingabezeichenfolge mit einem anderen Wert beginnt, ist die Basis 10 (dezimal).
Wenn es sich bei string um einen anderen Wert handelt, ist die Basis im dritten Punkt standardmäßig 10.

Wie können wir es also ändern, damit das obige Beispiel normal ausgegeben wird? Schauen Sie sich das folgende Beispiel an:

Code kopieren Der Code lautet wie folgt:

var result = ["1", "2", "3"].map(function(val) {
Gibt parseInt(val, 10);
zurück });
//Ausgaben: [1, 2, 3]
console.log(result);

3.Kompatibilität der Kartenmethode:
Die Kartenmethode wird in den Browsern IE8 und niedriger nicht unterstützt. Um mit älteren Browserversionen kompatibel zu sein, können Sie Folgendes tun:

a) Verwenden Sie nicht <font face="NSimsun">map</font>.b) Verwenden Sie etwas wie es5-shim, damit ältere IEs unterstützt werden <font face="NSimsun">map</font>.c) Verwenden Sie die <font face="NSimsun">_.map</font>-Methode in Underscore oder Lodash für eine entsprechende Dienstprogrammfunktion.

Das Obige ist mein Verständnis der Kartenmethode. Ich hoffe, dass es für Anfänger hilfreich ist. Ich hoffe, dass etwaige Ungenauigkeiten im Artikel korrigiert werden.