array.map() neues Array ableiten

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.