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
Итак, 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()