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.
Прошу прощения, если это глупый вопрос, но я совершенно новый на этом языке, и ответы, которые я нашел до сих пор, не удовлетворяли меня.

Ответ 1

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

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

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

Ссылки

Array.prototype.forEach() - JavaScript | MDN

Array.prototype.map() - JavaScript | MDN

Ответ 2

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

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

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

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

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

Ответ 3

+----------------+-------------------------------------+---------------------------------------+
|                | foreach                             | map                                   |
+----------------+-------------------------------------+---------------------------------------+
| Functionality  | Performs given operation on each    | Performs given "transformation" on    |
|                | element of the array                | "copy" of each element                |
+----------------+-------------------------------------+---------------------------------------+
| Return value   | Returns undefined                   | Returns new array with tranformed     |
|                |                                     | elements leaving back original array  |
|                |                                     | unchanged                             |
+----------------+-------------------------------------+---------------------------------------+
| Preferrable    | Performing non-transformation like  | Obtaining array containing output of  |
| usage scenario | processing on each element.         | some processing done on each element  |
| and example    |                                     | of the array.                         |
|                | For example, saving all elements in |                                       |
|                | the database                        | For example, obtaining array of       |
|                |                                     | lengths of each string in the         |
|                |                                     | array                                 |
+----------------+-------------------------------------+---------------------------------------+

Ответ 4

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

Прочитать:

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

Ответ 5

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

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

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

Ответ 6

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

arr.map()

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

arr.forEach()

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

Ответ 7

Анализ производительности для циклов выполняется быстрее, чем отображение или 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');

Ответ 8

Следует отметить, что 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];

Ответ 9

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

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

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

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

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

Ответ 10

Difference between forEach() & map()

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

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() is faster than forEach()