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

JavaScript простым языком

Метод 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, которые являются четными.