Array.find() в JavaScript — перший елемент за умовою
Опис
Метод 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.
Загальний опис
автор: NagarD
- Порада
-
Якщо немає елементів, що відповідають умові, метод
автор: Bondfind()повернеundefined. Тому важливо перевіряти результат методу наundefined, щоб уникнути помилок. - Порада
-
Метод
автор: Bondfind()є універсальним. Він очікує, що значенняthisмає властивістьlengthі властивості із цілими числовими ключами.
Синтаксис
find(callbackFn)
find(callbackFn, thisArg)
Параметри
callbackFn-
Функція, яка виконується для кожного елемента масиву. Вона повинна повертати значення істиності (truthy), щоб показати, що був знайдений відповідний елемент, і значення хибності (falsy) у протилежному випадку.
Функція
callbackFnвикликається з наступними аргументами:element: поточний елемент, який обробляється у масиві;index: індекс поточного елемента, який обробляється у масиві;array: масив, на якому було викликано методfind().
thisArg-
Значення, яке використовується як
автор: Bondthisпід час виконання функціїcallbackFn.
Повернення
element-
Перший елемент у масиві, який задовольняє надану функцію перевірки. В протилежному випадку повертається значення
автор: Bondundefined.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 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 }
Приклад використовує метод find() для знаходження першого елемента в масиві, який є більшим за 10. Результат виводиться на сторінку.
HTML
<header>
<h2 class="title">Знайдення першого елемента більшого за 10</h2>
<p class="description">Цей приклад використовує метод find() для знаходження першого елемента в масиві, який є більшим за 10.</p>
</header>
<main>
<div>
<p>Масив: [5, 12, 8, 130, 44]</p>
<p>Результат: <span id="result"></span></p>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
main div {
padding: 10px;
border: 1px solid #ccc;
margin-bottom: 10px;
}
main p {
margin: 0;
}JS
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
document.getElementById('result').textContent = found;
//# sourceURL=pen.jsЩо повертає find(), коли нічого не знайдено, і чому знайдений 0 виглядає як «не знайдено».
const users = [
{ id: 1, name: 'Оля', score: 0 },
{ id: 2, name: 'Іван', score: 7 },
];
console.log(users.find((u) => u.id === 2).name); // Іван
console.log(users.find((u) => u.id === 99)); // undefined, а не -1 і не null
console.log(users.findIndex((u) => u.id === 99)); // -1
// пастка: саме знайдене значення хибне
const scores = [0, 5, 8];
const zero = scores.find((s) => s === 0);
console.log(zero, Boolean(zero)); // 0 false — if (…) не спрацює
console.log(scores.findIndex((s) => s === 0) !== -1); // true — ось так правильно
// find віддає посилання, а не копію
users.find((u) => u.id === 1).name = 'Ольга';
console.log(users[0].name); // Ольга — масив теж змінивсяВикористання 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
У цьому прикладі ми шукаємо об'єкт у масиві за значенням однієї з його властивостей. Масив 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
Коментарі
Коментарів ще немає — будьте першим!