LearnJS

Перебор массивов в JavaScript

Методы перебора массивов позволяют пройтись по элементам массива и выполнить для каждого элемента нужное действие. В отличие от обычного цикла, здесь мы чаще описываем не сам процесс перебора, а то, что нужно сделать с элементом.

let numbers = [1, 2, 3];

let doubled = numbers.map((number) => number * 2);

console.log(doubled); // [2, 4, 6]

В этом примере map() сам проходит по массиву, а мы передаем ему функцию, которая умножает каждый элемент на два.

Что такое методы перебора массивов

У массива есть встроенные методы, которые вызывают функцию для элементов массива. Чаще всего используются forEach(), map(), filter(), reduce(), some(), every(), find() и findIndex().

Все они перебирают массив, но результат у них разный.

let numbers = [1, 2, 3, 4];

numbers.forEach((number) => console.log(number));

let doubled = numbers.map((number) => number * 2);
let even = numbers.filter((number) => number % 2 === 0);

forEach() просто выполняет действие, map() создает новый массив, а filter() отбирает подходящие элементы.

Callback-функция

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

let names = ['Анна', 'Олег', 'Мария'];

names.forEach((name) => {
  console.log(name);
});

Первый параметр callback-функции - текущий элемент массива. Вторым параметром можно получить индекс, третьим - сам массив.

let names = ['Анна', 'Олег', 'Мария'];

names.forEach((name, index) => {
  console.log(index + ': ' + name);
});

forEach()

forEach() используют, когда нужно выполнить действие для каждого элемента и не нужно получать новый массив.

let prices = [100, 200, 300];

prices.forEach((price) => {
  console.log(price);
});

Метод удобен для вывода в консоль, изменения внешнего значения или вызова другой функции.

let prices = [100, 200, 300];
let sum = 0;

prices.forEach((price) => {
  sum += price;
});

console.log(sum); // 600

map()

map() создает новый массив на основе старого. Количество элементов обычно остается таким же, но значения меняются.

let prices = [100, 200, 300];

let withDiscount = prices.map((price) => price * 0.9);

console.log(withDiscount); // [90, 180, 270]

Исходный массив при этом не меняется.

console.log(prices); // [100, 200, 300]

map() хорошо подходит, когда нужно преобразовать элементы: числа умножить, строки привести к нужному виду, объекты заменить на другие объекты.

filter()

filter() создает новый массив только из тех элементов, которые проходят проверку.

let numbers = [1, 2, 3, 4, 5, 6];

let even = numbers.filter((number) => number % 2 === 0);

console.log(even); // [2, 4, 6]

Если функция возвращает true, элемент попадает в новый массив. Если false - пропускается.

let users = [
  { name: 'Анна', active: true },
  { name: 'Олег', active: false },
  { name: 'Мария', active: true },
];

let activeUsers = users.filter((user) => user.active);

console.log(activeUsers);

reduce()

reduce() нужен, когда из массива нужно получить одно итоговое значение: сумму, объект, строку или другой результат.

let prices = [100, 200, 300];

let sum = prices.reduce((total, price) => {
  return total + price;
}, 0);

console.log(sum); // 600

Первый параметр callback-функции - накопленное значение, второй - текущий элемент. Значение 0 в конце - начальное значение для total.

Для простых задач reduce() может выглядеть тяжелее, чем обычный цикл или forEach(). Его стоит использовать там, где действительно нужен итоговый результат из всего массива.

some() и every()

some() проверяет, есть ли хотя бы один подходящий элемент.

let numbers = [3, 7, 12];

let hasBigNumber = numbers.some((number) => number > 10);

console.log(hasBigNumber); // true

every() проверяет, подходят ли все элементы.

let scores = [80, 90, 75];

let allPassed = scores.every((score) => score >= 60);

console.log(allPassed); // true

Оба метода возвращают true или false.

find() и findIndex()

find() возвращает первый элемент, который подходит под условие.

let users = [
  { id: 1, name: 'Анна' },
  { id: 2, name: 'Олег' },
  { id: 3, name: 'Мария' },
];

let user = users.find((user) => user.id === 2);

console.log(user); // { id: 2, name: 'Олег' }

findIndex() работает похоже, но возвращает индекс найденного элемента.

let index = users.findIndex((user) => user.id === 2);

console.log(index); // 1

Если элемент не найден, find() вернет undefined, а findIndex() вернет -1.

Что выбрать

Если нужно просто выполнить действие для каждого элемента, подойдет forEach().

Если нужно получить новый массив такой же длины, используйте map().

Если нужно оставить только часть элементов, используйте filter().

Если нужно получить одно итоговое значение, используйте reduce().

Если нужен ответ «есть ли подходящий элемент», используйте some().

Если нужно проверить все элементы, используйте every().

Если нужно найти сам элемент или его индекс, используйте find() или findIndex().

Итого

Методы перебора массивов помогают писать код короче и понятнее, когда задача хорошо подходит под конкретный метод.

  • forEach() выполняет действие для каждого элемента.
  • map() возвращает новый массив с измененными элементами.
  • filter() возвращает новый массив с подходящими элементами.
  • reduce() собирает одно итоговое значение.
  • some() и every() возвращают true или false.
  • find() и findIndex() ищут элемент или его индекс.