JavaScript: .forEach () ve .map () arasındaki fark

Bunun gibi pek çok konu olduğunu biliyorum. Ve temelleri biliyorum: .forEach()orijinal dizide ve yenisinde çalışır .map().

Benim durumumda:

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

Ve bu çıktı:

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

Kullanarak neden anlayamıyorum practicedeğişikliklerin değer biçin undefined.
Bu aptalca bir soru ise özür dilerim, ama bu dilde oldukça yeniyim ve şimdiye kadar bulduğum cevaplar beni tatmin etmedi.

Tek ve aynı değiller. Farkı açıklayayım.

forEach: Bu, bir liste üzerinde yinelenir ve her liste üyesine bazı yan etkilerle bazı işlemler uygular (örnek: her liste öğesini veritabanına kaydetme)

map: Bu, bir listeyi yineler, bu listenin her üyesini dönüştürür ve dönüştürülen üyelerle aynı boyutta başka bir listeyi döndürür (örnek: dizelerin listesini büyük harfe dönüştürme)

Referanslar

Array.prototype.forEach () - JavaScript | MDN

Array.prototype.map () - JavaScript | MDN

• Array.forEach "Sağlanan bir işlevi dizi öğesi başına bir kez çalıştırır."

• Array.map "Bu dizideki her öğede sağlanan bir işlevi çağırmanın sonuçlarıyla yeni bir dizi oluşturur."

Yani forEachaslında hiçbir şey döndürmez. Sadece her dizi elemanı için işlevi çağırır ve sonra yapılır. Böylece, adı verilen işlevin içinde ne iade ederseniz edin, basitçe atılır.

Öte yandan, mapbenzer şekilde her bir dizi öğesi için işlevi çağıracak, ancak dönüş değerini atmak yerine, onu yakalayacak ve bu dönüş değerlerinden yeni bir dizi oluşturacaktır.

Bu aynı zamanda , kullandığınız mapher yerde kullanabileceğiniz anlamına gelir, forEachancak yine de bunu yapmamanız gerekir, böylece geri dönüş değerlerini herhangi bir amaç olmadan toplamazsınız. İhtiyacınız yoksa onları toplamamak daha etkilidir.

+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| | foreach | harita |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| İşlevsellik | Her bir | Verilen "dönüştürme" |
| | dizinin öğesi | her elemanın "kopyası" |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Dönüş değeri | Tanımsız döndürür | Yeni diziyi dönüştürülmüş |
| | | orijinal diziyi geri bırakan elemanlar |
| | | değişmemiş |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +
| Tercihli | Gibi dönüşümsüz gerçekleştirmek | | Çıktısını içeren dizi elde ediliyor
| kullanım senaryosu | her elemanın işlenmesi. | her eleman üzerinde bazı işlemler yapıldı |
| ve örnek | | dizinin. |
| | Örneğin, tüm öğeleri | |
| | veritabanı | Örneğin, | dizisi elde ediliyor.
| | | her dizenin uzunlukları |
| | | dizi |
+ ---------------- + -------------------------------- ----- + --------------------------------------- +

Bilmeniz gereken temel fark, .map()yeni bir dizi döndürürken döndürmez .forEach(). Bu nedenle çıktıda bu farkı görüyorsunuz. .forEach()sadece dizideki her değerde çalışır.

Oku:

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

Ayrıca şunlara da göz atmak isteyebilirsiniz: - Array.prototype.every()- JavaScript | MDN

forEach: Bir Array öğesinin öğeleri üzerinde bir eylem gerçekleştirmek istiyorsanız ve bu, for döngüsü kullandığınızla aynıysa. Bu yöntemin sonucu bize bir çıktı alımı sağlamaz, sadece öğeler arasında döngü oluşturur.

map: Bir dizinin öğeleri üzerinde bir eylem gerçekleştirmek ve ayrıca eyleminizin çıktısını bir Dizi olarak depolamak istiyorsanız. Bu, her yinelemeden sonra sonucu döndüren bir işlev içindeki for döngüsüne benzer.

Bu yardımcı olur umarım.

Aradaki fark, geri döndüklerinde yatıyor. Yürütmeden sonra:

arr.map()

işlenmiş işlevden kaynaklanan bir dizi öğe döndürür; süre:

arr.forEach()

tanımsız döndürür.

Performans Analizi For loop'lar, bir dizideki öğe sayısı arttıkça map veya foreach'den daha hızlı çalışır.

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 ve harita arasındaki fark:

Map () : Eğer map kullanırsanız, map ana diziyi yineleyerek yeni dizi döndürebilir.

Foreach () : Foreach kullanırsanız, ana diziyi yineleyen her biri için hiçbir şey döndüremez.

useFul bağlantısı : farkı anlamak için bu bağlantıyı kullanın

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

Dikkat edilmesi gereken bir şey, foreach'in ilklendirilmemiş değerleri atlaması, ancak haritanın atlamamasıdır.

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 () ve Map () arasındaki fark

her biri için() sadece öğeler arasında döngü oluşturur. Dönüş değerlerini atar ve her zaman tanımsız olarak döner.Bu yöntemin sonucu bize bir çıktı vermez.

map () öğeleri boyunca döngü, bellek ayırır ve ana diziyi yineleyerek dönüş değerlerini depolar

Misal:

   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 () 'den daha hızlıdır

ForEach dönmezken Map örtük olarak döndürülür.

Bu nedenle, bir JSX uygulamasını kodlarken, içeriği React'te görüntülemek için neredeyse her zaman forEach yerine map kullanırsınız .

forEach () :

geri dönüş değeri : tanımsız

originalArray: yöntem çağrısından sonra değiştirildi

harita () :

dönüş değeri: yeni dizi, çağıran dizideki her öğede sağlanan bir işlevi çağırmanın sonuçlarıyla doldurulur

originalArray: yöntem çağrısından sonra değiştirilmez