Array.prototype.map()

Probieren Sie es aus

const array = [1, 4, 9, 16];

// Pass a function to map
const 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 fr jedes Element im Array ausgefhrt wird. Der Rckgabewert wird als einzelnes Element im neuen Array hinzugefgt. Die Funktion wird mit den folgenden Argumenten aufgerufen:

element

Das aktuelle Element, das gerade im Array verarbeitet wird.

index

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

array

Das Array, auf dem map() aufgerufen wurde.

thisArg Optional

Ein Wert, der als this beim Ausfhren von callbackFn verwendet wird. Siehe iterative Methoden.

Rckgabewert

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

Beschreibung

Die map() Methode ist eine iterative Methode. Sie ruft die bereitgestellte callbackFn Funktion einmal fr jedes Element in einem Array auf und erstellt aus den Ergebnissen ein neues Array. Lesen Sie den Abschnitt ber iterative Methoden fr mehr Informationen darber, wie diese Methoden im Allgemeinen funktionieren.

callbackFn wird nur fr Array-Indizes aufgerufen, denen Werte zugewiesen sind. Sie wird nicht fr leere Slots in sparse arrays aufgerufen.

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

Da map ein neues Array erstellt, wird ein Aufruf ohne Verwendung des zurckgegebenen Arrays als Anti-Pattern angesehen; verwenden Sie stattdessen forEach oder for...of.

Beispiele

Mapping eines Zahlenarrays auf 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 enthlt.

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]

Verwenden von map, um Objekte in einem Array neu zu formatieren

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

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

Verwenden von parseInt() mit map()

Es ist blich, den Callback mit einem Argument zu verwenden (das durchlaufene Element). Bestimmte Funktionen werden auch hufig mit einem Argument verwendet, obwohl sie zustzliche optionale Argumente nehmen. Diese Gewohnheiten knnen zu verwirrenden Verhaltensweisen fhren. Betrachten Sie:

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

Whrend man [1, 2, 3] erwarten knnte, ist das tatschliche Ergebnis [1, NaN, NaN].

parseInt wird hufig mit einem Argument verwendet, nimmt jedoch zwei. Das erste ist ein Ausdruck und das zweite ist die Basis (radix); an die Callback-Funktion Array.prototype.map werden 3 Argumente bergeben: das Element, der Index und das Array. Das dritte Argument wird von parseInt ignoriert aber nicht das zweite! Dies ist die Quelle mglicher Verwirrung.

Hier ist ein prgnantes Beispiel fr die 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 lsen, definieren Sie eine andere Funktion, die nur ein Argument nimmt:

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

Sie knnen auch die Number 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]

Siehe Ein JavaScript optionales Argumentproblem von Allen Wirfs-Brock fr weitere Diskussionen.

Gemapptes Array enthlt undefined

Wenn undefined oder nichts zurckgegeben wird, enthlt das resultierende Array undefined. Wenn Sie stattdessen das Element lschen mchten, verketten Sie eine filter() Methode oder verwenden Sie die flatMap() Methode und geben Sie ein leeres Array zurck, um die Lschung anzuzeigen.

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 Nebeneffekten

Der Callback 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 Kopiermethoden am besten mit reinen Funktionen verwendet werden. In diesem Fall knnen wir whlen, 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 Ntzliche, was map() macht, ist, Nebeneffekte zu verursachen.

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

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

Wie zuvor erwhnt, ist dies ein Anti-Pattern. Wenn Sie den Rckgabewert von map() nicht verwenden, verwenden Sie forEach() oder eine for...of Schleife stattdessen.

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

Oder, wenn Sie stattdessen ein neues Array erstellen mchten:

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

Verwenden des dritten Arguments von callbackFn

Das array Argument ist ntzlich, wenn Sie auf ein anderes Element im Array zugreifen mchten, insbesondere wenn Sie keine vorhandene Variable haben, die auf das Array verweist. Das folgende Beispiel verwendet zuerst filter(), um die positiven Werte zu extrahieren, und dann map(), um ein neues Array zu erstellen, wobei 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]

Das array Argument ist nicht das Array, das gerade erstellt wird es gibt keine Mglichkeit, auf das Array zuzugreifen, das aus der Callback-Funktion heraus erstellt wird.

Verwenden von map() mit Sparse Arrays

Ein Sparse Array bleibt nach einem map() Aufruf ein Sparse Array. Die Indizes der leeren Slots bleiben im zurckgegebenen Array leer und die Callback-Funktion wird auf ihnen nicht aufgerufen.

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

Die map() Methode liest die length Eigenschaft von this und greift dann auf jede Eigenschaft zu, deren Schlssel 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 durch querySelectorAll() gesammelt wurden, um ein Array zu erstellen, das die Werte aller ausgewhlten option Elemente enthlt. Da querySelectorAll() eine NodeList zurckgibt, die ein array-hnliches Objekt ohne die map() Methode ist, verwenden wir Array.prototype.map.call(), wobei wir elems als den this Wert und den Callback als das zweite Argument bergeben.

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

Sie knnen auch Array.from() verwenden, um elems in ein Array zu transformieren und dann auf die map() Methode zuzugreifen.

Spezifikationen

Browser-Kompatibilitt

Siehe auch

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