Javascript array.map() | mediaevent.de

neues Array mit Änderungen auf jedem Element erzeugen

Javascript array.map () erzeugt ein neues Array mit Elementen, die von der Callback-Funktion aus jedem Element des alten Arrays abgeleitet wurden – z.B. ein neues Array mit der Quadratwurzel aller Elemente des Original-Arrays.

map() ändert das Original-Array nicht, sondern gibt ein neues Array zurück.

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"

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).

rgb(255,0,0)

rgb(139,0,0)

rgb(240,128,128)

rgb(178,34,34)

rgb(165,42,42)

rgb(205,92,92)

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.