Array.prototype.map() — Methode · JavaScript-Referenz

Signatur

map(callbackFn) / map(callbackFn, thisArg)

Beschreibung

Die map()-Methode von Array-Instanzen erzeugt ein neues Array, das mit den Ergebnissen des Aufrufs einer bereitgestellten Funktion auf jedes Element des aufrufenden Arrays gefüllt ist.

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

callbackFn wird nur für Array-Indizes aufgerufen, denen Werte zugewiesen wurden. Für leere Slots in sparse Arrays wird sie nicht aufgerufen.

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

Da map ein neues Array aufbaut, ist der Aufruf ohne Verwendung des zurückgegebenen Arrays ein Anti-Pattern; verwenden Sie stattdessen forEach() oder for...of.

Parameter

Name	Typ	Default	Beschreibung
$callbackFn Pflicht	Function	—	Eine Funktion, die für jedes Element im Array ausgeführt wird. Ihr Rückgabewert wird als einzelnes Element in das neue Array eingefügt. Die Funktion wird mit den folgenden Argumenten aufgerufen: `element` (das aktuell verarbeitete Element im Array), `index` (der Index des aktuell verarbeiteten Elements im Array) und `array` (das Array, auf dem `map()` aufgerufen wurde).
$thisArg	any	—	Ein Wert, der als `this` beim Ausführen von `callbackFn` verwendet wird. Siehe iterative Methoden.

Rückgabewert

Typ

Array

Beschreibung

Ein neues Array, in dem jedes Element das Ergebnis der callback-Funktion ist.

Beispiele

Ein Array von Zahlen auf ein Array von Quadratwurzeln abbilden

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]

map verwenden, um Objekte in einem Array umzuformatieren

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

parseInt() mit map() verwenden

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

Iterationsschritte mit parseInt

/* 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

Lösung mit einer Funktion, die nur ein Argument nimmt

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

Number als callback verwenden

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

Ergebnis-Array enthält undefined

const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// index goes from 0, so the filteredNumbers are 1,2,3 and undefined.
// filteredNumbers is [1, 2, 3, undefined]
// numbers is still [1, 2, 3, 4]

Mapping mit Seiteneffekten

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

Besser: das Array zweimal iterieren

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

Anti-Pattern: map nur wegen Seiteneffekten

const products = [
  { name: "sports car" },
  { name: "laptop" },
  { name: "phone" },
];

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

Stattdessen forEach verwenden

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

Oder ein neues Array erstellen

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

Das dritte Argument von callbackFn verwenden

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]

map() auf sparse Arrays anwenden

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

map() auf Nicht-Array-Objekten aufrufen

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 ]

map() auf einer NodeList

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

// Wichtig · Fallstricke

Da map ein neues Array erstellt, ist der Aufruf ohne Verwendung des zurückgegebenen Arrays ein Anti-Pattern; verwende stattdessen forEach() oder for...of.

Siehe auch

Array Array.prototype.forEach() Array.from() TypedArray.prototype.map() Map

← Vorheriger Eintrag Array.prototype.lastIndexOf() Nächster Eintrag → Array.prototype.pop()