LearnJS

Разница между for и методами массивов в JavaScript

Цикл for и методы массивов решают похожие задачи: помогают пройтись по элементам массива. Разница в том, как мы описываем эту работу.

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

Что сравниваем

Обычный цикл for выглядит так:

let numbers = [1, 2, 3];

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

Метод массива делает перебор внутри себя, а мы передаем ему callback-функцию.

let numbers = [1, 2, 3];

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

Результат одинаковый, но запись устроена по-разному.

Что дает цикл for

for удобен, когда нужно полностью управлять перебором: индексом, шагом, направлением и остановкой цикла.

let numbers = [10, 20, 30, 40];

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

Здесь массив обходится с конца. Для такой задачи обычный цикл читается достаточно понятно.

В for также можно использовать break и continue.

let numbers = [3, 7, 12, 5];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    console.log(numbers[i]);
    break;
  }
}

Что дают методы массивов

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

let numbers = [1, 2, 3];

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

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

По названию map() сразу видно, что мы создаем новый массив на основе старого.

Для разных задач есть разные методы:

  • forEach() - выполнить действие для каждого элемента.
  • map() - создать новый массив с измененными значениями.
  • filter() - оставить только подходящие элементы.
  • find() - найти первый подходящий элемент.
  • some() - проверить, есть ли хотя бы один подходящий элемент.
  • reduce() - собрать одно итоговое значение.

Преобразование массива

Допустим, нужно получить новый массив цен со скидкой.

Через for:

let prices = [100, 200, 300];
let result = [];

for (let i = 0; i < prices.length; i++) {
  result.push(prices[i] * 0.9);
}

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

Через map():

let prices = [100, 200, 300];

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

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

Оба варианта работают. Но если задача именно преобразовать каждый элемент и получить новый массив, map() обычно читается проще.

Фильтрация элементов

Теперь нужно оставить только четные числа.

Через for:

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

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] % 2 === 0) {
    even.push(numbers[i]);
  }
}

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

Через filter():

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

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

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

filter() сразу показывает, что мы отбираем часть элементов.

Остановка перебора

В for можно остановить цикл через break.

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

let foundUser;

for (let i = 0; i < users.length; i++) {
  if (users[i].id === 2) {
    foundUser = users[i];
    break;
  }
}

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

Но для поиска элемента в массиве чаще удобнее использовать find().

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

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

Важно помнить: в forEach() нельзя остановить перебор через break. Если нужна остановка, лучше выбрать for, find() или some(), в зависимости от задачи.

Изменение исходного массива

Цикл for часто используют, когда нужно изменить сам массив.

let numbers = [1, 2, 3];

for (let i = 0; i < numbers.length; i++) {
  numbers[i] = numbers[i] * 2;
}

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

Методы вроде map() и filter() обычно используют для создания нового массива.

let numbers = [1, 2, 3];

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

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

Такой подход часто проще поддерживать: исходные данные остаются без изменений, а результат лежит в новой переменной.

Что со скоростью

В простых учебных и рабочих задачах разница в скорости между for и методами массивов обычно не важна. Чаще стоит выбирать тот вариант, который понятнее показывает намерение кода.

Если массив очень большой или код находится в горячем участке программы, тогда уже можно измерять производительность и выбирать подходящий вариант на основе замеров.

Что выбрать

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

Используйте методы массивов, если задача хорошо совпадает с названием метода: преобразовать через map(), отфильтровать через filter(), найти через find(), проверить через some() или собрать итог через reduce().

Главное не заменять for на метод только ради более современной записи. Если метод делает код понятнее - используйте метод. Если от него логика становится сложнее - обычный цикл будет нормальным решением.

Итого

1. for дает больше контроля над самим процессом перебора.

2. Методы массивов лучше показывают цель операции.

3. Для нового массива часто подходят map() и filter().

4. Для поиска и проверок часто подходят find(), some() и every().

5. Для сложного перебора с ручным управлением обычный for остается хорошим вариантом.