Разница между forEach и циклом в javascript

Мне интересно: существует ли существенная разница между циклами forEach и for в JavaScript.

Рассмотрим следующий пример:

var myArray = [1,2,3,4];

myArray.forEach(function(value) {
  console.log(value);
});

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

Вот часть моего исследования:

  • Производительность. Согласно JsPerf: forEach немного медленнее, чем для цикла.
  • Юзабилити. Мы не можем разорвать/вернуть из обратного вызова в случае цикла forEach.

Например: вы хотите узнать, является ли число простым или нет. Я думаю, что использование цикла for намного проще, чем использование цикла forEach для этого.

  1. Считывание: Использование цикла for делает код более читаемым, чем наличие forEach в коде.
  2. Совместимость с браузером: forEach не поддерживается в IE < 9 Таким образом, мы вводим некоторую меру в нашем коде.

Мои вопросы:

  • В чем преимущества forEach over for loop?
  • В каких сценариях более предпочтительным является forEach.
  • Почему даже он появился в JavaScript? Почему это вообще нужно?

Ответы

Ответ 1

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

Таким образом, в принципе forEach является сокращенным методом для прецедента "передает каждый элемент Array в function". Вот общий пример, где я думаю, что Array.forEach весьма полезен по сравнению с циклом for:

// shortcut for document.querySelectorAll
function $$(expr, con) {
    return Array.prototype.slice.call((con || document).querySelectorAll(expr));
}

// hide an element
function hide(el) {
    el.style.display = 'none';
}

// hide all divs via forEach
$$('div').forEach(hide); 

// hide all divs via for
for (var divs = $$('div'), i = 0; i < divs.length; i++) {
    hide(divs[i])
}

Как вы можете видеть, читаемость инструкции forEach улучшена по сравнению с циклом for.

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

Ответ 2

В цикле forEach вы не контролируете, как вы перебираете массив. Классический цикл for позволяет вам выбрать алгоритм итерации по вашему желанию (i++; i--; i+=2*i и т.д.).

Однако цикл forEach намного проще в использовании - вам не нужно возиться со всеми подсчетами i, находя объект array[i] - JS делает это для вас.

Ответ 3

>> sparseArray = [1, 2, , 4];

>> sparseArray.forEach(console.log, console);
1 0 [1, 2, 3: 4] 
2 1 [1, 2, 3: 4] 
4 3 [1, 2, 3: 4] 

>> for(var i = 0; i < sparseArray.length; ++i) { console.log(sparseArray[i]) };
1
2
undefined
4

forEach является недавним дополнением к тому, чтобы в javascript можно было использовать экспрессивный стиль восприятия списков. Здесь вы можете видеть, что forEach пропускает элементы, которые никогда не были установлены, но лучшее, что вы можете сделать с циклом for, - это проверить на undefined или null, оба из которых можно установить как значения и выбрать на forEach. Если вы не ожидаете пропущенных значений, forEach эквивалентен циклам for, но обратите внимание, что вы не можете остановить раньше, для чего вам нужно every.

Ответ 4

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

Для циклы

  1. Это один из оригинальных способов перебора массивов
  2. Это быстрее
  3. Вы могли бы break из этого использовать это ключевое слово
  4. На мой взгляд, он в основном используется для расчетов с целыми числами (числами)
  5. Параметры: (iterator, counter, incrementor)

ForEach Loop

  1. Это новый способ с меньшим количеством кода для перебора массивов
  2. Легче читать
  3. Позволяет хранить переменные в области видимости
  4. Снижение вероятности случайных ошибок с помощью i <= >= etc.....
  5. Параметры: (iterator, Index of item, entire array)

https://alligator.io/js/foreach-vs-for-loops/