LearnJS

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

Перебрать массив - значит пройтись по его элементам один за другим. На каждом шаге можно получить текущий элемент и выполнить с ним нужное действие: вывести в консоль, проверить условие, посчитать сумму или собрать новый массив.

let languages = ['HTML', 'CSS', 'JavaScript'];

for (let language of languages) {
  console.log(language);
}

Результат:

HTML
CSS
JavaScript

Что значит перебрать массив

У каждого элемента массива есть индекс. Первый элемент имеет индекс 0, второй - 1, третий - 2 и так далее.

let fruits = ['яблоко', 'банан', 'груша'];

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);

Результат:

яблоко
банан
груша

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

Перебор через for

Обычный цикл for удобен, когда нужен индекс элемента.

let fruits = ['яблоко', 'банан', 'груша'];

for (let i = 0; i < fruits.length; i++) {
  console.log(i + ': ' + fruits[i]);
}

Результат:

0: яблоко
1: банан
2: груша

fruits.length возвращает длину массива. Пока i меньше длины массива, цикл продолжает работу.

fruits[i] получает элемент по текущему индексу.

Через for можно пройти массив и в обратном порядке.

let fruits = ['яблоко', 'банан', 'груша'];

for (let i = fruits.length - 1; i >= 0; i--) {
  console.log(fruits[i]);
}

Результат:

груша
банан
яблоко

Перебор через for…of

Если индекс не нужен, обычно проще использовать for…of.

let fruits = ['яблоко', 'банан', 'груша'];

for (let fruit of fruits) {
  console.log(fruit);
}

На каждой итерации в переменную fruit попадает очередной элемент массива.

Такой код легче читать, когда нужно просто пройтись по значениям.

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

for (let price of prices) {
  sum += price;
}

console.log(sum);

Результат:

650

В этом примере мы перебрали все цены и сложили их в переменную sum.

Индекс и значение через entries()

Иногда хочется использовать for…of, но при этом получить индекс элемента. Для этого у массива есть метод entries().

let fruits = ['яблоко', 'банан', 'груша'];

for (let [index, fruit] of fruits.entries()) {
  console.log(index + ': ' + fruit);
}

Результат:

0: яблоко
1: банан
2: груша

entries() возвращает пары: индекс и значение. Запись [index, fruit] сразу раскладывает эту пару по двум переменным.

Перебор через forEach()

forEach() - это метод массива, который вызывает функцию для каждого элемента.

let fruits = ['яблоко', 'банан', 'груша'];

fruits.forEach((fruit) => {
  console.log(fruit);
});

В функцию можно передать не только элемент, но и индекс.

let fruits = ['яблоко', 'банан', 'груша'];

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

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

break и continue

В циклах for и for…of можно использовать break и continue.

break помогает остановить перебор, когда нужный элемент найден.

let numbers = [4, 8, 15, 16, 23, 42];

for (let number of numbers) {
  if (number > 20) {
    console.log(number);
    break;
  }
}

Результат:

23

continue помогает пропустить часть элементов.

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

for (let number of numbers) {
  if (number % 2 !== 0) {
    continue;
  }

  console.log(number);
}

Результат:

2
4
6

В forEach() инструкции break и continue не работают. Если нужно остановить перебор раньше времени, лучше выбрать обычный for или for…of.

Что выбрать

Если нужен индекс или перебор в обратном порядке, используйте for.

Если нужны только значения массива, чаще всего подойдет for…of.

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

Для создания нового массива, фильтрации или преобразования значений часто используют методы map(), filter() и другие методы массивов. Но для первого понимания перебора достаточно хорошо разобраться с for, for…of и forEach().

Итого

1. Массив можно перебрать через for, for…of или forEach().

2. for удобен, когда нужен индекс элемента или нестандартный порядок перебора.

3. for…of удобен, когда нужны только значения массива.

4. entries() позволяет получить индекс и значение в цикле for…of.

5. В forEach() нельзя использовать break и continue.