JavaScript: разница между .forEach () и .map ()

Я знаю, что таких тем было много. И я знаю основы: .forEach()работает как с исходным массивом, так и .map()с новым.

В моем случае:

function practice (i){
    return i+1;
};

var a = [ -1, 0, 1, 2, 3, 4, 5 ];
var b = [ 0 ];
var c = [ 0 ];
console.log(a);
b = a.forEach(practice);
console.log("=====");
console.log(a);
console.log(b);
c = a.map(practice);
console.log("=====");
console.log(a);
console.log(c);

И это вывод:

[ -1, 0, 1, 2, 3, 4, 5 ]
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
undefined
=====
[ -1, 0, 1, 2, 3, 4, 5 ]
[ 0, 1, 2, 3, 4, 5, 6 ]

Я не могу понять, почему использование practiceменяет значение bна undefined.
Прошу прощения, если это глупый вопрос, но я новичок в этом языке, и ответы, которые я нашел до сих пор, меня не удовлетворили.

Они не одно и то же. Позвольте мне объяснить разницу.

forEach: Это выполняет итерацию по списку и применяет некоторую операцию с побочными эффектами к каждому члену списка (пример: сохранение каждого элемента списка в базе данных)

map: Это выполняет итерацию по списку, преобразует каждый член этого списка и возвращает другой список того же размера с преобразованными элементами (пример: преобразование списка строк в верхний регистр)

Ссылки

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach «Выполняет предоставленную функцию один раз для каждого элемента массива».

• Array.map «Создает новый массив с результатами вызова предоставленной функции для каждого элемента в этом массиве».

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

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

Это также означает, что вы можете использовать mapвезде, где вы используете, forEachно вам все равно не следует этого делать, поэтому вы не собираете возвращаемые значения без какой-либо цели. Просто эффективнее не собирать их, если они вам не нужны.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | карта |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Функциональность | Выполняет данную операцию на каждом | Выполняет данное «преобразование» на |
| | элемент массива | «копия» каждого элемента |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Возвращаемое значение | Возвращает undefined | Возвращает новый массив с преобразованным |
| | | элементы, оставляющие исходный массив |
| | | без изменений |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Предпочтительно | Выполнение нетрансформации вроде | Получение массива, содержащего вывод |
| сценарий использования | обработка каждого элемента. | обработка каждого элемента |
| и пример | | массива. |
| | Например, сохранение всех элементов в | |
| | база данных | Например, получение массива |
| | | длины каждой строки в |
| | | массив |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

Основное отличие, которое вам нужно знать, - это .map()возвращает новый массив, а .forEach()не возвращает . Вот почему вы видите такую ​​разницу в выводе. .forEach()просто работает с каждым значением в массиве.

Прочитать:

• Array.prototype.forEach()- JavaScript | MDN
• Array.prototype.map()- JavaScript | MDN

Вы также можете проверить: - Array.prototype.every()- JavaScript | MDN

forEach: если вы хотите выполнить действие над элементами массива, и оно будет таким же, как при использовании цикла for. Результат этого метода не дает нам выхода покупки, просто перебирает элементы.

map: если вы хотите выполнить действие с элементами массива, а также хотите сохранить результат своего действия в массиве. Это похоже на цикл for внутри функции, которая возвращает результат после каждой итерации.

Надеюсь это поможет.

Разница в том, что они возвращают. После казни:

arr.map()

возвращает массив элементов, полученных в результате обработанной функции; пока:

arr.forEach()

возвращает undefined.

Анализ производительности Циклы For работают быстрее, чем map или foreach, по мере увеличения количества элементов в массиве.

let array = [];
for (var i = 0; i < 20000000; i++) {
  array.push(i)
}

console.time('map');
array.map(num => {
  return num * 4;
});
console.timeEnd('map');


console.time('forEach');
array.forEach((num, index) => {
  return array[index] = num * 4;
});
console.timeEnd('forEach');

console.time('for');
for (i = 0; i < array.length; i++) {
  array[i] = array[i] * 2;

}
console.timeEnd('for');

Разница между Foreach и картой:

Map () : если вы используете карту, карта может вернуть новый массив, повторяя основной массив.

Foreach () : если вы используете Foreach, он не может ничего возвращать для каждой итерации основного массива.

useFul ссылка : используйте эту ссылку для понимания различий

https://codeburst.io/javascript-map-vs-foreach-f38111822c0f

Следует отметить, что foreach пропускает неинициализированные значения, а map - нет.

var arr = [1, , 3];

arr.forEach(function(element) {
    console.log(element);
});
//Expected output: 1 3

console.log(arr.map(element => element));
//Expected output: [1, undefined, 3];

Разница между forEach () и map ()

forEach () просто перебирает элементы. Он отбрасывает возвращаемые значения и всегда возвращает undefined. Результат этого метода не дает нам вывода.

Цикл map () по элементам выделяет память и сохраняет возвращаемые значения, повторяя основной массив

Пример:

   var numbers = [2,3,5,7];

   var forEachNum = numbers.forEach(function(number){
      return number
   })
   console.log(forEachNum)
   //output undefined

   var mapNum = numbers.map(function(number){
      return number
   })
   console.log(mapNum)
   //output [2,3,5,7]

map () быстрее, чем forEach ()

Карта неявно возвращается, а forEach - нет.

Вот почему, когда вы пишете JSX-приложение, вы почти всегда используете map вместо forEach для отображения контента в React .

forEach () :

возвращаемое значение: undefined

originalArray: изменен после вызова метода

карта () :

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

originalArray: не изменяется после вызова метода