# Методы массивов: find, findIndex, filter

[![Generic badge](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)](https://img.shields.io/badge/JavaScript-%D0%B4%D0%BB%D1%8F%20%D1%82%D1%83%D0%BF%D1%8B%D1%85-green.svg)

![](/files/-M8WKoNTgKrXgncH6FRC)

#### **Метод find** <a href="#toc_1" id="toc_1"></a>

Метод `find` позволяет возвращать значение первого элемента, найденного в массиве, который удовлетворяет условию переданному в **callback-функцию**. Callback-функция запускается для каждого элемента в массиве. В случае, если элемент с указанным условием не найден, метод возвращает `undefined`.

Как только метод находит первый элемент удовлетворяющий условию в **callback-функции**, работа метода прекращается.

Этот метод посложнее тех, что рассмотрены ранее. Здесь в аргументах метода нужно передавать функцию. Но в этом ничего страшного или сложного нет. Метод `find` чаще всего используется с `массивом`, элементами которого являются `объекты`.

Пример:

```javascript
const cars = [
    {id: 1, model: 'Ferrari'},
    {id: 2, model: 'Audi'},
    {id: 3, model: 'Toyota'}
];

const audi = cars.find(function(item, index, arr) {
    return item.model === 'Audi';
});

console.log(audi); // { id: 2, model: 'Audi' }
```

В данном примере мы ищем объект в массиве `cars` у которого свойство `model`равно значению `Audi`.

В метод `find` мы передали целую функцию (`callback`). У этой функции `3 аргумента`, 2 из последних используются редко.

Метод `find` последовательно перебирает все элементы массива и для каждого элемента запускает `callback-функцию`, которая должна вернуть `true/false`.

**Первый аргумент** – элемент массива, до которого в данный момент добрался метод `find`.

**Второй аргумент** – индекс этого самого элемента в массиве `cars`.

**Третий аргумент** – весь массив `cars`(т.е. массив по которому пробегает `find`).

Сейчас в реальных проектах чаще всего используются `стрелочные функции` в качестве аргумента метода `find`. Это удобнее и запись чаще всего оказывается намного короче. Тот же пример, но со **стрелочной функцией**. Так же, примите во внимание, что 2-й и 3-й аргументы метода в решении нашей задачи нам не нужны, следовательно, откинем их и получим следующее:

```javascript
const cars = [
    {id: 1, model: 'Ferrari'},
    {id: 2, model: 'Audi'},
    {id: 3, model: 'Toyota'}
];

const audi = cars.find(item => item.model === 'Audi');

console.log(audi); // { id: 2, model: 'Audi' }
```

Запись стала намного короче и читается намного проще. В том случае, если метод `find` пробежал по всем элементам и не обнаружил ни одного элемента удовлетворяющего нашему условию (`item.model === 'Audi'`), то метод вернет значение `undefined`.

#### **Метод findIndex** <a href="#toc_2" id="toc_2"></a>

Метод `findIndex` работает так же, как и метод `find`, за исключением того, что возвращает не сам `элемент`, а его `индекс`.

#### **Метод filter** <a href="#toc_3" id="toc_3"></a>

Данный метод очень сильно похож на метод `find`, за тем исключением, что метод не завершает свою работу после первого найденного элемента, а продолжает ее, пока не пройдет по всему массиву. Из описания несложно догадаться, что метод возвращает массив элементов удовлетворяющих условию в **callback-функции**.

Давайте выберем все автомобили, у которых значение свойство `id` является `четным`:

```javascript
const cars = [
    {id: 1, model: 'Ferrari'},
    {id: 2, model: 'Audi'},
    {id: 3, model: 'Toyota'},
    {id: 4, model: 'Suzuki'}
];

const filterCars = cars.filter(item => item.id % 2 === 0);

filterCars; // [{ id: 2, model: 'Audi' }, { id: 4, \
// model: 'Suzuki' }]
```

Как видишь, у нас получился массив только с теми элементами значения свойства `id`, которые являются `четными`.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://thedvlpr.gitbook.io/javascript-for-dummies/metody-massivov-find-findindex-filter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
