Метод foreach на языке Javascript

В этом посте описывается, как использовать метод массива forEach() для итерации элементов массива в JavaScript. Кроме того, вы прочтете о лучших практиках forEach (), таких как правильная обработка этого и итерация массивоподобных объектов.

Базовый пример

Метод array.forEach() выполняет итерацию элементов массива в порядке возрастания без изменения массива.

Первый аргумент функции forEach () — это функция обратного вызова, вызываемая для каждого элемента массива. Второй аргумент (необязательный) — это значение этого набора в обратном вызове.
array.forEach(callback [, thisArgument])

Давайте посмотрим, как работает forEach() на практике. В следующем примере массив цветов содержит 3 элемента. Мы будем использовать forEach() для входа в консоль каждого цвета:

const colors = [‘синий’, ‘зелёный’, ‘белый’];

function iterate(item) {
console.log(item);
}

colors.forEach(iterate);
// logs «синий»
// logs «зелёный»
// logs «белый»

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

Таким образом, выполняется 3 вызова функции iterate() :

• iterate(‘синий’)
• итерации(‘зеленый’)
• итерации («белый»)

Вот как, в нескольких словах, работает метод forEach ().

Индекс массива итерационных элементов

array.forEach(callback) выполняет функцию обратного вызова с 3 аргументами:

• текущим итерационным элементом,
• индексом итерационного элемента,
• экземпляром массива.

array.forEach(callback(item [, index [, array]]))

Давайте обратимся к индексу каждого элемента в массиве цветов:

const colors = [‘синий’, ‘зеленый’, ‘белый’];

function iterate(item, index) {
console.log(`${item} has index ${index}`);
}

colors.forEach(iterate);// logs «синий имеет индекс 0»
// logs «зеленый имеет индекс 1»
// logs «белый имеет индекс 2»

Функция iterate() имеет доступ к текущему итерационному элементу и индексу. Обратный вызов выполняется 3 раза:

• iterate(‘синий’, 0)
• iterate(‘зелёный’, 1)
• iterate(‘белый’, 2)

Когда использовать forEach()?

forEach() лучше всего использовать для итерации элементов массива, не нарушая side-effect. Примерами побочных эффектов являются мутация переменной внешней области видимости, операции ввода-вывода (HTTP-запросы), манипуляции DOM и тому подобное.

Например, давайте выберем все входные элементы из DOM и используем forEach() для их очистки:

const inputs = document.querySelectorAll(‘input[type=»текст»]’);

inputs.forEach(function(input) {
input.value = »;
});

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

Если ваш случай требует раннего перерыва в цикле, лучшим вариантом является классический «for» или for..of. Когда итерация массива вычисляет результат без побочных эффектов, лучшей альтернативой является выбор метода массива, такого как:

• array.map()
• array.reduce()
• array.every()
• array.some()

Например, давайте определим, все ли числа массива четны.

Первое решение включает в себя метод forEach() :

letallEven = true;

const numbers = [22, 3, 4, 10];

numbers.forEach(function(number) {
if (number % 2 === 1) {
allEven = false;
//Перерыв цикла здесь
}
});

console.log(allEven); // => false
console.log(allEven); // =>false

Код правильно определяет, все ли числа четные. Проблема заключается в невозможности сломаться после нахождения первого нечетного числа 3.

Для этой ситуации лучшей альтернативой является метод array.every() :

const numbers = [22, 3, 4, 10];

constallEven = numbers.every(function(number) {
returnnumber % 2 === 0;
});

console.log(allEven); // =>false

array.every() не только делает код короче, он также оптимален, потому что прерывает итерацию после нахождения первого нечетного числа.

Вывод

array.forEach(callback) метод является эффективным способом итерации по всем элементам массива. Его первым аргументом является функция обратного вызова, которая вызывается для каждого элемента в массиве с 3 аргументами: item, index и сам массив.

forEach() полезен для итерации по всем элементам массива, не создавая при этом побочные эффекты. В противном случае присмотритесь к альтернативному методу массива.