Wie können wir helfen?
< Zurück
Du bist hier:
Drucken

Name: Array.prototype.map()

Kategorie: Array Helper Methods

JavaScript Version: ECMAScript 5 (Standard ECMA-262 5.1 Edition / June 2011)

Funktion: Die Methode map() iteriert ein Array und erstellt daraus ein neues Array.

Array’s map() method is similar to forEach() in that it invokes a callback function for each element in an array. However, map() returns a new array based on what’s returned from the callback function.

Ausführung & Besonderheiten:

  • map() wird auf ein Array aufgerufen: array.map()
  • map() gibt ein neues Array zurück und verändert das aufgerufene Array nicht
  • Als Argument wird eine Funktion übergeben

Unterstützung: Alle aktuellen Browser, keine Probleme

Syntax:

const altesArray = [Wert1, Wert2, Wert3, ...]

const neuesArray = altesArray.map(function callback(currentValue, index, array]) {
    return element nach neuesArray;
}[, thisArg])

Die Funktion wird für alle Elemente im Array aufgerufen.

currentValue: „Wert des aktuellen Array-Elements“.

Was bedeutet das? in currentValue wird ein beliebiger Name verwendet, in der beim Iterieren durch das Array der jeweils aktuelle Wert geschrieben wird. Dieser kann dann in der Return-Funktion verwendet werden. Ein return currentValue.key_altesArray schreibt die Keys in das neue Array.

Gerade für Einsteiger ist es immer wieder schwer zu verstehen, das der Name für diesen Wert nur benötigt wird, um darauf später zurückgreifen zu können. Sinnvoll ist z.B. „auto“ (wenn das Array Autos heißt) oder „zahl“ (wenn das alte Array aus Zahlen besteht). Letztendlich der Name aber egal und komplett dem Programmierer überlassen.

index (optional): „Der Index des aktuell zu verarbeitenden Elementes in dem Array.“

Der Index muss nur angeben werden, wenn die einzelnen Nummierungen des altesArray in der Funktion verwendet oder ausgegeben werden sollen. Ein sinnvoller Name ist „index“, aber jeder andere Name ist möglich (mit den üblichen Einschränkungen für Variablen-Namen).

array (optional): „Das Array, auf das map aufgerufen wird.“

Da map()  ja ohnehin auf altesArray aufgerufen wird, ist die Verwendung dieses optionalen Parameters nur selten notwendig.

Beispiel:

Wir haben ein Array mit drei Datensätzen, genannt altesArray. Aus diesem Array sollen die einzelnen Daten ausgelesen und in neuer Reihenfolge in neuesArray gespeichert und ausgegeben werden. Die Reihenfolge und das gewünschte Form sind: vorname name, ort.

Code:

const altesArray = [
  {ort: 'Hamburg', name: 'Meier', vorname: 'Klaus'},
  {ort: 'Berlin', name: 'Müller', vorname: 'Max'},
  {ort: 'Kassel', name: 'Schmidt', vorname: 'Stefan'},
];

const neuesArray = altesArray.map(function(daten) {
  return daten.vorname + ' ' + daten.name + ', ' + daten.ort
});

console.log(neuesArray);

Die Ausgabe in der Console sieht nun für neuesArray wie folgt aus:

["Klaus Meier, Hamburg", "Max Müller, Berlin", "Stefan Schmidt, Kassel"]

Die Verwendung des Wertes daten in der Funktion erlaubt es uns, das wir auf die einzelnen Keys des alten Arrays zugreifen können. Das Iterieren durch alle Array-Elemente erfolgt durch map() generell.

Beispiel 2:

Als Erweiterung für unser Beispiel oben möchten wir nun noch den Index speichern und ausgeben. Das gewünschte Format ist: index. vorname nachname, ort.

Dafür müssen wir nur zusätzlich den optionalen Index-Wert in der Funktion benennen und ausgeben.

Code:

const altesArray = [
  {ort: 'Hamburg', name: 'Meier', vorname: 'Klaus'},
  {ort: 'Berlin', name: 'Müller', vorname: 'Max'},
  {ort: 'Kassel', name: 'Schmidt', vorname: 'Stefan'},
];

const neuesArray = altesArray.map(function(daten, index) {
  return index + '. ' + daten.vorname + ' ' + daten.name + ', ' + daten.ort
});

console.log(neuesArray);

Die Ausgabe in der Console sieht nun für neuesArray wie folgt aus:

["0. Klaus Meier, Hamburg", "1. Max Müller, Berlin", "2. Stefan Schmidt, Kassel"]

 Verweise:

MDN web docs zu Array.map(): https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Schlagwörter:
Weiter JavaScript-Onlinedienste
Inhaltsverzeichnis