path: root/files/de/web/javascript/reference/global_objects/array/map/index.html

---
title: Array.prototype.map()
slug: Web/JavaScript/Reference/Global_Objects/Array/map
tags:
  - Array
  - ECMAScript 5
  - JavaScript
  - Method
  - Prototype
  - Reference
  - polyfill
translation_of: Web/JavaScript/Reference/Global_Objects/Array/map
---
<div>{{JSRef}}</div>

<p><span class="seoSummary">Die <strong><code>map()</code></strong> (engl. <em>abbilden</em>) Methode<strong> </strong>wendet auf jedes Element des Arrays die bereitgestellte Funktion an und gibt das Ergebnis in einem neuen Array zurück.</span></p>

<div>{{EmbedInteractiveExample("pages/js/array-map.html")}}</div>



<h2 id="Syntax" name="Syntax">Syntax</h2>

<pre class="syntaxbox notranslate"><var>var new_array = arr</var>.map(function <var>callback(currentValue[, index[, array]]) {
    </var>// Zurückgegebenes Element für new_array<var>
}</var>[, <var>thisArg</var>])</pre>

<h3 id="Parameters" name="Parameters">Parameter</h3>

<dl>
 <dt><code>callback</code></dt>
 <dd>Funktion, die ein Element für das neue Array erstellt und drei Argumente entgegennimmt:</dd>
 <dd>
 <dl>
  <dt><code>currentValue</code></dt>
  <dd>Das aktuelle Element, das im Array verarbeitet wird.</dd>
  <dt><code>index</code>{{optional_inline}}</dt>
  <dd>Der Index des aktuellen Elements, das im Array verarbeitet wird.</dd>
  <dt><code>array</code>{{optional_inline}}</dt>
  <dd>Das Array, welches mit <code>map()</code> durchlaufen wird.</dd>
 </dl>
 </dd>
 <dt><code>thisArg</code>{{optional_inline}}</dt>
 <dd>Wert, der als <code>this</code> verwendet wird, wenn <code>callback</code> ausgeführt wird.</dd>
</dl>

<h3 id="Rückgabewert">Rückgabewert</h3>

<p>Ein neues Array, von dem jedes Element das Ergebnis der Callback-Funktion ist.</p>

<h2 id="Description" name="Description">Beschreibung</h2>

<p><code>map()</code> ruft eine bereitgestellte <code>callback</code> Funktion <strong>für jedes Element</strong> in einem Array der Reihe nach auf und erstellt aus den Ergebnissen ein neues Array. <code>callback</code> wird nur für Indizes des Arrays aufgerufen, denen Werte zugewiesen wurden, einschließlich {{jsxref("undefined")}}. Es wird nicht für fehlende Elemente des Arrays aufgerufen (d. h. Indizes, die noch nie festgelegt, gelöscht oder denen noch kein Wert zugewiesen wurde).</p>

<p><code>map()</code> zu benutzen, wenn das davon neu erstellte Array nicht benutzt wird, gilt als <a href="https://de.wikipedia.org/wiki/Anti-Pattern">Anti-Pattern</a>. Verwenden Sie stattdessen {{jsxref("Array/forEach", "forEach()")}} oder {{jsxref("statements/for...of", "for...of")}}.</p>

<p>Sie sollten <code>map()</code> nicht verwenden, wenn:</p>

<ul>
 <li>Sie das Array, das zurückgegeben wird, nicht benötigen und/oder</li>
 <li>Ihr Callback keinen Wert zurückgibt.</li>
</ul>

<p><code>callback</code> wird mit drei Argumenten aufgerufen:</p>

<ol>
 <li>Der Wert des Elements</li>
 <li>Der Index des Elements</li>
 <li>Das Array-Objekt, das durchlaufen wird</li>
</ol>

<p>Falls der Parameter <code>thisArg</code> an <code>map()</code> übergeben wird, wird er als Wert für <code>this</code> innerhalb von <code>callback</code> verwendet. Andernfalls hat <code>this</code> den Wert {{jsxref("undefined")}}. Welchen Wert <code>callback</code> letztendlich in <code>this</code> steht, wird gemäß <a href="/de/docs/Web/JavaScript/Reference/Operators/this">der üblichen Regeln bestimmt, nach denen <code>this</code> für eine Funktion ermittelt wird</a>.</p>

<p><code>map()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird (das aufgerufene <code>callback</code> kann jedoch Änderungen vornehmen).</p>

<p>Der Bereich der von <code>map()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code>map()</code> an das Array angehängt werden, werden von <code>callback</code> nicht berücksichtigt. Wenn vorhandene Elemente des Arrays geändert werden, ist der Wert maßgeblich, den <code>map()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. Nachfolgende Elemente, die nach Beginn eines Durchlaufs von <code>map()</code> gelöscht werden, bevor sie eingelesen werden konnten, werden nicht mehr berücksichtigt.</p>

<p>Aufgrund des in der Spezifikation definierten Algorithmus haben Arrays mit vielen leeren Elementen auch nach einem Aufruf von <code>map()</code> immer noch leere Elemente, wobei die leeren Elemente an ihren Indizes verbleiben.</p>

<h2 id="Examples" name="Examples">Beispiele</h2>

<h3 id="Example_Mapping_an_array_of_numbers_to_an_array_of_square_roots" name="Example:_Mapping_an_array_of_numbers_to_an_array_of_square_roots">Erstellen eines Arrays mit Quadratwurzeln aus einem Array mit Zahlen</h3>

<p>Der folgende Code verwendet ein Array mit Zahlen und erstellt ein neues Array, das die Quadratwurzeln der Zahlen im ersten Array enthält.</p>

<pre class="brush: js notranslate">var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots ist jetzt [1, 2, 3]
// numbers ist immer noch [1, 4, 9]
</pre>

<h3 id="Objekte_innerhalb_eines_Arrays_mit_map_neu_formatieren">Objekte innerhalb eines Arrays mit <code>map()</code> neu formatieren</h3>

<p>Der folgende Code nimmt ein Array mit Objekten und erstellt daraus ein neues Array, in dem die Objekte neu formatiert wurden.</p>

<pre class="brush: js notranslate">var kvArray = [{key: 1, value: 10},
               {key: 2, value: 20},
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(obj =&gt; {
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});
// reformattedArray ist jetzt [{1: 10}, {2: 20}, {3: 30}],

// kvArray ist immer noch:
// [{key: 1, value: 10},
//  {key: 2, value: 20},
//  {key: 3, value: 30}]</pre>

<h3 id="Example_Mapping_an_array_of_numbers_using_a_function_containing_an_argument" name="Example:_Mapping_an_array_of_numbers_using_a_function_containing_an_argument">Erstellen eines Arrays mit Zahlen mithilfe einer Funktion, die ein Argument entgegennimmt</h3>

<p>Der folgende Code zeigt, wie <code>map()</code> im Zusammenhang mit einer Funktion arbeitet, welche ein Argument entgegennimmt. Dem Argument wird automatisch der Wert des aktuellen Elements des Arrays zugewiesen, das von <code>map()</code> durchlaufen wird.</p>

<pre class="brush: js notranslate">var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles ist jetzt [2, 8, 18]
// numbers ist immer noch [1, 4, 9]</pre>

<h3 id="Example_using_map_generically" name="Example:_using_map_generically">Generischer Einsatz von <code>map()</code></h3>

<p>In diesem Beispiel wird veranschaulicht, wie <code>map()</code> auf einen {{jsxref("Global_Objects/String", "String")}} angewendet wird, um ein Array mit Bytes zu erhalten, welche den jewiligen Zeichenwerten im <a href="https://de.wikipedia.org/wiki/American_Standard_Code_for_Information_Interchange#ASCII-Tabelle">ASCII-Zeichensatz</a> entsprechen:</p>

<pre class="brush: js notranslate">var map = Array.prototype.map;
var a = map.call('Hello World', function(x) {
  return x.charCodeAt(0);
});
// a now equals [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
</pre>

<h3 id="Example_using_map_generically_querySelectorAll" name="Example:_using_map_generically_querySelectorAll">Generischer Einsatz von <code>map()</code> zusammen mit <code>querySelectorAll()</code></h3>

<p>In diesem Beispiel wird gezeigt, wie Sie eine Sammlung von Objekten durchlaufen, die von {{domxref("document.querySelectorAll()", "querySelectorAll()")}} erfasst wurde. Dies liegt daran, dass {{domxref("document.querySelectorAll()", "querySelectorAll()")}} eine {{domxref("NodeList")}} zurückgibt, bei der es sich um eine Auflistung von Objekten handelt. In diesem Fall geben wir alle Werte der ausgewählten Optionen auf dem Bildschirm zurück:</p>

<pre class="brush: js notranslate">var elems = document.querySelectorAll('select option:checked');
var values = Array.prototype.map.call(elems, function(obj) {
  return obj.value;
});
</pre>

<p>Einfacher wäre die Methode {{jsxref("Array.from()")}}.</p>

<h3 id="Example_Tricky_use_case" name="Example:_Tricky_use_case">Verzwickter Anwendungsfall</h3>

<p><a href="http://www.wirfs-brock.com/allen/posts/166">(Inspiriert von diesem Blogpost)</a></p>

<p>Üblicherweise wird die <code>callback</code> Funktion mit nur einem Argument benutzt. Das trifft auch für bestimmte andere Funktionen zu obwohl diese weitere optionale Argumente akzeptieren. Dies kann jedoch zu verwirrendem Verhalten führen.</p>

<p>Betrachten wir folgendes Beispiel:</p>

<pre class="brush: js notranslate">['1', '2', '3'].map(parseInt);

// Man würde erwarten [1, 2, 3]
// Tatsächlich ist das Ergebnis aber [1, NaN, NaN]

// parseInt wird oft nur mit einem Argument aufgerufen, akzeptiert aber zwei.
// Der erste ist ein Ausdruck und der zweite ist die Basis.

// Array.prototype.map übergibt 3 Argumente an die Callback-Funktion:
// das Element, den Index, das Array

// Das dritte Argument wird von parseInt ignoriert, das zweite jedoch nicht,
// was verwirrend sein kann. Siehe den Blogpost für weitere Details

// Falls der Link nicht funktioniert:
// ein kurzes Beispiel der Durchläufe:
// parseInt(string, radix) -&gt; map(parseInt(value, index))
// erster Durchlauf  (Index ist 0): parseInt('1', 0) // führt zu parseInt('1', 0) -&gt; 1
// zweiter Durchlauf (Index ist 1): parseInt('2', 1) // führt zu parseInt('2', 1) -&gt; NaN
// dritter Durchlauf (Index ist 2): parseInt('3', 2) // führt zu parseInt('3', 2) -&gt; NaN

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// Tatsächliches Ergebnis ist ein Array mit Nummern (wie erwartet)

// Wie oben, jedoch unter Verwendung der kurzen Funktionssyntax mit Pfeil
['1', '2', '3'].map( str =&gt; parseInt(str) );

// Eine einfachere Methode, um selbiges zu erreichen, während Fallstricke vermieden werden:
['1', '2', '3'].map(Number); // [1, 2, 3]

// Im Gegensatz zu `parseInt` werden jedoch auch Fließkommazahlen oder (aufgelöste) Exponentialnotationen zurückgegeben:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]</pre>

<p>Eine alternative Ausgabe der <code>map()</code> Methode, welche mit {{jsxref("Global_Objects/parseInt", "parseInt()")}} als Parameter aufgerufen wird, funktioniert wie folgt:</p>

<pre class="brush: js notranslate">var xs = ['10', '10', '10'];

xs = xs.map(parseInt);

console.log(xs);
// Das tatsächliche Ergebnis von [ 10, NaN, 2 ] kann aufgrund der obigen Beschreibung unerwartet sein</pre>

<h2 id="Polyfill" name="Polyfill">Polyfill</h2>

<p><code>map()</code> wurde dem ECMA-262-Standard in der 5. Auflage hinzugefügt. Als solches ist es möglicherweise nicht in allen Implementierungen des Standards enthalten. Sie können dies umgehen, indem Sie den folgenden Code am Anfang Ihrer Skripte einfügen, um die Verwendung von <code>map()</code> in Implementierungen zu ermöglichen, die es nicht nativ unterstützen. Dieser Dieser Algorithmus entspricht dem in der 5. Auflage von ECMA-262 angegebenen Algorithmus, vorausgesetzt {{jsxref("Object")}}, {{jsxref("TypeError")}} und {{jsxref("Array")}} haben ihre ursprünglichen Werte und <code>callback.call()</code> wird mit dem ursprünglichen Wert von {{jsxref("Function.prototype.call()")}} ausgewertet.</p>

<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: http://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {

  Array.prototype.map = function(callback, thisArg) {

    var T, A, k;

    if (this == null) {
      throw new TypeError(' this is null or not defined');
    }

    // 1. Let O be the result of calling ToObject passing the |this|
    //    value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get internal
    //    method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length &gt;&gt;&gt; 0;

    // 4. If IsCallable(callback) is false, throw a TypeError exception.
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let T be undefined.
    if (arguments.length &gt; 1) {
      T = thisArg;
    }

    // 6. Let A be a new array created as if by the expression new Array(len)
    //    where Array is the standard built-in constructor with that name and
    //    len is the value of len.
    A = new Array(len);

    // 7. Let k be 0
    k = 0;

    // 8. Repeat, while k &lt; len
    while (k &lt; len) {

      var kValue, mappedValue;

      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the HasProperty internal
      //    method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal
        //    method of O with argument Pk.
        kValue = O[k];

        // ii. Let mappedValue be the result of calling the Call internal
        //     method of callback with T as the this value and argument
        //     list containing kValue, k, and O.
        mappedValue = callback.call(T, kValue, k, O);

        // iii. Call the DefineOwnProperty internal method of A with arguments
        // Pk, Property Descriptor
        // { Value: mappedValue,
        //   Writable: true,
        //   Enumerable: true,
        //   Configurable: true },
        // and false.

        // In browsers that support Object.defineProperty, use the following:
        // Object.defineProperty(A, k, {
        //   value: mappedValue,
        //   writable: true,
        //   enumerable: true,
        //   configurable: true
        // });

        // For best browser support, use the following:
        A[k] = mappedValue;
      }
      // d. Increase k by 1.
      k++;
    }

    // 9. return A
    return A;
  };
}
</pre>

<h2 id="Specifications" name="Specifications">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-15.4.4.19', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Initiale Definition. Implementiert in JavaScript 1.6.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.map', 'Array.prototype.map')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Browserkompatibilität</h2>

<div>


<p>{{Compat("javascript.builtins.Array.map")}}</p>
</div>

<h2 id="See_also" name="See_also">Siehe auch</h2>

<ul>
 <li>{{jsxref("Array.prototype.forEach()")}}</li>
 <li>{{jsxref("Map")}}-Objekt</li>
 <li>{{jsxref("Array.from()")}}</li>
</ul>