Find: примеры (JAVASCRIPT)

Примеры использования

Поиск числа больше 10:

const numbers = [5, 12, 8, 130, 44];
const found = numbers.find(num => num > 10);
console.log(found);

// Результат: 12

Поиск объекта по свойству:

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 }

Использование индекса и массива в колбэке:

const arr = ['a', 'b', 'c', 'd'];
const result = arr.find((elem, idx, array) => {
  console.log(`Индекс: ${idx}, Массив: ${array}`);
  return elem === 'c';
});

// Результат: 'c'
// В консоль будет выведено:
// Индекс: 0, Массив: a,b,c,d
// Индекс: 1, Массив: a,b,c,d
// Индекс: 2, Массив: a,b,c,d

Использование контекста (thisArg):

function isPrime(element) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > this.threshold;
}
const nums = [4, 6, 8, 12];
const firstPrime = nums.find(isPrime, { threshold: 7 });
console.log(firstPrime);

// Результат: 12 (первое число больше 7, которое является простым в данном контексте)
// 4, 6, 8 не простые и/или меньше порога.

Похожие методы в JavaScript

findIndex() – работает аналогично, но возвращает индекс найденного элемента или -1. Полезен, когда нужна позиция элемента, а не сам элемент.
Пример:

['a', 'b', 'c'].findIndex(x => x === 'b'); // 1

filter() – возвращает новый массив со всеми элементами, прошедшими проверку. Используется, когда необходимо получить несколько элементов.
Пример:

[1, 2, 3, 4].filter(x => x % 2 === 0); // [2, 4]

some() – проверяет, удовлетворяет ли хотя бы один элемент условию, возвращает булево значение. Подходит для проверки существования элемента без его получения.
Пример:

[1, 2, 3].some(x => x > 2); // true

indexOf() / includes() – ищут строгое равенство по значению (не по условию). Быстрее для примитивов, но не работают с объектами или сложными условиями.
Пример:

[10, 20, 30].includes(20); // true

Типичные ошибки

1. Колбэк не возвращает булево значение. Функция find ожидает true/false. Возврат другого значения может привести к неочевидным результатам из-за приведения типов.

const arr = [0, 1, 2];
const badResult = arr.find(elem => elem); // elem приводится к булевому значению
console.log(badResult);

// Результат: 1 (0 - false, 1 - true, поиск остановился)

2. Попытка мутировать массив в процессе обхода. Это может привести к непредсказуемому поведению.

const arr = [1, 2, 3];
const found = arr.find((num, index, array) => {
  array.pop(); // Удаляем элементы
  return num === 3;
});
console.log(found); // undefined, массив изменился во время итерации

3. Ожидание, что find вернет индекс или все подходящие элементы. Метод возвращает только первый подходящий элемент или undefined.

const nums = [2, 4, 6, 8];
const allEvens = nums.find(n => n % 2 === 0);
console.log(allEvens); // 2, а не [2,4,6,8]

4. Неучет возвращаемого значения undefined при отсутствии элемента. Это может привести к ошибкам при попытке обратиться к свойствам несуществующего объекта.

const users = [{id: 1}, {id: 2}];
const user = users.find(u => u.id === 3);
console.log(user.name); // TypeError: Cannot read property 'name' of undefined

Изменения в последних версиях

Метод find() был стандартизирован в спецификации ECMAScript 2015 (ES6). С тех пор его синтаксис и поведение остаются стабильными.

В ECMAScript 2023 появился похожий метод findLast() (и findLastIndex()), который выполняет поиск с конца массива. Это полезное дополнение для случаев, когда нужен последний подходящий элемент, но оно не изменяет саму функцию find.

const array = [{value: 1}, {value: 2}, {value: 3}, {value: 2}];
const lastFound = array.findLast(item => item.value === 2);
console.log(lastFound); // {value: 2} (последний элемент с value=2)

// Результат: {value: 2}

Расширенные примеры

Поиск в массиве объектов с деструктуризацией параметров:

const people = [
  { id: 1, name: 'Anna', age: 25 },
  { id: 2, name: 'Boris', age: 30 },
  { id: 3, name: 'Anna', age: 28 }
];
const person = people.find(({ name, age }) => name === 'Anna' && age > 26);
console.log(person);

// Результат: { id: 3, name: 'Anna', age: 28 }

Использование find для поиска по регулярному выражению:

const words = ['apple', 'banana', 'grape', 'apricot'];
const firstWithAp = words.find(word => /^ap/.test(word));
console.log(firstWithAp); // apple

Поиск с кэшированием результатов тяжелой проверочной функции:

const dataSet = [/* большой массив сложных объектов */];
const cache = new Map();
function expensiveCheck(item) {
  if (!cache.has(item.id)) {
    // Дорогая операция (например, вычисление)
    const result = item.value % 17 === 0;
    cache.set(item.id, result);
  }
  return cache.get(item.id);
}
const foundItem = dataSet.find(item => expensiveCheck(item));

Поиск в разреженном массиве:

const sparseArray = [1, , , , 5, , 7];
// find пропускает пустые слоты (невыполняет для них колбэк)
const firstDefined = sparseArray.find(elem => elem > 3);
console.log(firstDefined); // 5

// Результат: 5

Комбинация find с другими методами для сложного условия:

const posts = [
  { id: 1, tags: ['js', 'node'], likes: 10 },
  { id: 2, tags: ['python'], likes: 5 },
  { id: 3, tags: ['js', 'react'], likes: 15 }
];
// Найти первый пост с тегом 'js' и более 12 лайков
const topJsPost = posts.find(post => 
  post.tags.includes('js') && post.likes > 12
);
console.log(topJsPost.id); // 3

Аналоги в других языках

PHP: Функция array_search() возвращает ключ по значению. Для поиска по условию используют current(array_filter(...)).

$array = [10, 20, 30];
$key = array_search(20, $array); // 1

// По условию:
$result = current(array_filter($array, fn($val) => $val > 15));
echo $result; // 20

// Результат: 20

Python: Используют встроенную функцию next() с генератором или метод filter().

numbers = [5, 12, 8, 130, 44]
found = next((x for x in numbers if x > 10), None)
print(found)  # 12

# Результат: 12

MySQL: Оператор WHERE в запросе SELECT выполняет поиск по условию. Возвращает строки, а не один элемент.

SELECT * FROM users WHERE age > 25 LIMIT 1;

C++ (STL): Алгоритм std::find_if из библиотеки . Принимает итераторы и предикат.

#include 
#include 
std::vector vec{5, 12, 8, 130, 44};
auto it = std::find_if(vec.begin(), vec.end(), [](int i){ return i > 10; });
// *it == 12