Когда у нас есть массив данных, нам часто требуется пройтись по всем элементам массива и выполнить какое-то действие с элементами массива. Мы можем сделать это, используя цикл for, но метод массива JavaScript forEach() — это новый способ сделать это.

Как работает метод forEach()

Метод JavaScript array forEach() перебирает элементы массива и выполняет функцию для каждого элемента. Синтаксис:

array.forEach(callback, thisArg);

Обратный вызов — это функция, которая выполняется для каждого элемента массива, а thisArg — это значение, используемое как this в обратном вызове.

Пример:

let foods = ['bread', 'rice', 'meat', 'pizza'];
foods.forEach(function(food) {
    console.log(food);
});

Вывод

bread
rice
meat
pizza

Функция обратного вызова принимает 3 аргумента.

  • Текущий элемент, для которого вызывается функция (обязательно)
  • Индекс элемента в исходном массиве (необязательно)
  • Исходный массив (необязательно)

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

let arr1 = [20, 30, 15, 30, 40, 15];
let unique = [];
arr1.forEach((item, index, array) => {
    if(index === array.indexOf(item)) {
        unique.push(item);
    }
});
console.log(unique);  // [20, 30, 15, 40]

Здесь, в функции обратного вызова, мы сопоставляем индекс текущего элемента с индексом элемента в исходном массиве, используя метод indexOf().

Метод indexOf() возвращает индекс первого вхождения совпадающего элемента в массиве. Это означает, что если один и тот же элемент присутствует в массиве более одного раза, то indexOf() вернет индекс первого элемента слева в массиве.

Таким образом, если индекс текущего элемента и индекс, возвращаемый indexOf(), не совпадают, то этот элемент существует в массиве более одного раза. Только уникальные элементы будут помещены в уникальный массив.

Массив с пустыми значениями

Метод forEach() не вызывает функцию обратного вызова для пустых значений.

let arr = [20, 30];
arr[5] = 50;
console.log(arr); // [20, 30, empty × 3, 50]
arr.forEach(function(item) {
    console.log(item);
});

Вывод

20
30
50

Здесь функция обратного вызова не вызывалась для всех трех пустых значений.

Завершение/пропуск цикла forEach

В отличие от цикла for, мы не можем использовать break или continue в методе forEach(). Чтобы завершить forEach(), нам нужно пройти через исключение внутри него. Точно так же нам нужно использовать оператор return, чтобы пропустить текущую итерацию вместо ключевого слова continue.

let arr1 = [20, -45, 30, 15, 30, 40, 15];
arr1.forEach((item, index) => {
    if(item < 0) {
        return;
    }
    if(index == 3) {
        throw new Error('Terminating forEach');
    }
   console.log(item); 
});

Вывод

20
30
Uncaught Error: Terminating forEach

Если вам необходимо использовать break или continue в цикле, тогда используйте for циклов (for, for…of).

Пример использования thisArg

В этом примере мы будем фильтровать четные и нечетные числа из массива и устанавливать их в соответствующие свойства объекта.

function filterNumbers() {
    this.even = [];
    this.odd = [];
}
let numbers = [20, 83, 15, 58, 49, 62];
const obj = new filterNumbers();
numbers.forEach(function(item) {
    if(item % 2 === 0) this.even.push(item);
    else this.odd.push(item);
}, obj)
console.log(obj.even); // [20, 58, 62]
console.log(obj.odd); // [83, 15, 49]

Здесь экземпляр filterNumbers передается forEach для использования в качестве this внутри обратного вызова.

Связанный

Спасибо, что уделили время☺️
Другие блоги по веб-разработке можно найти на jscurious.com.