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

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

<p>Die Methode <code><strong>find()</strong></code> gibt den <strong>Wert</strong> des Elements eines Arrays zurück, welches <strong>als erstes</strong> die Bedingung einer bereitgestellten Testfunktion erfüllt. Andernfalls wird {{jsxref("undefined")}} zurückgegeben.</p>

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



<p>Siehe auch die Methode {{jsxref("Array.prototype.findIndex()", "findIndex()")}}, die den <strong>Index</strong> eines gefundenen Elements im Array anstelle seines Werts zurückgibt.</p>

<p>Wenn Sie die Position eines Elements ermitteln oder feststellen müssen, ob ein Element in einem Array vorhanden ist, verwenden Sie {{jsxref("Array.prototype.indexOf()", "indexOf()")}} oder {{jsxref("Array.prototype.includes()", "includes()")}}.</p>

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

<pre class="syntaxbox"><var>arr</var>.find(callback<var>[, thisArg]</var>)</pre>

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

<dl>
 <dt><code>callback</code></dt>
 <dd>Funktion, die auf jedes Element angewendet wird mit drei Argumenten:
 <dl>
  <dt><code>element</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 im Array.</dd>
  <dt><code>array</code> {{optional_inline}}</dt>
  <dd>Das Array, welches mit <code>find()</code> durlaufen 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>Der <strong>Wert</strong> des Elements, welches <strong>als erstes</strong> die Bedingung der bereitgestellten Testfunktion erfüllt. Andernfalls wird {{jsxref("undefined")}} zurückgegeben.</p>

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

<p><code>find()</code> führt die <code>callback</code>-Funktion einmal für jeden Index des Arrays aus, bis ein Index gefunden wird, in dem <code>callback</code> einen {{Glossary("truthy")}}-Wert zurückgibt. Wenn ein solches Element gefunden wird, gibt <code>find()</code> sofort den Wert dieses Elements zurück, {{jsxref("undefined")}}. <code>callback</code> wird für jeden Index des Arrays von <code>0</code> bis <code>length - 1</code> aufgerufen und nicht nur für Indizes, denen Werte zugewiesen wurden. Dies kann bedeuten, dass es für Arrays mit Leerstellen weniger effizient ist als andere Methoden, die nur Indizes durchlaufen, denen ein Wert zugewiesen wurde.</p>

<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> </p>

<p>Falls der Parameter <code>thisArg</code> an <code>find()</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> sieht wird gemäß <a href="https://developer.mozilla.org/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>find()</code> selbst verändert das Array nicht, auf dem es aufgerufen wird.</p>

<p>Der Bereich der von <code>find()</code> verarbeiteten Elemente wird vor dem ersten Aufruf von <code>callback</code> festgelegt. Elemente, die nach Beginn des Aufrufs von <code> find()</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>find()</code> beim Erreichen eines Elements antrifft und dann an <code>callback</code> übergibt. <a href="https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Operators/delete">Gelöschte</a> Elemente werden weiterhin verarbeitet.</p>

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

<h3 id="Ermitteln_eines_Objekts_innerhalb_eines_Arrays_anhand_eines_seiner_Eigenschaften">Ermitteln eines Objekts innerhalb eines Arrays anhand eines seiner Eigenschaften</h3>

<pre class="brush: js">var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function isCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(isCherries));
// { name: 'cherries', quantity: 5 }</pre>

<h4 id="Benutzung_einer_ES2015_Pfeilfunktion">Benutzung einer ES2015 Pfeilfunktion</h4>

<pre class="brush: js">const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

const result = inventory.find( fruit =&gt; fruit.name === 'cherries' );

console.log(result) // { name: 'cherries', quantity: 5 }</pre>

<h3 id="Ermitteln_einer_Primzahl_innerhalb_eines_Arrays">Ermitteln einer Primzahl innerhalb eines Arrays</h3>

<p>Im folgenden Beispiel wird ein Element im Array ermittelt, das eine Primzahl ist (oder {{jsxref("undefined")}} zurückgibt, wenn keine Primzahl vorhanden ist).</p>

<pre class="brush: js">function isPrime(element, index, array) {
  var start = 2;
  while (start &lt;= Math.sqrt(element)) {
    if (element % start++ &lt; 1) {
      return false;
    }
  }
  return element &gt; 1;
}

console.log([4, 6, 8, 12].find(isPrime)); // undefined, not found
console.log([4, 5, 8, 12].find(isPrime)); // 5
</pre>

<p>Das folgende Beispiel zeigt, dass nicht vorhandene und gelöschte Elemente durchlaufen werden und der Wert maßgeblich ist, der beim Erreichen des Elements angetroffen und an <code>callback</code> übergeben wird.</p>

<pre class="brush: js">// Array deklarieren, das an Index 2, 3 und 4 keine Elemente hat
var array = [0,1,,,,5,6];

// Zeige alle Indizes, nicht nur die denen Werte zugewiesen wurden
array.find(function(value, index) {
  console.log('Visited index ' + index + ' with value ' + value);
});

// Zeige alle Indizes, inklusive gelöschter
array.find(function(value, index) {

  // Lösche Element 5 in erstem Durchlauf
  if (index == 0) {
    console.log('Deleting array[5] with value ' + array[5]);
    delete array[5];
  }
  // Element 5 wird weiterhin durchlaufen, obwohl es gelöscht wurde
  console.log('Visited index ' + index + ' with value ' + value);
});
// Erwartete Ausgaben:
// Deleting array[5] with value 5
// Visited index 0 with value 0
// Visited index 1 with value 1
// Visited index 2 with value undefined
// Visited index 3 with value undefined
// Visited index 4 with value undefined
// Visited index 5 with value undefined
// Visited index 6 with value 6
</pre>

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

<p>Diese Methode wurde der ECMAScript 2015-Spezifikation hinzugefügt und ist möglicherweise noch nicht in allen JavaScript-Implementierungen verfügbar. Sie können <code>Array.prototype.find()</code> jedoch mit dem folgenden Snippet nachrüsten:</p>

<pre class="brush: js">// https://tc39.github.io/ecma262/#sec-array.prototype.find
if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function(predicate) {
     // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length &gt;&gt;&gt; 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k &lt; len
      while (k &lt; len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    },
    configurable: true,
    writable: true
  });
}
</pre>

<p>Wenn Sie stark veraltete JavaScript-Engines unterstützen müssen, die {{jsxref("Object.defineProperty()")}} nicht unterstützen, empfiehlt es sich Methoden aus <code>Array.prototype</code> gar nicht mit Polyfills nachzubauen, da es nicht möglich ist sie als nicht-enumerierbar zu kennzeichnen.</p>

<h2 id="Specifikationen">Specifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Initiale Definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-array.prototype.find', 'Array.prototype.find')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

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

<div>


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

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{jsxref("Array.prototype.findIndex()")}}</li>
 <li>{{jsxref("Array.prototype.includes()")}}</li>
 <li>{{jsxref("Array.prototype.filter()")}}</li>
 <li>{{jsxref("Array.prototype.every()")}}</li>
 <li>{{jsxref("Array.prototype.some()")}}</li>
</ul>