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

Über Arrays iterieren und ändern: array.map ()

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.

             +-- 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 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)
}

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.