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

Краткое введение: и forEach(), и map() являются итеративными методами —методами, которые динамически работают с каждым элементом, содержащимся в массиве (нажмите здесь, чтобы получить краткий обзор функций и методов). . Однако есть одно ключевое отличие: forEach() имеет возвращаемое значение undefined, а map() возвращает [new array].

Давайте кратко рассмотрим пример метода forEach():

const array1= [3, 6, 9, 12, 15]

array1.forEach(x => x / 3)

>undefined

Здесь может показаться, что наш ожидаемый результат должен быть [1, 2, 3, 4, 5] , однако, к сожалению, наше возвращаемое значение на самом деле undefined. Заглянув в документацию MDN (ссылка в первом абзаце), мы можем быстро выяснить, чего нам не хватает для вывода желаемого результата.

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

Давайте передадим нашему приведенному выше коду простую функцию для получения желаемого результата:

const array1 = [3, 6, 9, 12, 15]

array1.forEach(x => console.log(x / 3))

//1
//2
//3
//4
//5
>undefined

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

const friendlyArray = [ "Mark", "Joe", "Matt", "Shane"]

function sayHello(friend) {
    console.log(`Hello, ${friend}!`)
}

friendlyArray.forEach(sayHello)

//Hello, Mark!
//Hello, Joe!
//Hello, Matt!
//Hello, Shane!
>undefined        // still an undefined return value from the forEach()

Имея в виду, что ни один из приведенных выше выходных данных не является фактическим возвращаемым значением, давайте вернемся к нашему первому примеру, используя метод map():

const array1= [3, 6, 9, 12, 15]

array1.map(x => x / 3) //map instead of forEach

> [1, 2, 3, 4, 5] //return value; a new array

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

Итак, когда мы хотели бы использовать один метод вместо другого? Если нам просто нужна функция для перебора каждого элемента массива, то forEach() должна помочь. Однако, если нам нужно изменить или видоизменить массив (и нам нужен новый массив, сохранив исходный), то, скорее всего, map() будет подходящим вариантом.

Конечно, это был очень простой обзор двух наиболее распространенных методов итерации массива, и с каждым методом (особенно map()) можно сделать гораздо больше. Ознакомьтесь с документацией MDN (ссылка выше) и поэкспериментируйте с этими методами самостоятельно.

Спасибо.