Web-разработка

Алгоритм JavaScript: Array.forEach()

14.09.2021

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

let flowers = ["peony", "rose", "sunflower", "linaria"]

flowers.forEach(callbackFunc);

function callbackFunc(name, idx, arr){
  console.log(name, idx, arr)
}

forEach: функция обратного вызова

Здесь мы имеем дело с массивом flowers. Каждый элемент в массиве представляет собой строки с названиями цветов.

Напишем теперь функцию обратного вызова с аргументами по умолчанию each element (каждый элемент), index (индекс) и original array (исходный массив). С этой функцией можно делать что угодно. Мы регистрируем ее в журнале консоли. 2 случай:

ArrayName.forEach((eachEle, index, array) => console.log(eachEle))

Затем метод forEach выполнит функцию обратного вызова:

flowers.forEach(function callbackFunc(name, idx, arr){console.log(name, idx, arr)});

forEach: встроенная функция обратного вызова

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

3 случай:

flowers.forEach((name, idx, arr) => {
  console.log(name, idx, arr)
});

forEach: стрелочная функция

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

peony 0 [ 'peony', 'rose', 'sunflower', 'linaria' ]
rose 1 [ 'peony', 'rose', 'sunflower', 'linaria' ]
sunflower 2 [ 'peony', 'rose', 'sunflower', 'linaria' ]
linaria 3 [ 'peony', 'rose', 'sunflower', 'linaria' ]

Попрактикуемся с более сложными алгоритмами.

There are multiple flowers in the garden. Which flowers are there only two of in the garden?

В саду несколько цветков. Каких цветков в саду всего два?

let flowers = ["peony", "rose", "rose", "rose", "sunflower", "linaria", "peony" ]

let count = {};

flowers.forEach(name => {
  if(count[name]){
    count[name]++
  } else {
    count[name] = 1
  }
})

for(let keys in count){
  if(count[keys] === 2){
    console.log(keys) 
    }
}

Здесь у нас структура массива, состоящего из строк с названиями цветов. Перебираем массив, используя метод forEach. Для каждого названия цветка увеличиваем счетчик, если этот цветок существует в объекте count (пара «ключ-значение»). А если цветка нет, устанавливаем значение на 1. Затем отдельно от этой итерации проводим итерацию по созданному нами объекту и находим, каких цветков всего два.

Отметим, что объект этот — count и объявлен он вне итерации .forEach.

{ 
  peony: 2, 
  rose: 3, 
  sunflower: 1, 
  linaria: 1 
}

.forEach method only returns `undefined`

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

Посмотрите на следующий вопрос из StackOverflow и попробуйте найти ответ:

//ЭТО НЕ РАБОТАЕТ 
function isUniform(myArray) {
    myArray.forEach(function(element) {
        if (element !== myArray[0]) {
            return false;
        }
    });

    return true;
}

//ЭТО РАБОТАЕТ

function isUniform(myArray) {
    var passing = true;
    myArray.forEach(function(element) {
        if (element !== myArray[0]) {
            passing = false;
        }
    });

    return passing;
}

// цикл for - of работает тоже

function isUniform(myArray) {
    for (element of myArray) {
        if (element !== myArray[0]) {
            return false
        }
    }
    return true
}

Здесь используют также цикл for или цикл for of.