callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Der Rückgabewert wird als einzelnes Element in das neue Array aufgenommen. 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 dasmap() aufgerufen wurde.

thisArgOptional

Ein Wert, der alsthis beim Ausführen voncallbackFn verwendet wird. Sieheiterative Methoden.

Ein neues Array, wobei jedes Element das Ergebnis der Rückruffunktion ist.

Diemap()-Methode ist eineiterative Methode. Sie ruft eine bereitgestelltecallbackFn-Funktion einmal für jedes Element in einem Array auf und erstellt 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, die zugewiesene Werte haben. Sie wird nicht für leere Stellen indünn besetzten Arrays aufgerufen.

Diemap()-Methode istgenerisch. Sie erwartet nur, dass derthis-Wert einelength-Eigenschaft und integer-basierte Eigenschaften hat.

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

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]

Der folgende Code nimmt ein Array von Objekten und erstellt ein neues Array aus den neu formatierten Objekten.

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 }// ]

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

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

Während man möglicherweise[1, 2, 3] erwartet, ist das tatsächliche Ergebnis[1, NaN, NaN].

parseInt wird oft mit einem Argument verwendet, nimmt aber zwei. Das erste ist ein Ausdruck, und das zweite ist die Basis, die der Rückruffunktion übergeben wird.Array.prototype.map übergibt 3 Argumente: das Element, den Index und das Array. Das dritte Argument wird vonparseInt ignoriert — abernicht das zweite! Dies ist die Quelle der möglichen Verwirrung.

Hier ein kurzes 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 annimmt:

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

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

["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]

SieheEin JavaScript-Problem mit optionalen Argumenten von Allen Wirfs-Brock für weitere Diskussionen.

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 ein leeres Array zurück, um die Löschung anzuzeigen.

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]

Der Rückruf kann Nebeneffekte 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, da kopierende Methoden am besten mit reinen Funktionen verwendet werden. In diesem Fall können wir uns entscheiden, 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, wasmap() tut, das Auslösen von Nebeneffekten ist.

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

Wie zuvor erwähnt, ist dies ein Anti-Pattern. Wenn Sie den Rückgabewert vonmap() nicht verwenden, verwenden SieforEach() 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,}));

Dasarray-Argument ist nützlich, wenn Sie auf ein anderes Element im Array zugreifen möchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Im folgenden Beispiel wird zuerstfilter() verwendet, um die positiven Werte zu extrahieren, und dann wirdmap() verwendet, um ein neues Array zu erstellen, bei dem jedes Element der Durchschnitt seiner Nachbarn und seiner 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 gerade erstellt wird — es gibt keine Möglichkeit, aus der Rückruffunktion auf das gerade erstellte Array zuzugreifen.

Ein dünn besetztes Array bleibt nachmap() dünn besetzt. Die Indizes der leeren Stellen bleiben im zurückgegebenen Array leer und die Rückruffunktion wird nicht für sie aufgerufen.

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

Diemap()-Methode liest dielength-Eigenschaft vonthis und greift dann auf jede Eigenschaft zu, deren Schlüssel ein nichtnegativer Integer 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 durch eine Sammlung von Objekten iteriert, die durchquerySelectorAll gesammelt wurden. Dies liegt daran, dassquerySelectorAll einNodeList zurückgibt (was eine Sammlung von Objekten ist). 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 umzuwandeln und dann diemap()-Methode zu verwenden.

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