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

array.map() – über Arrays 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: map (), filter (), forEach () und 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) {
	let img = document.createElement ("img");
	img.src = item;
	document.querySelector(".icons").appendChild (img)
}

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

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 und array.from

Manipulationen des DOM beruhen häufig auf nodeLists, die z.B. mit querySelectorAll erzeugt werden. querySelectorAll gibt kein Array zurück, sondern eben nur eine nodeList – eine Sammlung von Elementen. Ab ECMAScript 6 wandelt Array.from() eine nodeList direkt in ein Array um (alle modernen Browser, aber nicht IE11).

<div class="flex colors">
	<div>rgb(255,0,0)</div>
	<div>rgb(139,0,0)</div>
	…
</div>

const colors = document.querySelectorAll (".colors div");
const colorarr = Array.from(colors);

const result = colorarr.map ( function (item) {
	item.setAttribute("style","background-color:" + item.innerHTML);
	return item;
});

Und noch einen Schritt weiter: Der neuen Generation von schrittweisen for-Loops – for-of – reicht die nodeList. for of iteriert über alles, was irgendwie einen Index hat.