JavaScript haritasında forEach'e kıyasla hangisi Daha Hızlı?

Her ikisi map()
de ve forEach()
JavaScript'te bir dizideki her öğe üzerinde yineleme yapmak için kullanılan dizi yöntemleridir. Ancak, farklı işlevleri vardır ve bu nedenle belirli senaryolarda farklı performans gösterirler. map()
Bu yazıda, arasındaki farkları ve bunların performansı nasıl etkilediğini keşfedeceğiz forEach()
.
yöntem map()
_
Yöntem map()
, mevcut dizinin her elemanı üzerinde bir işlev gerçekleştirerek yeni bir dizi oluşturmak için kullanılır. Orijinal diziyle aynı sayıda öğeye sahip yeni bir dizi döndürür; burada her öğe, orijinal dizideki karşılık gelen öğeye uygulanan işlevin sonucudur.
map()
Bir dizideki her sayıyı ikiye katlamak için kullanmaya bir örnek :
const originalArray = [1, 2, 3, 4, 5];
const doubledArray = originalArray.map((num) => num * 2);
console.log(doubledArray); // Output: [2, 4, 6, 8, 10]
yöntem forEach()
_
Yöntem forEach()
, bir dizinin her öğesinde bir işlev yürütmek için kullanılır. Yaptığı gibi yeni bir dizi oluşturmaz map()
, bunun yerine mevcut dizinin her elemanı üzerinde bir eylem gerçekleştirir.
forEach()
Bir dizideki her öğeyi günlüğe kaydetmek için kullanımına bir örnek :
const originalArray = ['apple', 'banana', 'orange'];
originalArray.forEach((item) => console.log(item));
// Output: "apple", "banana", "orange"
Performans farklılıkları
Her ikisi map()
de forEach()
benzer eylemler gerçekleştirirken, performanslarında bazı önemli farklılıklar vardır.
Önemli bir fark, bunun map()
yeni bir dizi döndürmesi, oysa forEach()
döndürmemesidir. Bu, mevcut bir dizinin değerlerine dayalı olarak yeni bir dizi oluşturmanız gerekirse, map()
daha iyi bir seçim olduğu anlamına gelir. Öte yandan, yalnızca bir dizinin her elemanına işlem yapmanız gerekiyorsa ve yeni bir dizi oluşturmanıza gerek yoksa, forEach()
daha iyi bir seçim olabilir.
Diğer bir fark, map()
orijinal dizi ile aynı uzunlukta yeni bir dizi oluştururken, forEach()
orijinal dizinin uzunluğunu değiştirmemesidir. map()
Bu , ek bellek tahsisi ve kopyalama gerektirdiğinden, ortaya çıkan dizinin gerekli olmadığı durumlarda daha yavaş olabileceği anlamına gelir .
Hız açısından, yeni bir dizi oluşturmaya gerek olmadığı için basit yinelemelerden forEach()
daha hızlı olduğu genel olarak kabul edilir. Ancak bu, belirli kullanım durumuna ve işlenen veri miktarına bağlı olarak değişebilir.map()
forEach()
Örnek
Bir sayı dizimizin olduğu ve her öğeye bir işlev uygulamak ve sonuçlarla birlikte yeni bir dizi döndürmek istediğimiz bir örneği ele alalım. map()
Bunu başarmak için ve'yi kullanacağız forEach()
ve her yöntemin performansını ölçeceğiz.
const numbers = [1, 2, 3, 4, 5];
// Using map()
console.time('map');
const doubledNumbersMap = numbers.map((num) => num * 2);
console.timeEnd('map');
// Using forEach()
console.time('forEach');
const doubledNumbersForEach = [];
numbers.forEach((num)
{
doubledNumbersForEach.push(num * 2);
});
console.timeEnd('forEach');
console.log(doubledNumbersMap); // Output: [2, 4, 6, 8, 10]
console.log(doubledNumbersForEach); // Output: [2, 4, 6, 8,
Bu kodu çalıştırdığımızda aşağıdaki çıktıyı alıyoruz:
map: 0.012939453125ms
forEach: 0.007080078125ms
*Çözüm**
Sonuç olarak, "map()" ve "forEach()", JavaScript'te benzer eylemleri gerçekleştiren ancak farklı işlevlere sahip yararlı dizi yöntemleridir. "map()", mevcut bir dizinin değerlerine dayalı olarak yeni bir dizi oluştururken, "forEach()", yeni bir dizi oluşturmadan bir dizinin her öğesi üzerinde bir eylem gerçekleştirir.
Performans açısından "forEach()", yeni bir dizi oluşturmadığından, basit yinelemeler için genellikle "map()"ten daha hızlıdır. Ancak bu, belirli kullanım durumuna ve işlenen veri miktarına bağlı olarak değişebilir. Bu nedenle, "map()" ve "forEach()" arasında seçim yaparken kodunuzun özel gereksinimlerini göz önünde bulundurmanız önemlidir.
Okuduğunuz için teşekkürler!
Umarım bu makaleyi faydalı bulmuşsunuzdur. Herhangi bir sorunuz veya öneriniz varsa, lütfen yorum bırakın. Geri bildirimleriniz daha iyi olmama yardımcı oluyor.
Abone olmayı unutmayın⭐️
Facebook Sayfası :https://www.facebook.com/designTechWorld1
Instagram Sayfası :https://www.instagram.com/techd.esign/
Youtube Kanalı :https://www.youtube.com/@tech..Design/
twitter :https://twitter.com/sumit_singh2311
Kullanılan dişli :
Dizüstü bilgisayar :https://amzn.to/3yKkzaC
Kol saati:https://amzn.to/41cialm
React Book'u tercih edebilirsiniz: https://amzn.to/3Tw29nx
Programlama dili ile ilgili bazı ekstra kitaplar:
https://amzn.to/3z3tW5s
https://amzn.to/40n4m6O
https://amzn.to/3Jzstse
https://amzn.to/3nbl8aE
*Önemli Sorumluluk Reddi Beyanı — "Amazon ve Amazon logosu, Amazon.com, Inc. veya bağlı kuruluşlarının ticari markalarıdır."