In unserer täglichen Entwicklung ist das Betrieb und die Umwandlung von Arrays eine sehr häufige Operation. Schauen wir uns ein Beispiel an:
Die Codekopie 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
];
für (var i = 0, ilen = srccolors.length; i <ilen; i ++) {
var color = srccolors [i],
format = function (color) {
return math.round (color / 2);
};
descolors.push ({{{{
R: Format (color.r),
G: Format (color.g),
B: Format (color.b)
});
}
// Ausgänge:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
console.log (Descolors);
Aus dem obigen Beispiel können wir erkennen, dass alle Operationen eine relativ hohe Wiederholungsrate haben. Wie optimieren Sie es? Glücklicherweise bietet uns ECMascript 5 eine Kartenmethode, mit der wir das obige Beispiel optimieren können:
Die Codekopie 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 (Funktion (val) {
var format = function (color) {
return math.round (color/2);
};
zurückkehren {
R: Format (Val.R),
G: Format (Val.G),
B: Format (Val.B)
}
});
// Ausgänge:
// [
// {r: 128, g: 128, b: 128},
// {r: 64, g: 64, b: 64},
// {r: 0, g: 0, b: 0}
//];
console.log (Descolors);
Aus dem obigen Beispiel können wir sehen, dass wir MAP zum Ersetzen des für Loop -Teils verwendet haben, damit wir uns nur um die Implementierungslogik jedes Elements selbst kümmern müssen. Für Details zur Kartenmethode klicken Sie bitte hier.
1. MAP Basic Definition:
Array.Map (Callback [, thisArg]);
Die Kartenmethode ruft die Rückruffunktion einmal in der Reihenfolge für jedes Element im ursprünglichen Array auf. Rufen Sie die Rückgabewerte nach, nachdem jede Ausführung zu einem Neuarray kombiniert wird. Die Rückruffunktion wird nur in Indizes mit Wert aufgerufen. Indizes, denen nie Werte zugewiesen oder mit Löschen gelöscht wurden, werden nicht aufgerufen.
Die Rückruffunktion wird automatisch in drei Parametern übergeben: Array -Element, Elementindex und das ursprüngliche Array selbst.
Wenn der Parameter von ThisArg einen Wert hat, zeigt dies jedes Mal auf dieses Objekt auf ThisArg -Parameter, wenn die Rückruffunktion aufgerufen wird. Wenn der diesarg -Parameter weggelassen wird oder der Wert NULL oder UNDEFINED zugewiesen wird, weist dies dem globalen Objekt hin.
MAP ändert nicht das ursprüngliche Array selbst, das es aufruft (natürlich kann es das ursprüngliche Array ändern, wenn der Rückruf ausgeführt wird).
Wenn ein Array eine Kartenmethode ausführt, wird die Länge des Arrays ermittelt, bevor die erste Rückrufmethode aufgerufen wird. Während des gesamten Betriebs der Kartenmethode, unabhängig davon, ob die Operationen in der Rückruffunktion Elemente zum ursprünglichen Array hinzufügen oder löschen. Die Kartenmethode wird es nicht wissen. Wenn das Array -Element zunimmt, wird das neu hinzugefügte Element nicht von der Karte durchquert. Wenn das Array -Element abnimmt, ist die Kartenmethode auch der Ansicht, dass sich die Länge des ursprünglichen Arrays nicht geändert hat, was zum Auszugriff auf den Array -Zugriff auf den Ausgang führt. Wenn Elemente im Array geändert oder gelöscht werden, ist der Wert, den sie in Rückruf übergeben, der Wert der Kartenmethode, die zu ihrem Moment überquert wird.
2.MAP -Instanz:
Die Codekopie lautet wie folgt:
// Beispiel 1: Anrufkartenmethode in der Zeichenfolge aufrufen
var result = array.prototype.map.call ("Hello World", Funktion (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);
return X.CharCodeat (0);
});
// Ausgänge: [72, 101, 108, 108, 111, 32, 119, 111, 114, 108, 100]
console.log (Ergebnis);
Das obige Beispiel zeigt die Verwendung der MAP -Methode in einer Zeichenfolge, um ein Array von ASCII -Codes zu erhalten, die jedem Zeichen in einer Zeichenfolge entsprechen. Bitte achten Sie auf die Druckergebnisse von Console.log (arr) gedruckt.
Die Codekopie lautet wie folgt:
// Beispiel 2: Was ist das Ergebnis der folgenden Operation?
var result = ["1", "2", "3"]. Map (ParseInt);
// Ausgänge: [1, Nan, Nan]
console.log (Ergebnis);
Vielleicht haben Sie eine Frage, 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 Anzahl der binären. Wenn Sie nicht verstehen, können Sie hier klicken. Wenn wir die MAP -Methode verwenden, empfängt die Rückruffunktion drei Parameter, während ParseInt höchstens zwei Parameter empfangen kann, so dass der dritte Parameter direkt verworfen wird. Gleichzeitig verwendet Parseint den übergebenen Indexwert als Binärzahl, wodurch NAN zurückgegeben wird. Sehen Sie sich die folgenden Ausgabeergebnisse an:
Die Codekopie lautet wie folgt:
// Ouputs: 1
console.log (parseInt ("1", 0));
// Ouputs: 1
console.log (parseInt ("1", undefiniert));
// Ousput: Nan
console.log (parseInt ("2", 1));
// Ousput: Nan
console.log (parseInt ("3", 2));
Die letzten beiden sind leicht zu verstehen, aber warum kehren die ersten beiden zurück 1? Um dieses Problem zu erklären, werfen wir einen Blick auf die offizielle Beschreibung:
Wenn Radix undefiniert oder 0 (oder abwesend) ist, geht JavaScript Folgendes an:
A) Wenn die Eingangszeichenfolge mit "0x" oder "0x" beginnt, ist Radix 16 (hexadezimal) und der Rest der Saite wird analysiert.
b) Wenn die Eingangszeichenfolge mit „0“ beginnt, ist Radix acht (Oktal) oder 10 (dezimal). Genau welcher Radix ausgewählt wird, ist die implementierungsabhängige.
c) Wenn die Eingangszeichenfolge mit einem anderen Wert beginnt, beträgt der Radix 10 (dezimal).
Im dritten Punkt beträgt der Standardwert 10.
Wie ändern wir es also, um das obige Beispiel normal auszuführen? Siehe das folgende Beispiel:
Die Codekopie lautet wie folgt:
var result = ["1", "2", "3"]. map (function (val) {
Return ParseinT (Val, 10);
});
// Ausgänge: [1, 2, 3]
console.log (Ergebnis);
3.. Kartenmethodenkompatibilität:
Die Kartenmethode wird in IE8 und unterhalb der Browser nicht unterstützt. Wenn Sie mit älteren Versionen von Browsern kompatibel sein möchten, können Sie:
a) Verwenden Sie keine map .b) Verwenden Sie so etwas wie ES5-Shim, um ältere IE-Support- map .C) die _.map -Methode in Unterstrich oder Lodash für eine äquivalente Nutzenfunktion zu verwenden.
Das obige ist das Verständnis der Kartenmethode. Ich hoffe, es wird für Anfänger hilfreich sein. Wenn es im Artikel unangemessene Punkte gibt, hoffe ich, dass Sie es korrigieren können!