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

Метод find

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

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

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

Пример:

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-ий аргументы метода в решении нашей задачи нам не нужны, следственно, откинем их. Получим:

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

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

Метод filter

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

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

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 которых является четным.