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але ви все одно не повинні цього робити, щоб не збирати повернені значення без будь-якої мети. Це просто ефективніше не збирати їх, якщо вони вам не потрібні.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | передбачити | карта |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Функціональність | Виконує задану операцію на кожній | Виконує задане "перетворення" на |
| | елемент масиву | "копія" кожного елемента |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Повернене значення | Повертає невизначене | Повертає новий масив з перетвореною |
| | | елементи, що залишають назад початковий масив |
| | | без змін |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Переважні | Виконання неперетворення на зразок | Отримання масиву, що містить вихід |
| сценарій використання | обробка на кожному елементі. | деяка обробка, виконана на кожному елементі |
| та приклад | | масиву. |
| | Наприклад, збереження всіх елементів у | |
| | база даних | Наприклад, отримання масиву |
| | | довжини кожного рядка в |
| | | масив |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

Основна відмінність, яку вам потрібно знати, - це .map()повернення нового масиву, але .forEach()ні. Ось чому ви бачите цю різницю у виході. .forEach()просто оперує кожним значенням масиву.

Прочитайте:

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

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

forEach: Якщо ви хочете виконати дію на елементах масиву, він такий, як ви використовуєте для циклу. Результат цього методу не дає нам просто купити цикл через елементи.

map: Якщо ви хочете виконати дію на елементах масиву, а також ви хочете зберегти висновок вашої дії в масив. Це схоже на цикл у функції, яка повертає результат після кожної ітерації.

Сподіваюся, це допомагає.

Різниця полягає в тому, що вони повертаються. Після виконання:

arr.map()

повертає масив елементів, отриманий в результаті оброблюваної функції; поки:

arr.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 () : Якщо ви використовуєте map, map може повернути новий масив, повторивши основний масив.

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

useFul посилання : використовуйте це посилання для розуміння різниці

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

Одне, що слід зазначити, це те, що foreach пропускає неініціалізовані значення, тоді як карта цього не робить.

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 () та картою ()

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 () швидше, ніж forEach ()

Карта неявно повертається, а forEach цього не робить.

Ось чому, коли ви кодуєте додаток JSX, ви майже завжди використовуєте карту замість forEach для відображення вмісту в React .

forEach () :

повернене значення: невизначене

originalArray: змінено після виклику методу

map () :

повернення значення: новий масив, заповнений результатами виклику наданої функції на кожному елементі масиву виклику

originalArray: не змінено після виклику методу