Die find() Methode gibt den Wert des ersten Elementes eines Arrays zurück, das die mitgelieferte Testfunktion erfüllt. Ansonsten wird undefined zurückgegeben.

Siehe auch die findIndex() Methode, die den Index eines gefundenen Elements anstatt dessen Wert zurück gibt.

Wenn es ausreicht die Position eines Elementes in einem Array zu finden oder zu wissen, ob ein Element existiert, dann benutze die Funktion Array.prototype.indexOf() oder Array.prototype.includes().

Syntax

arr.find(callback[, thisArg])

Parameter

callback
Funktion, die für jeden Wert des Arrays ausgeführt wird. Sie nimmt drei Argumente:
element
Das aktuell verarbeitete Element des Arrays.
index Optional
Der Index des aktuell verarbeiteten Elements des Arrays.
array Optional
Das Array, von dem find aufgerufen wurde.
thisArg Optional
Objekt, welches beim Ausführen der callback Funktion als this verwendet wird.

Rückgabewert

Ein Wert aus dem Array, wenn ein Element den Test besteht, andernfalls undefined.

Beschreibung

Die find Methode führt für jedes Element des Arrays die callback Funktion aus, bis ein Element gefunden wurde, für das die callback Funktion true zurückliefert. Wenn ein solches Element gefunden wurde, gibt find den Wert dieses Elements sofort zurück. Andernfalls liefert find undefined zurück. Die callback Funktion wird für alle Indizes des Arrays von 0 bis length -1 aufgerufen und wird auch für nicht initialisierte Elemente aufgefufen. Das bedeitet, dass diese Methode für Arrays mit vielen nicht initialisierten Werten weniger effizient ist, als andere Methoden, die nur initialisierte Werte behandeln.

Die callback Funktion wird mit drei Argumente aufgerufen: Das aktuelle element, der Index des Elements im Array und das Array, das durchlaufen wird.

Wenn der thisArg Parameter in find angegeben ist, wird es als this für jeden Aufruf der callback Funktion verwendet. Wenn es nicht angegeben wurde, wird undefined verwendet.

find verändert das ursprüngliche Array nicht.

Die Anzahl der zu durchlaufenden Elemente in der find Methode werden vor dem ersten Aufruf der callback Funktion ermittelt. Elemente, die nach dem find Aufruf hinzugefügt wurden, werden nicht von der callback Funktion behandelt. Wenn ein noch nicht durchlaufenes Element des Arrays von einer callback Funktion geändert wird, wird dieser geänderte Wert von der callback Funktion verarbeitet. Die callback Funktion bekommt immer den Wert, der zum Zeitpunkt des Besuchens eines Elementes gesetzt ist. Gelöschte Elemente werden nicht angeschaut.

Beispiele

Finden eines Objektes in einem Array anhand seiner Properties

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 }

Einsatz von ES2015 Arrow-Funktionen

const inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

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

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

Finden einer Primzahl in einem Array

In folgendem Beispiel wird ein Element des Arrays gefunden, wenn es eine Primzahl ist. undefined wird zurückgegeben wenn keine Primzahl vorhanden ist.

function isPrime(element, index, array) {
  var start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

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

Das folgende Beispiel zeigt, wie nicht existierende oder gelöschte Elemente gefunden werden und dass ihr Wert der der callback Funktion übergeben wird, der Wert zum jeweiligen Zeitpunkt des Aufrufs ist.

// Declare array with no element at index 2, 3 and 4
var array = [0,1,,,,5,6];

// Shows all indexes, not just those that have been assigned values
array.find(function(value, index) {
  console.log('Visited index ' + index + ' with value ' + value); 
});

// Shows all indexes, including deleted
array.find(function(value, index) {

  // Delete element 5 on first iteration
  if (index == 0) {
    console.log('Deleting a[5] with value ' + array[5]);
    delete array[5];
  }
  // Element 5 is still visited even though deleted
  console.log('Visited index ' + index + ' with value ' + value); 
});
// Erwartete ausgabe:
// 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

Polyfill

Diese Methode wurde in der EMCAScript 2015 Spezifikation hinzugefügt und ist nicht in allen JavaScript Implementationen vorhanden. Jedoch kann Array.prototype.find mit folgendem Polyfill erstellt werden:

// 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 >>> 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 < len
      while (k < 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
  });
}

Sollten Sie wirklich veraltete JavaScript Engines unterstützen müssen, die ihrerseits Object.defineProperty nicht unterstützen, ist es ratsam, die Array.prototype Methode gar nicht mit dem Polyfill zu erweitern, da man diese nicht unabzählbar machen kann.

Spezifikationen

Spezifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'Array.prototype.find' in dieser Spezifikation.
Standard Initiale Definition.
ECMAScript Latest Draft (ECMA-262)
Die Definition von 'Array.prototype.find' in dieser Spezifikation.
Entwurf  

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidiOS SafariSamsung InternetNode.js
Grundlegende UnterstützungChrome Vollständige Unterstützung 45Edge Vollständige Unterstützung JaFirefox Vollständige Unterstützung 25IE Keine Unterstützung NeinOpera Vollständige Unterstützung 32Safari Vollständige Unterstützung 8WebView Android Vollständige Unterstützung JaChrome Android Vollständige Unterstützung JaEdge Mobile Vollständige Unterstützung JaFirefox Android Vollständige Unterstützung 4Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 8Samsung Internet Android Vollständige Unterstützung Janodejs Vollständige Unterstützung 4.0.0
Vollständige Unterstützung 4.0.0
Vollständige Unterstützung 0.12
Deaktiviert
Deaktiviert From version 0.12: this feature is behind the --harmony runtime flag.

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Mitwirkende an dieser Seite: schlagi123, mrkosim, psychotammi, mreu, db6edr, oliver-j, MelanieVeigl
Zuletzt aktualisiert von: schlagi123,