array.map() – neues Array aus Array-Werten ableiten

array.map() – über Array iterieren und Werte ändern

array.map() läuft über alle Elemente des Arrays, ändert das Original-Array aber nicht, sondern gibt ein neues Array mit geänderten Werten zurück.

             ┌-- Funktion für jedes Element
             │
             │      ┌-- aktuell in Bearbeitung
             │      │
             │      │   Array des aktuellen Elements
             │      │            │
array.map (  ▼      ▼            ▼
        function (value, index, arr), 
        thisValue
)            ▲
             │
    optionaler Wert, der als this 
    übergeben werden kann

Die modernen Browser unterstützen die ECMAScript 5-Methoden für Arrays: array.map(), array.filter(), array.forEach() und array.find(). Diese Methoden enthalten eine Funktion als erstes Argument, die wiederum mit drei Argumenten gefüttert werden kann:

• der aktuelle Wert des Elements,
• optional der Index,
• weil das Array selber ein optionales Argument des Callbacks ist, kann die Callback-Funktion wieder verwendet werden.

Die Callback-Funktion braucht nicht alle drei Argumente – in vielen Fällen reicht der Wert des Array-Elements. Die Anzahl der Elemente des Arrays wird nicht gebraucht, der Index ist optional. Diese Iterationen sind weniger fehleranfällig als das alte for i aus ES1.

const numbers = [4.07, 9.11, 0.5, 25.99];
const newArr = numbers.map(runden); // [4, 9, 1, 26]

function runden (x) {
	return Math.round(x)
}

array.map() – Beispiel: Nettopreis berechnen

map() gibt eine veränderte Kopie des Originals mit derselben Zahl von Elementen zurück. Die Elemente der Kopie sind das Ergebnis der Callback-Funktion (meist etwas Mathe) auf den Elementen des Originals.

array.map ( callback[, thisObject] );

• callback − die Funktion, die das neue Element aus dem alten Element des Arrays erzeugt bzw. berechnet:
  function(value, key, arr)
  value erforderlich: Wert des aktuellen Array-Elements
  key optional: Index des aktuellen Array-Elements
  arr optional: Das Array, zu dem das aktuelle Array-Element gehört
• thisObject − optional – ein Objekt, das als this bei der Ausführung der Callback-Funktion agiert.

Rückgabewert ist das neu erzeugte Array.

MwSt aus allen Elementen eines Arrays heraus rechnen und Nettopreise zurückgeben. map() wird auf Array-Elementen ohne Wert (sparse arrays) nicht ausgeführt.

const priceA = [49.90, 105.20, 12.90, , 17];
const priceB = [7.95, 3.25, 17.2];

function mwst (val, key, arr) {
	return key + " " + (val*100/119).toFixed(2)
}

let exclA = priceA.map (mwst);
console.log (exclA);

let exclB = priceB.map (mwst);
console.log (exclB);

[Log] ["0 41.93", "1 88.40", "2 10.84", 4: "4 14.29"] (5) 
[Log] ["0 6.68", "1 2.73", "2 14.45"] (3)  

Oder nur Werte eines JSON-Arrays zur Icon-Gallerie aufbereiten:

const json = [
{
	"filename": "icon-kaffeemaschine.svg",
	"path": "svg\/icon/",
	"rating": "4",
	"lightroom": "Computer,Icon"
},
{
	"filename": "icon-mikrowelle.svg",
	"path": "svg\/icon/",
	"rating": "3",
	"lightroom": "Icon,Mikrowelle"
}, …
];

let bags = json.map(a => a.path + a.filename);

for (const item of bags) {
	const img = document.createElement ("img");
	img.src = item;
	document.querySelector(".icons").appendChild (img)
}

Einen Wert in einem (JSON) Array von Objekten ändern

array.map() erzeugt bei der Iteration über ein Array ein neues Array vom Original. Dazu prüft map() eine Eigenschaft, um das Zielobjekt zu identifizieren, in dem ein Wert geändert werden soll. Wenn die Bedingung zutrifft, wird ein neues Objekt mit neuen Werten zurück gegeben, ansonsten das Original-Objekt.

const books = [
	{ "titel": "Eine kurze Geschichte von fast allem", "autor": "Bryson, Bill", "jahr": "2003"},
	{ "titel": "Accidental Empires", "autor": "Cringely, Robert X.", "jahr": "1992"},
	{ "titel": "Arm und Reich", "autor": "Diamond, Jared", "jahr": "1997"}
];

const updatedBooks = books.map((book) => {
  if (book.autor === "Diamond, Jared") {
  	// Ersetzt das Jahr mit neuen Wert
    return { ...book, jahr: 2024 }; 
  }
  return book;
});
 
console.log(updatedBooks);

Drei Punkte: spread-Operator wandelt alles, was iterierbar ist, in ein Array um: Strings, Map, Set, kombiniert Objekte und Arrays.

thisObject

Das zweite Argument von array.map() ist ein Verweis. Ohne das optionale Argument thisObject verweist this auf das globale window-Objekt.

Das optionale thisObject-Argument kann z.B. der Verweis auf ein Element sei, in dem die Ergebnisse des kopierten Arrays angezeigt werden.

array.map ( callback[, thisObject] );

const priceA = [49.90, 105.20, 12.90, ,17];
const priceB = [7.95, 3.25, 17.2];

function mwst (val) {
	this.innerHTML += "Netto " + (val*100/119).toFixed(2) + " | incl. MwSt. " + val +  "<br>";
}

document.querySelector (".groupA").onclick = function () {
	const exclA = priceA.map (mwst, document.querySelector (".result"));
}

document.querySelector (".groupB").onclick = function () {
	const exclB = priceB.map (mwst, document.querySelector (".result"));
}

array.map() im Vergleich zu anderen Methoden