Diemap()-Methode vonArray-Instanzen erstellt ein neues Array, das mit den Ergebnissen einer bereitgestellten Funktion befüllt wird, welche auf jedes Element des aufrufenden Arrays angewendet wird.

Probieren Sie es aus

const array = [1, 4, 9, 16];// Pass a function to mapconst mapped = array.map((x) => x * 2);console.log(mapped);// Expected output: Array [2, 8, 18, 32]

Syntax

map(callbackFn)map(callbackFn, thisArg)

Parameter

callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Ihr Rückgabewert wird als einzelnes Element im neuen Array hinzugefügt. Die Funktion wird mit den folgenden Argumenten aufgerufen:

element

Das aktuelle Element, das im Array verarbeitet wird.

index

Der Index des aktuellen Elements, das im Array verarbeitet wird.

array

Das Array, auf demmap() aufgerufen wurde.

thisArgOptional

Ein Wert, der alsthis verwendet wird, wenncallbackFn ausgeführt wird. Sieheiterative Methoden.

Rückgabewert

Ein neues Array, bei dem jedes Element das Ergebnis der Callback-Funktion ist.

Beschreibung

Diemap()-Methode ist eineiterative Methode. Sie ruft eine bereitgestelltecallbackFn-Funktion einmal für jedes Element in einem Array auf und konstruiert ein neues Array aus den Ergebnissen. Lesen Sie den Abschnittiterative Methoden, um mehr darüber zu erfahren, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen wurden. Sie wird nicht für leere Slots inspärlichen Arrays aufgerufen.

Diemap()-Methode istgenerisch. Sie erwartet nur, dass derthis-Wert einelength-Eigenschaft und Attribute mit ganzzahligen Schlüsseln hat.

Damap ein neues Array erstellt, ist der Aufruf ohne Verwendung des zurückgegebenen Arrays ein Anti-Pattern; verwenden Sie stattdessenforEach oderfor...of.

Beispiele

Abbildung eines Zahlenarrays in ein Array von Quadratwurzeln

Der folgende Code nimmt ein Array von Zahlen und erstellt ein neues Array, das die Quadratwurzeln der Zahlen im ersten Array enthält.

const numbers = [1, 4, 9];const roots = numbers.map((num) => Math.sqrt(num));// roots is now     [1, 2, 3]// numbers is still [1, 4, 9]

Verwendung von map zur Neuformatierung von Objekten in einem Array

Der folgende Code nimmt ein Array von Objekten und erstellt ein neues Array, das die neu formatierten Objekte enthält.

const kvArray = [  { key: 1, value: 10 },  { key: 2, value: 20 },  { key: 3, value: 30 },];const reformattedArray = kvArray.map(({ key, value }) => ({ [key]: value }));console.log(reformattedArray); // [{ 1: 10 }, { 2: 20 }, { 3: 30 }]console.log(kvArray);// [//   { key: 1, value: 10 },//   { key: 2, value: 20 },//   { key: 3, value: 30 }// ]

Verwendung von parseInt() mit map()

Es ist üblich, den Callback mit einem Argument (das durchlaufene Element) zu verwenden. Bestimmte Funktionen werden auch häufig mit einem Argument verwendet, obwohl sie zusätzliche optionale Argumente haben. Diese Gewohnheiten können zu verwirrendem Verhalten führen. Betrachten Sie folgendes:

["1", "2", "3"].map(parseInt);

Während man [1, 2, 3] erwarten könnte, ist das tatsächliche Ergebnis [1, NaN, NaN].

parseInt wird häufig mit einem Argument verwendet, nimmt aber zwei. Das erste ist ein Ausdruck und das zweite ist das Zahlensystem (Radix). An die Callback-FunktionArray.prototype.map werden 3 Argumente übergeben: das Element, der Index und das Array. Das dritte Argument wird vonparseInt ignoriert — abernicht das zweite! Dies ist die Quelle möglicher Verwirrung.

Hier ist ein prägnantes Beispiel der Iterationsschritte:

/* first iteration  (index is 0): */ parseInt("1", 0); // 1/* second iteration (index is 1): */ parseInt("2", 1); // NaN/* third iteration  (index is 2): */ parseInt("3", 2); // NaN

Um dies zu lösen, definieren Sie eine andere Funktion, die nur ein Argument verwendet:

["1", "2", "3"].map((str) => parseInt(str, 10)); // [1, 2, 3]

Sie können auch dieNumber-Funktion verwenden, die nur ein Argument nimmt:

["1", "2", "3"].map(Number); // [1, 2, 3]// But unlike parseInt(), Number() will also return a float or (resolved) exponential notation:["1.1", "2.2e2", "3e300"].map(Number); // [1.1, 220, 3e+300]// For comparison, if we use parseInt() on the array above:["1.1", "2.2e2", "3e300"].map((str) => parseInt(str, 10)); // [1, 2, 3]

Weitere Diskussionen finden Sie inA JavaScript optional argument hazard von Allen Wirfs-Brock.

Abgebildetes Array enthält undefiniert

Wennundefined oder nichts zurückgegeben wird, enthält das resultierende Arrayundefined. Wenn Sie das Element stattdessen löschen möchten, verketten Sie einefilter()-Methode oder verwenden Sie dieflatMap()-Methode und geben Sie ein leeres Array zurück, um die Löschung zu signalisieren.

const numbers = [1, 2, 3, 4];const filteredNumbers = numbers.map((num, index) => {  if (index < 3) {    return num;  }});// index goes from 0, so the filterNumbers are 1,2,3 and undefined.// filteredNumbers is [1, 2, 3, undefined]// numbers is still [1, 2, 3, 4]

Seiteneffekt-behaftete Abbildung

Der Callback kann Seiteneffekte haben.

const cart = [5, 15, 25];let total = 0;const withTax = cart.map((cost) => {  total += cost;  return cost * 1.2;});console.log(withTax); // [6, 18, 30]console.log(total); // 45

Dies wird nicht empfohlen, weil Kopiermethoden am besten mit reinen Funktionen verwendet werden. In diesem Fall können wir wählen, das Array zweimal zu durchlaufen.

const cart = [5, 15, 25];const total = cart.reduce((acc, cost) => acc + cost, 0);const withTax = cart.map((cost) => cost * 1.2);

Manchmal geht dieses Muster so weit, dass daseinzige Nützliche, dasmap() tut, ist, Seiteneffekte zu verursachen.

const products = [  { name: "sports car" },  { name: "laptop" },  { name: "phone" },];products.map((product) => {  product.price = 100;});

Wie bereits erwähnt, ist dies ein Anti-Pattern. Wenn Sie den Rückgabewert vonmap() nicht verwenden, verwenden Sie stattdessenforEach() oder einefor...of-Schleife.

products.forEach((product) => {  product.price = 100;});

Oder, wenn Sie stattdessen ein neues Array erstellen möchten:

const productsWithPrice = products.map((product) => ({  ...product,  price: 100,}));

Verwendung des dritten Arguments von callbackFn

Dasarray-Argument ist nützlich, wenn Sie ein anderes Element im Array zugreifen möchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zuerstfilter(), um die positiven Werte zu extrahieren und dannmap(), um ein neues Array zu erstellen, bei dem jedes Element der Durchschnitt seiner Nachbarn und sich selbst ist.

const numbers = [3, -1, 1, 4, 1, 5, 9, 2, 6];const averaged = numbers  .filter((num) => num > 0)  .map((num, idx, arr) => {    // Without the arr argument, there's no way to easily access the    // intermediate array without saving it to a variable.    const prev = arr[idx - 1];    const next = arr[idx + 1];    let count = 1;    let total = num;    if (prev !== undefined) {      count++;      total += prev;    }    if (next !== undefined) {      count++;      total += next;    }    const average = total / count;    // Keep two decimal places    return Math.round(average * 100) / 100;  });console.log(averaged); // [2, 2.67, 2, 3.33, 5, 5.33, 5.67, 4]

Dasarray-Argument istnicht das Array, das erstellt wird — es gibt keine Möglichkeit, auf das erstellte Array von der Callback-Funktion aus zuzugreifen.

Verwendung von map() auf spärlichen Arrays

Ein spärliches Array bleibt spärlich nachmap(). Die Indizes der leeren Slots bleiben im zurückgegebenen Array leer, und die Callback-Funktion wird nicht auf sie angewendet.

console.log(  [1, , 3].map((x, index) => {    console.log(`Visit ${index}`);    return x * 2;  }),);// Visit 0// Visit 2// [2, empty, 6]

Aufrufen von map() auf Nicht-Array-Objekten

Diemap()-Methode liest dielength-Eigenschaft vonthis und ruft dann jede Eigenschaft ab, deren Schlüssel eine nicht-negative Ganzzahl kleiner alslength ist.

const arrayLike = {  length: 3,  0: 2,  1: 3,  2: 4,  3: 5, // ignored by map() since length is 3};console.log(Array.prototype.map.call(arrayLike, (x) => x ** 2));// [ 4, 9, 16 ]

Dieses Beispiel zeigt, wie man eine Sammlung von Objekten durchläuft, die mitquerySelectorAll gesammelt wurden. Dies liegt daran, dassquerySelectorAll eineNodeList (eine Sammlung von Objekten) zurückgibt. In diesem Fall geben wir alle ausgewähltenoption-Werte auf dem Bildschirm zurück:

const elems = document.querySelectorAll("select option:checked");const values = Array.prototype.map.call(elems, ({ value }) => value);

Sie können auchArray.from() verwenden, umelems in ein Array zu transformieren und dann diemap()-Methode zu verwenden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Polyfill vonArray.prototype.map incore-js
• es-shims Polyfill vonArray.prototype.map
• Leitfaden zuindizierten Sammlungen
• Array
• Array.prototype.forEach()
• Array.from()
• TypedArray.prototype.map()
• Map