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, щоб уникнути помилок.

автор: Bond правити

Порада

Метод find() є універсальним. Він очікує, що значення this має властивість length і властивості із цілими числовими ключами.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

find(callbackFn)
find(callbackFn, thisArg)

Параметри

callbackFn

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

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

• element: поточний елемент, який обробляється у масиві;

• index: індекс поточного елемента, який обробляється у масиві;

• array: масив, на якому було викликано метод find().

автор: Bond

правити

thisArg

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

автор: Bond

правити

Повернення

element

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

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

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

Підтримка: мобільні переглядачі

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

Підтримка: серверні переглядачі

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

Приклади

+ запропонувати свій приклад у пісочниці

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 }

// Оголошення масиву без елементів на індексах 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

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

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 }

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