JavaScript: różnica między .forEach () i .map ()

Wiem, że takich tematów było wiele. I znam podstawy: .forEach()działa na oryginalnej tablicy i .map()na nowej.

W moim przypadku:

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);

A to jest wyjście:

[ -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 ]

Nie mogę zrozumieć, dlaczego użycie practicezmienia wartość bdo undefined.
Przykro mi, jeśli to głupie pytanie, ale jestem całkiem nowy w tym języku, a odpowiedzi, które znalazłem do tej pory, nie zadowalały mnie.

Nie są jednym i tym samym. Pozwól mi wyjaśnić różnicę.

forEach: Powoduje to iterację po liście i zastosowanie pewnych operacji z efektami ubocznymi do każdego elementu listy (przykład: zapisywanie każdego elementu listy do bazy danych)

map: Powoduje iterację po liście, przekształca każdego członka tej listy i zwraca inną listę o tym samym rozmiarze z przekształconymi składowymi (przykład: przekształcanie listy ciągów na wielkie litery)

Bibliografia

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach „Wykonuje podaną funkcję raz na element tablicy”.

• Array.map „Tworzy nową tablicę z wynikami wywołania podanej funkcji na każdym elemencie tej tablicy”.

Więc forEachtak naprawdę nic nie zwraca. Po prostu wywołuje funkcję dla każdego elementu tablicy i gotowe. Więc cokolwiek zwrócisz w ramach tej wywołanej funkcji, jest po prostu odrzucane.

Z drugiej strony, w mappodobny sposób wywoła funkcję dla każdego elementu tablicy, ale zamiast odrzucać jej wartość zwracaną, przechwyci ją i utworzy nową tablicę tych zwracanych wartości.

To oznacza również, że mogłaby używać mapgdziekolwiek używasz forEachale nadal nie należy robić, aby nie zbierać wartości zwracanych bez jakiegokolwiek celu. Po prostu skuteczniej jest ich nie zbierać, jeśli ich nie potrzebujesz.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | mapa |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Funkcjonalność | Wykonuje daną operację na każdym | Wykonuje zadaną "transformację" na |
| | element tablicy | "kopia" każdego elementu |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Wartość zwracana | Zwraca undefined | Zwraca nową tablicę z przekształconą |
| | | elementy pozostawiające oryginalną tablicę |
| | | niezmienione |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Preferrable | Wykonywanie nietransformacji, takich jak | Uzyskiwanie tablicy zawierającej wyjście |
| scenariusz użycia | przetwarzanie na każdym elemencie. | trochę przetwarzania wykonanego na każdym elemencie |
| i przykład | | tablicy. |
| | Na przykład zapisywanie wszystkich elementów w | |
| | baza danych | Na przykład uzyskanie tablicy |
| | | długości każdego ciągu w |
| | | tablica |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

Główna różnica, którą musisz wiedzieć, to .map()zwraca nową tablicę, a .forEach()nie. Dlatego widzisz tę różnicę w wynikach. .forEach()po prostu działa na każdej wartości w tablicy.

Zaznajomić się:

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

Możesz także sprawdzić: - Array.prototype.every()- JavaScript | MDN

forEach: Jeśli chcesz wykonać akcję na elementach Array i jest to takie samo, jak w przypadku pętli for. Wynik tej metody nie daje nam wyjścia kupna tylko pętla przez elementy.

map: Jeśli chcesz wykonać akcję na elementach tablicy, a także chcesz zapisać dane wyjściowe akcji w tablicy. Jest to podobne do pętli for w funkcji, która zwraca wynik po każdej iteracji.

Mam nadzieję że to pomoże.

Różnica polega na tym, co zwracają. Po wykonaniu:

arr.map()

zwraca tablicę elementów wynikających z przetwarzanej funkcji; podczas:

arr.forEach()

zwraca undefined.

Analiza wydajności Pętle For działają szybciej niż mapowanie lub foreach, gdy liczba elementów w tablicy wzrasta.

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');

Różnica między Foreach a mapą:

Mapa() : Jeśli używasz map, to map może zwrócić nową tablicę przez iterację głównej tablicy.

Foreach () : Jeśli używasz Foreach, to nie może zwrócić niczego dla każdej iteracyjnej tablicy głównej.

link useFul : użyj tego linku, aby zrozumieć różnice

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

Należy zwrócić uwagę na to, że foreach pomija niezainicjowane wartości, podczas gdy map nie.

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];

Różnica między forEach () i map ()

dla każdego() po prostu elementy. Odrzuca zwracane wartości i zawsze zwraca undefined. Rezultat tej metody nie daje nam wyniku.

map () pętla przez elementy przydziela pamięć i przechowuje wartości zwracane przez iterację tablicy głównej

Przykład:

   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 () jest szybsze niż forEach ()

Map niejawnie zwraca, podczas gdy forEach nie.

To dlatego, kiedy kodujesz aplikację JSX, prawie zawsze używasz map zamiast forEach do wyświetlania treści w React .

forEach () :

zwracana wartość: niezdefiniowana

originalArray: zmodyfikowana po wywołaniu metody

mapa () :

zwracana wartość: nowa Tablica wypełniona wynikami wywołania podanej funkcji na każdym elemencie wywołującej tablicy

originalArray: nie modyfikowana po wywołaniu metody