array.map() neues Array ableiten

Javascript array.map() neues Array mit Änderungen auf jedem Element erzeugen, z. B. Mwst und Netto berechnen

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:

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.

Javascript array.map() array map