Für alle Elemente eines Arrays einen neuen Wert berechnen ist eine Routinearbeit für eine for-Iteration. Eine for-Schleife greift auf jedes Element des Arrays zu und führt eine Aktion durch, aber die Zahl der Array-Element muss bekannt sein.
Heute unterstützen die meisten Browser die ECMAScript 5-Methoden für Arrays: forEach, map und filter. Diese Methoden enthalten eine Funktion als erstes Argument, die wiederum mit drei Argumenten notiert werden kann:
- der aktuelle Wert des Elements,
- sein Index,
- das Array selber.
Die Funktion braucht nicht alle drei Argumente – in vielen Fällen reicht schon der Wert des Array-Elements.
array.map()
array.map ( callback[, thisObject] );
- callback − die Funktion, die das neue Element aus dem alten Element des Arrays erzeugt:
function(value, key, arr) ist erforderlich
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 − Ein Objekt, das als this bei der Ausführung der Callback-Funktion agiert.
Rückgabewert ist das neu erzeugte Array.
let a = ["Ab", "An", "Auf", "Aus", "Voll", "Vor", "Durch", "Ein"]; let result = a.map ( function (value, key, array) { return key + " " + value + "zug"; }); console.log(result);
[LOG] 0 "0 Abzug" 1 "1 Anzug" 2 "2 Aufzug" 3 "3 Auszug" 4 "4 Vollzug" 5 "5 Vorzug" 6 "6 Durchzug" 7 "7 Einzug"
Oder nur Werte eines JSON-Arrays in einem Array speichern:
const json = [ { "filename": "pipette.svg", "path": "svg\/icon", "rating": "4", "urgency": "0", "lightroom": "Computer,Icon" }, { "filename": "haushalt-kaffeemaschine.svg", "path": "svg\/icon", "rating": "0", "urgency": "0", "lightroom": "Icon,Haushalt" }, { "filename": "pseudo-hover.svg", "path": "svg\/icon", "rating": "4", "urgency": "0", "lightroom": "UI-Element,Button" }]; let bags = json.map(a => a.lightroom); console.log (bags);
liefert
["Computer,Icon", "Icon,Haushalt", "UI-Element,Button"] (3)
array.map Beispiel: Nettopreis berechnen
MwSt aus allen Elementen eines Arrays heraus rechnen und Nettopreise zurückgeben.
const price = [49.90, 105.20, 12.90, 29.99, 219]; let excl = price.map (function (v, k, a) { return (v*100/119).toFixed(2); }); console.log (excl);
[["41.93", "88.40", "10.84", "25.20", "184.03"]]
array.map() und sparse Arrays
array.map() auf Arrays mit Löchern
const holes = [49.90, , 12.90, , 219]; let h = holes.map (function (v, k, a) { return (v*100/119).toFixed(2); }); console.log (h);
array.map() auf Arrays mit null / undefined
map() wird auf Array-Elementen ohne Wert nicht ausgeführt.
const holes = [49.90, , 12.90, , 219]; let h = holes.map (function (v, k, a) { return (v*100/119).toFixed(2); }); console.log (h);
["41.93", 2: "10.84", 4: "184.03"]
Die Elemente eines Arrays von Objekten mit array.map() zu einem Array zusammenführen:
let team = [ {vorname : "Katrin", nachname: "Schmitz"}, {vorname : "Kurt", nachname: "Haynberg"}, {vorname : "Emma", nachname: "Watson"} ]; document.querySelector("#mapresult").innerHTML = team.map(function getFullName(elem) { let teammember = [elem.vorname,elem.nachname].join(" "); return teammember; });
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).
let color = document.querySelectorAll (".colors div");
let colors = Array.from(color);
let result = colors.map ( function (value) {
let rgb = value.innerHTML.replace("rgb(","").replace(")","");
let felder = rgb.split(",");
let hex = rgbToHex(felder[0], felder[1], felder[2]);
value.setAttribute("style","background-color:#" + hex);
return hex;
});
console.log(result);
Browser-Support für every(), map()
Alle modernen Browser, IE ab Version 9.