JS метод Array.find()

Опис

Метод find() допомагає швидко та ефективно визначити елемент, що відповідає певному критерію. Його основна мета — знаходження того елемента, який задовольняє умову, вказану в переданій callback-функції. Цей метод працює на основі ітераційного процесу. Тобто він по черзі перебирає всі елементи масиву, і якщо поточний елемент відповідає заданій умові (функція повертає true), то цей елемент і буде результатом виконання методу find().

Варто відзначити, що find() не вносить жодних змін у масив, на якому його викликали. Проте, callbackFn може модифікувати цей масив. Ось деякі важливі аспекти:

callbackFn не буде взаємодіяти з елементами, доданими після запуску find().
Якщо деякі індекси вже оброблені, зміни в них не призведуть до повторної взаємодії з callbackFn.
Якщо елемент масиву змінено під час виконання callbackFn, передане значення буде відображати його поточний стан. Елементи, які були видалені, опрацьовуються як undefined.

Приклад:

let fruits = ["apple", "banana", "cherry", "date"];
let findCherry = (fruit) => fruit === "cherry";
let result = fruits.find(findCherry);
console.log(result); // повертає "cherry", бо цей елемент відповідає умові.

У даному прикладі ми шукаємо елемент cherry у масиві fruits.

Порада:	Якщо немає елементів, що відповідають умові, метод `find()` поверне `undefined`. Тому важливо перевіряти результат методу на `undefined`, щоб уникнути помилок.
Порада:	Метод `find()` є універсальним. Він очікує, що значення `this` має властивість `length` і властивості із цілими числовими ключами.

Синтаксис

find(callbackFn)
find(callbackFn, thisArg)

Параметри

*callbackFn

Функція, яка виконується для кожного елемента масиву. Вона повинна повертати значення істиності (truthy), щоб показати, що був знайдений відповідний елемент, і значення хибності (falsy) у протилежному випадку.

Функція callbackFn викликається з наступними аргументами:

element: поточний елемент, який обробляється у масиві;
index: індекс поточного елемента, який обробляється у масиві;
array: масив, на якому було викликано метод find().

thisArg

Значення, яке використовується як this під час виконання функції callbackFn.

Return

element: Перший елемент у масиві, який задовольняє надану функцію перевірки. В протилежному випадку повертається значення undefined.

Переглядачі

Переглядач
	45	25	8	32	12

Переглядач
	45	45	4	8

Переглядач
	4.0.0	1.0

Приклади

Приклад використовує метод find() для знаходження першого елемента в масиві, який є більшим за 10. Результат виводиться на сторінку.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/GRwvgNj">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У прикладі ми використовуємо стрілкову функцію та деструктуризацію для знаходження об'єкта в масиві.

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 }

У цьому прикладі ми шукаємо об'єкт у масиві за значенням однієї з його властивостей. Масив inventory містить об'єкти, що представляють різні товари. Функція isCherries використовується як умова пошуку, щоб знайти об'єкт, в якому властивість name має значення "cherries". Результатом буде об'єкт, що представляє вишні з кількістю 5.

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 }

Приклад знаходить елемент у масиві, який є простим числом (або повертає undefined, якщо просте число не знайдено).

function isPrime(element, index, array) {
  let 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, не знайдено
console.log([4, 5, 8, 12].find(isPrime)); // 5

Використання find() на розріджених масивах.

// Оголошення масиву без елементів на індексах 2, 3 та 4
const array = [0, 1, , , , 5, 6];

// Показує всі індекси, а не лише ті, у яких є присвоєні значення
array.find((value, index) => {
  console.log("Відвідано індекс", index, "зі значенням", value);
});
// Відвідано індекс 0 зі значенням 0
// Відвідано індекс 1 зі значенням 1
// Відвідано індекс 2 зі значенням undefined
// Відвідано індекс 3 зі значенням undefined
// Відвідано індекс 4 зі значенням undefined
// Відвідано індекс 5 зі значенням 5
// Відвідано індекс 6 зі значенням 6

// Показує всі індекси, включаючи видалені
array.find((value, index) => {
  // Видаляємо елемент 5 під час першої ітерації
  if (index === 0) {
    console.log("Видаляємо array[5] зі значенням", array[5]);
    delete array[5];
  }
  // Елемент 5 все ще відвідується, навіть після видалення
  console.log("Відвідано індекс", index, "зі значенням", value);
});
// Видаляємо array[5] зі значенням 5
// Відвідано індекс 0 зі значенням 0
// Відвідано індекс 1 зі значенням 1
// Відвідано індекс 2 зі значенням undefined
// Відвідано індекс 3 зі значенням undefined
// Відвідано індекс 4 зі значенням undefined
// Відвідано індекс 5 зі значенням undefined
// Відвідано індекс 6 зі значенням 6

Метод find() зчитує властивість length цього об'єкта та далі отримує доступ до кожної властивості, ключ якої є невід'ємним цілим числом, меншим за length.

const arrayLike = {
  length: 3,
  "-1": 0.1, // ігнорується find(), оскільки -1 < 0
  0: 2,
  1: 7.3,
  2: 4,
};
console.log(Array.prototype.find.call(arrayLike, (x) => !Number.isInteger(x)));
// 7.3

JS довідник

JavaScript

Наповнення JS розділу