Array.prototype.map()

callbackFn

Eine Funktion, die für jedes Element im Array ausgeführt wird. Ihr Rückgabewert wird als ein 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 das map() angewendet wurde.

thisArg Optional

Ein Wert, der als this beim Ausführen von callbackFn verwendet wird. Siehe iterative Methoden.

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

Die map()-Methode ist eine iterative Methode. Sie ruft eine bereitgestellte callbackFn-Funktion einmal für jedes Element im Array auf und erstellt ein neues Array aus den Ergebnissen. Lesen Sie den Abschnitt iterative Methoden für weitere Informationen darüber, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur für Array-Indizes aufgerufen, die zugewiesene Werte haben. Es wird nicht für leere Plätze in dünn besetzten Arrays aufgerufen.

Die map()-Methode ist generisch. Sie erwartet nur, dass der this-Wert eine length-Eigenschaft und Ganzzahl-indizierte Eigenschaften hat.

Da map ein neues Array erstellt, ist das Aufrufen ohne Verwendung des zurückgegebenen Arrays ein Anti-Pattern; verwenden Sie stattdessen forEach oder for...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 mit 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 zu verwenden (das durchlaufene Element). Bestimmte Funktionen werden auch häufig mit einem Argument verwendet, obwohl sie zusätzliche optionale Argumente akzeptieren. Diese Gewohnheiten können zu verwirrendem Verhalten führen. Betrachten Sie:

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

Während man [1, 2, 3] erwarten könnte, 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 das Radix zur Rückruffunktion. Array.prototype.map übergibt 3 Argumente: das Element, den Index und das Array. Das dritte Argument wird von parseInt ignoriert – aber nicht das zweite! Dies ist die Quelle möglicher Verwirrungen.

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 nimmt:

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

Sie können auch die Number-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]

Siehe Eine JavaScript-Optionale-Argument-Gefahr von Allen Wirfs-Brock für weitere Diskussionen.

Wenn undefined oder nichts zurückgegeben wird, enthält das resultierende Array undefined. Wenn Sie stattdessen das Element löschen möchten, verwenden Sie die Methode filter() oder die Methode flatMap() und geben Sie ein leeres Array zurück, um eine 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]

Der Rückruf 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, da Kopiermethoden 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 ins Extreme und das einzige nützliche, was map() 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 von map() nicht verwenden, verwenden Sie forEach() oder eine for...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,
}));

Das array-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. Das folgende Beispiel verwendet zunächst filter(), um die positiven Werte zu extrahieren, und verwendet dann map(), um ein neues Array zu erstellen, in 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]

Das array-Argument ist nicht das Array, das erstellt wird – es gibt keine Möglichkeit, das erstellte Array von der Rückruffunktion aus zuzugreifen.

Ein dünn besetztes Array bleibt nach map() dünn besetzt. Die Indizes leerer Plätze bleiben im zurückgegebenen Array leer und die Rückruffunktion wird nicht aufgerufen.

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

Die map()-Methode liest die length-Eigenschaft von this und greift dann auf jede Eigenschaft zu, deren Schlüssel eine nicht negative Ganzzahl kleiner als length 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 von querySelectorAll gesammelt wurden. Dies liegt daran, dass querySelectorAll eine NodeList zurückgibt (die eine Sammlung von Objekten ist). In diesem Fall geben wir alle ausgewählten Werte der options auf dem Bildschirm zurück:

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

Sie können auch Array.from() verwenden, um elems in ein Array zu transformieren, und dann die map()-Methode aufrufen.

• Polyfill von Array.prototype.map in core-js
• es-shims Polyfill von Array.prototype.map
• Indizierte Sammlungen Leitfaden
• Array
• Array.prototype.forEach()
• Array.from()
• TypedArray.prototype.map()
• Map