Array.prototype.find()


Metoda find() zwraca pierwszy element tablicy, kt贸ry spe艂nia warunek podanej funkcji testuj膮cej.
  • Je艣li potrzebujesz indeksu znalezionego elementu w tablicy, u偶yj findIndex().
  • Jesli potrzebujesz indeksu warto艣ci, u偶yj Array.prototype.indexOf(). (Jest to podobne do findIndex(), ale sprawdza ka偶dy element tablicy pod k膮tem r贸wno艣ci z zadan膮 warto艣ci膮, zamiast u偶ywa膰 funkcji testuj膮cej.)
  • Je艣li chcesz sprawdzi膰, czy warto艣膰 istnieje w tablicy, u偶yj Array.prototype.includes(). Tutaj tak偶e sprawdzana jest r贸wno艣膰 elementu z zadan膮 warto艣ci膮 zamiast u偶ywania funkcji testuj膮cej.
  • Je艣li chcesz znale藕膰 dowolny element, kt贸ry spe艂nia warunek funkcji testuj膮cej, u偶yj Array.prototype.some().

Sk艂adnia

arr.find(callback[, thisArg])

Parametry

callback
Funkcja do wykonania przy ka偶dym elemencie tablicy, przyjmuj膮ca trzy warto艣ci:
element
Element obecnie przetwarzany przez funkcj臋.
index
Indeks obecnie przetwarzanego elementu.
array
Tablica, na kt贸rej wywo艂ano funkcj臋 find.
thisArg
Opcjonalny. Obiekt, kt贸ry b臋dzie si臋 znajdowa艂 pod this w czasie wykonywania funkcji callback.

Zwracana warto艣膰

Warto艣膰 pierwszego elementu w tablicy, spe艂niaj膮cego warunek funkcji testuj膮cej.
W przeciwnym wypadku: undefined.

Opis

Metoda find wywo艂uje funkcj臋 callback raz dla ka偶dego indeksu tablicy, dop贸ki nie znajdzie takiego elementu, dla kt贸rego callback zwraca warto艣膰 true. W贸wczas find natychmiast zwraca warto艣膰 tego elementu. W przeciwnym razie, gdy 偶aden z element贸w nie spe艂ni warunk贸w funkcji testuj膮cej, find zwraca undefined.

callback jest wywo艂ywany dla ka偶dego indeksu tablicy, nie tylko tych z przypisanymi warto艣ciami. Oznacza to, 偶e mo偶e to by膰 mniej efektywne w przypadku tablic rzadkich, w por贸wnaniu z metodami, kt贸re odwiedzaj膮 jedynie indeksy z przypisanymi warto艣ciami.

Je艣li parametr thisArgjest przekazany do find, b臋dzie u偶yty jako warto艣膰 this w ka偶dym wywo艂aniu callback. Je艣li parametr ten nie jest przekazany, u偶ywana jest warto艣膰 undefined.

Metoda find nie modyfikuje tablicy, na kt贸rej jest wywo艂ywana, ale mo偶e to robi膰 funkcja przekazana do callback. Je艣li tak si臋 stanie, elementy przetwarzane przez find s膮 ustawiane przed pierwszym wywo艂aniem funkcji callback. Zatem:

  • callback nie odwiedzi 偶adnych element贸w dodanych do tablicy po rozpocz臋ciu wywow艂ania find.
  • Je艣li istniej膮cy, jeszcze nieodwiedzony element tablicy jest zmieniony przez callback, jego warto艣膰 przekazana do callback b臋dzie warto艣ci膮 w momencie, w kt贸rym find odwiedza indeks tego elementu.
  • Elementy usuni臋te dalej s膮 odwiedzane.

Polyfill

Metoda ta zosta艂a dodana do specyfikacji ECMAScript 2015 i mo偶e nie by膰 jeszcze dost臋pna we wszystkich implementacjach j臋zyka JavaScript.  Niemniej jednak, mo偶esz u偶y膰 polyfillArray.prototype.find z poni偶szym fragmentem kodu:

// 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 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 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
  });
}

Je艣li potrzebujesz wspiera膰 naprawd臋 przestarza艂e silniki JavaScript, kt贸re nie wspieraj膮t Object.defineProperty, najlepiej w og贸le nie u偶ywa膰 polyfill z Array.prototype, gdy偶 nie da si臋 go uczyni膰 niewyliczeniowym.

Przyk艂ady

Wyszukiwanie obiektu w tablicy na podstawie jednej z jego w艂asno艣ci

const 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 }

U偶ycie funkcji strza艂kowej i destrukturyzacja

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

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

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

Wyszukiwanie liczby pierwszej w tablicy

Poni偶szy przyk艂adowy kod znajduje element tablicy b臋d膮cy liczb膮 pierwsz膮 (lub zwraca undefined je艣li w tablicy nie ma liczby pierwszej):

function czyPierwsza(element, indeks, tablica) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].find(czyPierwsza)); // undefined, nie znaleziono
console.log([4, 5, 8, 12].find(czyPierwsza)); // 5

Poni偶szy przyk艂ad pokazuje, 偶e nieistniej膮ce i usuni臋te elementy s膮 odwiedzane, oraz 偶e warto艣膰 przekazana do callback jest ich warto艣ci膮, kiedy s膮 odwiedzane:

// Zadeklaruj tablic臋 bez element贸w przy indeksach 2, 3 i 4
const array = [0,1,,,,5,6];

// Pokazuje wszystkie indeksy, nie tylko te z przypisanymi warto艣ciami
array.find(function(value, index) {
  console.log('Odwiedzono indeks ', index, ' z warto艣ci膮 ', value);
});

// Pokazuje wszystkie indeksy, w艂膮czaj膮c usuni臋te
array.find(function(value, index) {
  // Usu艅 element 5 w pierwszej iteracji
  if (index === 0) {
    console.log('Usuwanie array[5] z warto艣ci膮 ', array[5]);
    delete array[5];
  }
  // Element 5 jest wci膮偶 odwiedzany, cho膰 zosta艂 usuni臋ty
  console.log('Odwiedzono indeks ', index, ' z warto艣ci膮 ', value);
});
// Oczekiwane wyj艣cie:
// Usuwanie array[5] z warto艣ci膮 5
// Odwiedzono indeks 0 z warto艣ci膮 0
// Odwiedzono indeks 1 z warto艣ci膮 1
// Odwiedzono indeks 2 z warto艣ci膮 undefined
// Odwiedzono indeks 3 z warto艣ci膮 undefined
// Odwiedzono indeks 4 z warto艣ci膮 undefined
// Odwiedzono indeks 5 z warto艣ci膮 undefined
// Odwiedzono indeks 6 z warto艣ci膮 6

Specyfikacje

Wsparcie przegl膮darek

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 45.0 25.0 (25.0) No support No support 7.1
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support No support No support 25.0 (25.0) No support No support iOS 8

Zobacz te偶