JavaScript'te bir dizi için her biri için?

Edit: Bu cevap umutsuzca güncel değil. Daha modern bir yaklaşım için, bir dizide mevcut olan yöntemler bölümüne bakın. İlgi çekici yöntemler:

• her biri için
• harita
• filtre
• Zip
• azaltmak
• her
• bazı

JavaScript içindeki bir diziyi yinelemenin standart yolu bir Vanilya for-döngüsü:

var length = arr.length,
    element = null;
for (var i = 0; i < length; i++) {
  element = arr[i];
  // Do something with element
}

Ancak, bu yaklaşımın yalnızca yoğun bir diziniz varsa ve her bir dizin bir öğe tarafından işgal edilmişse iyidir. Dizi seyrekse, bu yaklaşımla performans sorunlarıyla karşılaşabilirsiniz, çünkü dizide gerçekten bulunmayan birçok indeks üzerinde yineleme yaparsınız. Bu durumda, bir for .. in-döngüsü daha iyi bir fikir olabilir. Ancak, yalnızca istenen dizilim özelliklerinin (yani dizi öğeleri) uygulanmasını sağlamak için uygun korumaları kullanmanız gerekir, çünkü for..in-döngüsü de eski tarayıcılarda numaralandırılır; ek özellikler enumerable olarak tanımlanır.

ECMAScript 5 içinde dizi prototipinde bir forEach yöntemi olacaktır, ancak eski tarayıcılarda desteklenmez. Bu nedenle, sürekli olarak kullanabilmek için, onu destekleyen bir ortamınız olmalıdır (örneğin, sunucu tarafı JavaScript için Node.js ) veya bir "Polyfill" kullanın. Bununla birlikte, bu işlevsellik için Polyfill önemsizdir ve kodu okumayı kolaylaştırdığından, eklenmesi iyi bir polyfill'dir.

jQuery kütüphanesini kullanıyorsanız, jQuery.each :

$.each(yourArray, function(index, value) {
  // do your stuff here
});

DÜZENLE : 

Soruya göre, kullanıcı jquery yerine javascript'te kod ister, yani düzenleme

var length = yourArray.length;   
for (var i = 0; i < length; i++) {
  // Do something with yourArray[i].
}

Geri döngü

Bence reverse döngü için burada bir söz hak ediyor:

_for (var i = array.length; i--; ) {
     // process array[i]
}
_

Avantajları:

• Her yinelemede geçici bir len değişkeni bildirmeniz ya da _array.length_ ile karşılaştırmanız gerekmez, bunların her ikisi de bir dakikalık optimizasyon olabilir.
• Kardeşleri DOM'dan ters sırada kaldırmak genellikle daha verimlidir . (Tarayıcının, iç dizilerindeki elemanları daha az kaydırması gerekir.)
• Döngü yaparken, diziyi değiştirirseniz, indeksinde veya sonrasında i (örneğin, _array[i]_ konumunda bir öğe kaldırır veya eklersiniz), sonra bir ileri döngü sola kaydırılan öğeyi atlar i, veya sağa kaydırılan i 'i yeniden işle. Geleneksel bir döngüde, belki güncelleme i işlem gerektiren bir sonraki öğeye işaret etmek için - 1, ancak yineleme yönünü tersine çevirmek genellikle bir basit ve daha şık çözüm .
• Benzer şekilde, iç içe DOM öğelerini değiştirirken veya kaldırırken, ters işlemden geçirme hataları önleyebilir. Örneğin, çocuklarını kullanmadan önce bir ana düğümün içHTML'sini değiştirmeyi düşünün. Alt düğüme ulaşıldığında, ebeveynin içHTML'si yazıldığında yeni oluşturulan bir çocukla değiştirilen DOM'dan ayrılır.
• Yazmak , mevcut diğer seçeneklerin bir kısmından daha kısa ve okumak 'dır. Her ne kadar forEach() ve ES6'nın _for ... of_ 'ını kaybeder.

Dezavantajları:

• Öğeleri ters sırada işler. Sonuçlardan yeni bir dizi oluşturuyorsanız veya ekrana bir şey yazdırıyorsanız, doğal olarak çıktı, orijinal sırasına göre tersine çevrilir .
• Sırayla kardeşlerini sırasını korumak için DOM'a ilk çocuk olarak eklemek, daha az verimli . (Tarayıcı işleri doğru bir şekilde kaydırmak zorunda kalır.) DOM düğümlerini verimli ve sırayla oluşturmak için ileriye doğru döngü yapın ve normal olarak ekleyin (ve ayrıca bir "belge parçası" kullanın).
• Tersine döngü küçük geliştiriciler için kafa karıştırıcıdır . (Outlook'unuza bağlı olarak bunun bir avantaj olduğunu düşünebilirsiniz.)

Her zaman kullanmalı mıyım?

Bazı geliştiriciler, ileriye doğru döngü oluşturmak için iyi bir neden olmadıkça, döngü için tersini varsayılan olarak kullanır.

Performans kazancı genellikle önemsiz olmakla birlikte, bir tür çığlık atar:

"Sadece listedeki her öğeye bunu yap, sipariş umrumda değil!"

Ancak pratikte değil aslında güvenilir bir niyet göstergesidir, çünkü do durumlarından ayırt edilemez siparişi önemsiyorum ve gerçekte need tersine dönmeyi yapın. Bu nedenle, aslında ECMAScript de dahil olmak üzere birçok dilde mevcut olmayan ama örneğin forEachUnordered() olarak adlandırılabilecek bir şey olan "umursamıyorum" amacını doğru bir şekilde ifade etmek için başka bir yapıya ihtiyaç duyulacaktı.

Eğer sipariş önemli değilse ve verimlilik bir endişe kaynağıysa (bir oyunun veya animasyon motorunun en içsel döngüsünde) bir kaygı ise, tersini döngü olarak kullanmak için kabul edilebilir. desen. Unutmayın, mevcut kodda bir döngü için bir ters görmenin , sırasının alakasız olduğu anlamına gelmez .

ForEach () kullanmak daha iyidir

Genel olarak, açıklık ve güvenliğin daha fazla endişe verici olduğu daha üst düzey kodlar için, varsayılan şablonunuz olarak Array::forEach komutunu kullanmanızı tavsiye ederim:

• Okumak için açıktır.
• i bloğun içinde kaydırılmayacağını belirtir (bu, uzun for ve while döngülerinde her zaman olası bir sürpriz olduğunu gösterir.)
• Kapanış için size ücretsiz bir kapsam sunar.
• Yerel değişkenlerin sızmasını ve dış değişkenlerle (ve mutasyonuyla) kazayla çarpışmayı azaltır.

O zaman kodunuzdaki döngünün tersini gördüğünüzde, bu iyi bir nedenden dolayı tersine çevrildiğine dair bir ipucu (belki de yukarıda açıklanan nedenlerden biri). Ve döngü için geleneksel bir ileri görmek, kaymanın gerçekleşebileceğini gösterebilir.

(Amaç tartışması size bir şey ifade etmiyorsa, siz ve kodunuz Crockford'un dersini --- Programlama Stili ve Beyniniz .

O nasıl çalışır?

_for (var i = 0; i < array.length; i++) { ... }   // Forwards

for (var i = array.length; i--; )    { ... }   // Reverse
_

_i--_ öğesinin orta fıkra (genellikle bir karşılaştırma gördüğümüz) olduğunu ve son fıkranın boş olduğunu (genellikle _i++_ gördüğümüz) fark edersiniz. Bu, _i--_ öğesinin devam için condition olarak kullanıldığı anlamına gelir. Önemli bir şekilde, her yinelemede önce çalıştırılır ve kontrol edilir.

• Patlamadan _array.length_ 'da nasıl başlayabilir?

  _i--_ çalıştırıldığından önce her yinelemede, ilk yinelemede, aslında _array.length - 1_ öğesinden erişeceğiz. Dizi-out-of-aut undefined öğe.

• Neden dizin 0'dan önce yinelemeyi durdurmuyor?

  Döngü, _i--_ koşulu bir falsey değerini değerlendirdiğinde (0 verdiğinde) yinelemeyi durdurur.

  İşin püf noktası, _--i_ 'dan farklı olarak, takip eden _i--_ operatörünün i değerini azalttığı, ancak before değerindeki azalmayı vermesidir. Konsolunuz bunu gösterebilir:

  _> var i = 5; [i, i--, i];_

  _[5, 5, 4]_

  Böylece, son yinelemede, i daha önceydi 1 ve _i--_ ifadesi onu 0 olarak değiştirir; aslında verim 1 (truthy) ve bu nedenle koşul geçer. Bir sonraki yinelemede _i--_ değişiyor i ( - 1 değerini değiştiriyor ancak sonuçta 0 (falsey) değerini alıyor, uygulamasına neden oluyor derhal döngünün altından düşmek için.

  Döngü için geleneksel iletimlerde, _i++_ ve _++i_ birbirleriyle değiştirilebilir (Douglas Crockford'un işaret ettiği gibi). Bununla birlikte, döngü için tersine, azalmamız aynı zamanda koşul ifademiz olduğu için, öğeyi 0 dizininde işlemek istiyorsak _i--_ ile yapışmalıyız.

Önemsiz şeyler

Bazı insanlar for döngüsünün tersine küçük bir ok çizmeyi ve göz kırpmayı bitirmeyi sever:

_for (var i = array.length; i --> 0 ;) {
_

Krediler, WYL’ye dönüyor, bana döngünün tersinin faydalarını ve dehşetlerini gösteriyorlar.

Bazı C - stil dilleri, numaralandırmalar arasında dolaşmak için foreach öğesini kullanır. JavaScript'te bu, for..in loop yapısı ile yapılır.

var index,
    value;
for (index in obj) {
    value = obj[index];
}

Bir yakalama var. for..in, nesnenin numaralandırılabilir üyelerinin her biri ve prototipindeki üyeler arasında geçiş yapar. Nesnenin prototipi ile miras alınan değerleri okumaktan kaçınmak için, özelliğin nesneye ait olup olmadığını kontrol edin:

for (i in obj) {
    if (obj.hasOwnProperty(i)) {
        //do stuff
    }
}

Ek olarak, ECMAScript 5 , bir geri arama kullanarak bir dizi üzerinde numaralandırmak için kullanılabilecek Array.prototype işlevine forEach yöntemini ekledi (polyfill dokümandadır, bu nedenle eski tarayıcılar için yine de kullanabilirsiniz):

arr.forEach(function (val, index, theArray) {
    //do stuff
});

Geri arama false döndürdüğünde Array.prototype.forEach'nin kırılmadığına dikkat etmek önemlidir. jQuery ve Underscore.js , kısa devre yapılabilecek döngüler sağlamak için each üzerinde kendi varyasyonlarını sağlar.

Bir dizi üzerinde döngü yapmak istiyorsanız, standart üç bölümlü for döngüsünü kullanın.

for (var i = 0; i < myArray.length; i++) {
    var arrayItem = myArray[i];
}

myArray.length dosyasını önbelleğe alarak veya geriye doğru yineleyerek bazı performans optimizasyonları elde edebilirsiniz.

Bunun eski bir yazı olduğunu biliyorum ve çoktan çok iyi cevaplar var. Biraz daha eksiksiz olması için AngularJS kullanarak başka bir tane atacağımı düşündüm. Tabii ki, bu yalnızca Angular kullanıyorsanız geçerlidir, açıkçası, yine de yine de koymak istiyorum.

angular.forEach, 2 argüman ve isteğe bağlı üçüncü bir argüman alır. İlk argüman yinelenecek nesne (dizi), ikinci argüman yineleyici işlevidir ve isteğe bağlı üçüncü argüman nesne içeriğidir (temelde döngü içinde 'this' olarak adlandırılır).

ForEach her açısal döngüyü kullanmanın farklı yolları vardır. En basit ve muhtemelen en çok kullanılan

var temp = [1, 2, 3];
angular.forEach(temp, function(item) {
    //item will be each element in the array
    //do something
});

Öğeleri bir diziden diğerine kopyalamak için yararlı olan başka bir yol da

var temp = [1, 2, 3];
var temp2 = [];
angular.forEach(temp, function(item) {
    this.Push(item); //"this" refers to the array passed into the optional third parameter so, in this case, temp2.
}, temp2);

Bunu yapmak zorunda olmamanıza rağmen, basitçe aşağıdakileri yapabilirsiniz ve bu önceki örneğe denktir:

angular.forEach(temp, function(item) {
    temp2.Push(item);
});

Şimdi, Vanilya aromalı for döngüsünün aksine angular.forEach işlevini kullanmanın artıları ve eksileri var.

Avantaj

• Kolay okunabilirlik
• Kolay yazılabilirlik
• Varsa, angular.forEach ES5 forEach döngüsünü kullanır. Şimdi, forEach döngüler forop döngülerinden çok daha yavaş olduğundan, eksiler bölümünde etkinliğe ulaşacağım. Bunu bir profesyonel olarak söylüyorum çünkü tutarlı ve standartlaştırılmış olması güzel.

Tam olarak aynı şeyi yapan aşağıdaki 2 iç içe döngüyü düşünün. Diyelim ki 2 tane nesne dizimiz var ve her nesne, bir dize (ya da her neyse) bir Value özelliğine sahip olan bir sonuç dizisi içeriyor. Ve diyelim ki sonuçların her birini yinelemeliyiz ve eğer eşitlerse, bazı eylemler gerçekleştirin:

angular.forEach(obj1.results, function(result1) {
    angular.forEach(obj2.results, function(result2) {
        if (result1.Value === result2.Value) {
            //do something
        }
    });
});

//exact same with a for loop
for (var i = 0; i < obj1.results.length; i++) {
    for (var j = 0; j < obj2.results.length; j++) {
        if (obj1.results[i].Value === obj2.results[j].Value) {
            //do something
        }
    }
}

Bunun çok basit bir varsayım örneği olduğunu kabul ediyorum, ancak ikinci yaklaşımı kullanarak döngüler için gömülü üçlü yazdım ve okunması ve yazması zor oldu çok zordu.

Eksileri

• Verimlilik. angular.forEach ve doğal forEach, bu konuda, her ikisi de normal for döngüsünden çok daha yavaş yavaşlar. % 90 daha yavaş . Bu yüzden büyük veri kümeleri için, yerel for döngüsüne uyması en iyisidir.
• Ara vermeyin, devam edin veya destek vermeyin continue aslında bir angular.forEach ile devam etmek için " kaza " tarafından desteklenir, basitçe angular.forEach(array, function(item) { if (someConditionIsTrue) return; }); işlevine bir return; deyimi koyarsınız bu yinelemenin işlevinin dışında kalmasına neden olur. Bu aynı zamanda, doğal forEach öğesinin mola desteklememesi veya devam etmemesi nedeniyle de ortaya çıkıyor.

Eminim başka avantajlar ve dezavantajlar da vardır ve lütfen uygun gördüğünüzü eklemekten çekinmeyin. Verimliliğe ihtiyacınız varsa, döngü gereksinimleriniz için sadece yerel for döngüsüne sadık kaldığımı hissediyorum. Ancak, veri kümeleriniz daha küçükse ve okunabilirlik ve yazılabilirlik karşılığında bir miktar verimlilik tamamsa, o zaman elbette o kötü çocukta bir angular.forEach atın.

Diziyi boşaltma sakıncası yoksa:

var x;

while(x = y.pop()){ 

    alert(x); //do something 

}

x, y dosyasının son değerini içerecek ve diziden kaldırılacaktır. Ayrıca ilk öğeyi y dosyasından çıkaracak ve kaldıracak shift() öğesini kullanabilirsiniz.

Bir forEach uygulaması ( bakınız jsFiddle ):

function forEach(list,callback) {
  var length = list.length;
  for (var n = 0; n < length; n++) {
    callback.call(list[n]);
  }
}

var myArray = ['hello','world'];

forEach(
  myArray,
  function(){
    alert(this); // do something
  }
);

Şimdi kolay bir çözüm, underscore.js kütüphanesi kullanmaktır. each gibi pek çok yararlı araç sağlıyor ve işi otomatik olarak yerel forEach 'e devredecek.

A CodePen örneği nasıl çalıştığını _:

var arr = ["elemA", "elemB", "elemC"];
_.each(arr, function(elem, index, ar)
{
...
});

Ayrıca bakınız

• Yerel Array.prototype.forEach() için belgeler .
• FOR_EACH ... IN (MDN) 'de for each (variable in object) dosyasının ECMA-357 ( EAX ) standardının bir parçası olarak kullanımdan kaldırıldığı açıklanmaktadır.
• for ... of (MDN), Harmony (ECMAScript 6) teklifinin bir parçası olarak for (variable of object) işlevini kullanarak bir sonraki yineleme yöntemini açıklar.

Aşağıdaki gibi jQuery içinde foreach dosyasının üç uygulaması vardır.

var a = [3,2];

$(a).each(function(){console.log(this.valueOf())}); //Method 1
$.each(a, function(){console.log(this.valueOf())}); //Method 2
$.each($(a), function(){console.log(this.valueOf())}); //Method 3

Muhtemelen for(i = 0; i < array.length; i++) döngüsü en iyi seçenek değildir. Niye ya? Eğer bu varsa:

var array = new Array();
array[1] = "Hello";
array[7] = "World";
array[11] = "!";

Bu yöntem array[0]'dan array[2]'a kadar çağırır. Birincisi, bu sizin ilk önce sahip olmadığınız değişkenlere atıfta bulunacak, ikincisi dizide değişkenlere sahip olmayacak ve üçüncüsü bu kod kodlayıcı olacaktır. Buraya bak, kullandığım şey:

for(var i in array){
    var el = array[i];
    //If you want 'i' to be INT just put parseInt(i)
    //Do something with el
}

Ve bir işlev olmasını istiyorsanız, bunu yapabilirsiniz:

function foreach(array, call){
    for(var i in array){
        call(array[i]);
    }
}

Eğer kırmak istiyorsanız, biraz daha mantık:

function foreach(array, call){
    for(var i in array){
        if(call(array[i]) == false){
            break;
        }
    }
}

Örnek:

foreach(array, function(el){
    if(el != "!"){
        console.log(el);
    } else {
        console.log(el+"!!");
    }
});

Dönüyor:

//Hello
//World
//!!!

ES6'dan itibaren:

list = [0, 1, 2, 3]
for (let obj of list) {
    console.log(obj)
}

of, in ile ilişkili garipliklerden kaçınır ve başka bir dilin for döngüsü gibi çalışmasını sağlar ve let, işlev içindeki aksine i'ı bağlar.

Yalnızca bir komut olduğunda (örn. Yukarıdaki örnekte) parantezler ({}) çıkarılabilir.

Bu, endonun 0'da başladığı, seyrek olmayan liste için bir yineleyicidir; bu, document.getElementsByTagName veya document.querySelectorAll)

function each( fn, data ) {

    if(typeof fn == 'string')
        eval('fn = function(data, i){' + fn + '}');

    for(var i=0, L=this.length; i < L; i++) 
        fn.call( this[i], data, i );   

    return this;
}

Array.prototype.each = each;  

Kullanım örnekleri:

Örnek 1

var arr = [];
[1, 2, 3].each( function(a){ a.Push( this * this}, arr);
arr = [1, 4, 9]

Örnek # 2

each.call(document.getElementsByTagName('p'), "this.className = data;",'blue');

Her p etiketi class="blue" alır

Örnek # 3

each.call(document.getElementsByTagName('p'), 
    "if( i % 2 == 0) this.className = data;",
    'red'
);

Diğer her p etiketi class="red"> alır

Örnek # 4

each.call(document.querySelectorAll('p.blue'), 
    function(newClass, i) {
        if( i < 20 )
            this.className = newClass;
    }, 'green'
);

Ve sonunda ilk 20 mavi p etiketi yeşile dönüştü

Dize işlevi olarak kullanırken dikkatli olun: işlev bağlam dışında oluşturulur ve yalnızca değişken kapsam belirleme yaptığınız yerlerde kullanılmalıdır. Aksi takdirde, kapsam belirlemenin daha sezgisel olduğu işlevleri geçmek daha iyidir.

Yerel JavaScript içinde hiçbir for each döngüsü yok. Bu işlevi elde etmek için kitaplıkları kullanabilirsiniz ( Underscore.js önerilir), döngü içinde basit bir for kullanın.

for (var instance in objects) {
   ...
}

Bununla birlikte, daha basit for döngüsünü kullanmanın nedenleri olabileceğini unutmayın (bkz. Yığın Taşması sorusu NEDEN BU KADAR KÖTÜ BIR FIKIR DIZISI YINELEME ILE “IÇIN…” KULLANIYOR?)

var instance;
for (var i=0; i < objects.length; i++) {
    var instance = objects[i];
    ...
}

Aşağıdaki gibi JavaScript'te bir dizi arasında dolaşmak için birkaç yol vardır:

for - en yaygın olanıdır. Döngü için tam kod bloğu

var languages = ["Java", "JavaScript", "C#", "Python"];
var i, len, text;
for (i = 0, len = languages.length, text = ""; i < len; i++) {
    text += languages[i] + "<br>";
}
document.getElementById("example").innerHTML = text;

<p id="example"></p>

while - bir koşul geçerken döngü. En hızlı döngü gibi görünüyor

var text = "";
var i = 0;
while (i < 10) {
    text +=  i + ") something<br>";
    i++;
}
document.getElementById("example").innerHTML = text;

<p id="example"></p>

do/while - koşul doğru olduğunda bir kod bloğunda da dolaşın, en az bir kez çalışacaktır

var text = ""
var i = 0;
do {
    text += i + ") something <br>";
    i++;
}
while (i < 10);
document.getElementById("example").innerHTML = text;

<p id="example"></p>

İşlevsel döngüler - forEach, map, filter, ayrıca reduce (işlev boyunca döngü yaparlar, ancak dizinizle bir şey yapmanız gerekirse kullanılır.

// For example, in this case we loop through the number and double them up using the map function
var numbers = [65, 44, 12, 4];
document.getElementById("example").innerHTML = numbers.map(function(num){return num * 2});

<p id="example"></p>

Dizilerde işlevsel programlama hakkında daha fazla bilgi ve örnekler için, blog yazısına bakınız JavaScript'te işlevsel programlama: harita, filtre ve azalt.

ECMAScript5 (Javascript'teki sürüm) Dizilerle çalışmak için.

forEach - Dizideki her öğeyi sıralar ve her öğeyle ne gerekiyorsa yaparsınız.

['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is the #" + (index+1) + " in musical scale");
});

// Output
// C is the #1 in musical scale
// D is the #2 in musical scale
// E is the #3 in musical scale

Durumda, daha fazla dahili özellik kullanarak dizi üzerinde işlem yapmakla ilgileniyorsanız.

map - Geri çağırma işlevinin sonucu ile yeni bir dizi oluşturur. Bu yöntem, dizinizin öğelerini biçimlendirmeniz gerektiğinde kullanılması iyidir.

// Let's upper case the items in the array
['bob', 'joe', 'jen'].map(function(elem) {
  return elem.toUpperCase();
});

// Output: ['BOB', 'JOE', 'JEN']

reduc - Adından da anlaşılacağı gibi, para birimi öğesinde geçen işlevi ve önceki uygulamanın sonucunu çağırarak diziyi tek bir değere indirger.

[1,2,3,4].reduce(function(previous, current) {
  return previous + current;
});
// Output: 10
// 1st iteration: previous=1, current=2 => result=3
// 2nd iteration: previous=3, current=3 => result=6
// 3rd iteration: previous=6, current=4 => result=10

every - Dizideki tüm öğeler geri çağırma işlevinde testi geçerse doğru veya yanlış döndürür.

// Check if everybody has 18 years old of more.
var ages = [30, 43, 18, 5];  
ages.every(function(elem) {  
  return elem >= 18;
});

// Output: false

filter - Süzgeci, her birine çok benzeyen, belirtilen işleve sadık dönen öğelerin bulunduğu bir dizi döndürür.

// Finding the even numbers
[1,2,3,4,5,6].filter(function(elem){
  return (elem % 2 == 0)
});

// Output: [2,4,6]

Umarım bu yararlı olacaktır.

forEach içine girebilecek hiçbir dahili yetenek yok. Yürütmeyi kesmek için aşağıdaki gibi Array#some işlevini kullanın:

[1,2,3].some(function(number) {
    return number === 1;
});

Bu işe yarar çünkü some, dizi sırasına göre yapılan herhangi bir geri çağırma işleminin geri kalanının yürütülmesine kısa devre yapan doğru döndürür döndürmez gerçek değer verir. Orijinal Cevap Bkz. some için dizi prototipi

Ben de bunu, bu sözdizimini de isteyen birileri için bir ters döngü bileşimi ve yukarıdaki bir cevap olarak eklemek istiyorum.

var foo = [object,object,object];
for (var i = foo.length, item; item = foo[--i];) {
    console.log(item);
}

Artıları:

Bunun yararı: Daha önce başka bir satırda bildirilmesi gerekmeyecek olan ilk halihazırda referansa sahipsiniz. Nesne dizisi üzerinden döngü yaparken kullanışlıdır.

Eksileri:

Bu, referans yanlış olduğunda - kesilecektir (falsey (tanımsız, vb.). Yine de bir avantaj olarak kullanılabilir. Ancak okumayı biraz zorlaştırır. Ayrıca tarayıcıya bağlı olarak, orijinalinden daha hızlı çalışması için optimize edilemeyebilir.

$.map kullanarak jQuery yolu:

var data = [1, 2, 3, 4, 5, 6, 7];

var newData = $.map(data, function(element) {
    if (element % 2 == 0) {
        return element;
    }
});

// newData = [2, 4, 6];

ES6 --- ile Döngüleri Kullanma yıkıcı ve spread operatörü

Bazı javascript gazileri dağınık, gençler veya bazı insanlar yararlı bulabilir olsa da, ES6’ya yeni başlayanlar için tahrip etme ve yayılma operatörünün kullanımı oldukça faydalı oldu.

Aşağıdaki örnekler for...of deyimi ve .forEach yöntemini kullanacaktır.

Örnek 6, 7 ve 8 , _.map_, _.filter_, _.reduce_ gibi herhangi bir fonksiyonel ilmekle kullanılabilir. _.sort_, _.every_, _.some_, bu yöntemler hakkında daha fazla bilgi için Array Object 'e bakın.

Örnek 1: Normal _for...of_ döngü - burada numara yok.

_let arrSimple = ['a', 'b', 'c'];

for (let letter of arrSimple) {
  console.log(letter);
}_

Örnek 2: Kelimeleri karakterlere ayırma

_let arrFruits = ['Apple', 'orange', 'banana'];

for (let [firstLetter, ...restOfTheWord] of arrFruits) {
  // Create a shallow copy using the spread operator
  let [lastLetter] = [...restOfTheWord].reverse();
  console.log(firstLetter, lastLetter, restOfTheWord);

}_

Örnek 3: key ve value ile döngü

_// let arrSimple = ['a', 'b', 'c'];

// Instead of keeping an index in `i` as per example `for(let i = 0 ; i<arrSimple.length;i++)`
// this example will use a multi-dimensional array of the following format type: 
// `arrWithIndex: [number, string][]`

let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Same thing can be achieved using `.map` method
// let arrWithIndex = arrSimple.map((i, idx) => [idx, i]);

// Same thing can be achieved using `Object.entries`
// NOTE: `Object.entries` method doesn't work on internet Explorer unless it's polyfilled
// let arrWithIndex = Object.entries(arrSimple);

for (let [key, value] of arrWithIndex) {
  console.log(key, value);
}_

Örnek 4: Nesne özelliklerini satır içi alın

_let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];

for (let { name, age: aliasForAge } of arrWithObjects) {
  console.log(name, aliasForAge);
}_

Örnek 5: İhtiyacınız olan şeyin derin nesne özelliklerini alın

_let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

for (let { name, tags: [firstItemFromTags, ...restOfTags] } of arrWithObjectsWithArr) {
  console.log(name, firstItemFromTags, restOfTags);
}_

Örnek 6: Örnek ( Örnek 3 _.forEach_ ile kullanılmış mı?

_let arrWithIndex = [
  [0, 'a'],
  [1, 'b'],
  [2, 'c'],
];

// Not to be confused here, `forEachIndex` is the real index
// `mappedIndex` was created by "another user", so you can't really trust it

arrWithIndex.forEach(([mappedIndex, item], forEachIndex) => {
  console.log(forEachIndex, mappedIndex, item);
});_

Örnek 7: Örnek ( Örnek 4 _.forEach_ ile kullanılmış mı?

_let arrWithObjects = [{
    name: 'Jon',
    age: 32
  },
  {
    name: 'Elise',
    age: 33
  }
];
// NOTE: Destructuring objects while using shorthand functions 
// are required to be surrounded by parenthesis
arrWithObjects.forEach( ({ name, age: aliasForAge }) => {
  console.log(name, aliasForAge)
});_

Örnek 8: Örnek ( Örnek 5 _.forEach_ ile kullanılmış mı?

_let arrWithObjectsWithArr = [{
    name: 'Jon',
    age: 32,
    tags: ['driver', 'chef', 'jogger']
  },
  {
    name: 'Elise',
    age: 33,
    tags: ['best chef', 'singer', 'dancer']
  }
];

arrWithObjectsWithArr.forEach(({
  name,
  tags: [firstItemFromTags, ...restOfTags]
}) => {
  console.log(name, firstItemFromTags, restOfTags);
});_

Fikrinize en yakın yol, dizinin her elemanı için çalıştırılacak olan bir clojure işlevini kabul eden Array.forEach() işlevini kullanmak olacaktır.

myArray.forEach(
  (item) => {
    // do something 
    console.log(item);
  }
);

Uygulanabilir başka bir yol, aynı şekilde çalışan Array.map() işlevini kullanmak, ancak her öğenin mutates işlevini kullanmak ve şöyle döndürmek olacaktır:

var myArray = [1, 2, 3];
myArray = myArray.map(
  (item) => {
    return item + 1;
  }
);

console.log(myArray); // [2, 3, 4]

Lambda sözdizimi genellikle IE 10 ya da altında çalışmaz.

Ben genellikle

[].forEach.call(arrayName,function(value,index){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});


If you are a jQuery Fan and already have a jQuery file running, you should reverse the positions of the index and value parameters

$("#ul>li").each(function(**index,value**){
    console.log("value of the looped element" + value);
    console.log("index of the looped element" + index);
});

Bunun için ForEach'i arayabilirsiniz:

let Array = [1,3,2];

theArray.forEach((element)=>{ 
  // use the element of the array
  console.log(element) 
}

eleman, her dizinin değerini 0'dan dizinin uzunluğuna sahip olacaktır.

Çıktı:

1    
3    
2

Açıklama:

forEach prototip sınıfında. buna Array.prototype.forEach (...);

prototip: https://hackernoon.com/prototypes-in-javascript-5bba2990e04b

Bunun gibi bir dizi üzerinde de değişiklik yapabilirsiniz:

for(let i=0;i<theArray.length;i++){
  console.log(i); //i will have the value of each index
}

ok işleviyle bir nesne dizisi arasında dolaşmak istiyorsanız:

let arr=[{name:'john',age:50},{name:'clark',age:19},{name:'mohan',age:26}];

arr.forEach((person)=>{
  console.log('i am '+person.name+' and i am '+person.age+ ' old');
})

Özet:

Bir dizi üzerinde yineleme yaparken genellikle aşağıdaki hedeflerden birini gerçekleştirmek isteyebiliriz:

1. Dizinin üzerinde yineleme yapmak ve yeni dizi oluşturmak istiyoruz:

   Array.prototype.map 
   
   

2. Dizinin üzerinde yineleme yapmak istiyoruz ve yeni bir dizi oluşturmuyoruz:

   Array.prototype.forEach 

for..of loop

JS'de bu iki amacı da gerçekleştirmenin birçok yolu vardır. Ancak, bazıları diğerlerinden daha uygun. Aşağıda, javascript'te dizi yinelemesini gerçekleştirmek için sık kullanılan bazı metodları (en uygun imo) bulabilirsiniz.

Yeni dizi oluşturma: Map

map(), bir dizinin her elemanını dönüştürebilen ve sonra bir yeni dizi döndüren Array.prototype üzerinde yer alan bir işlevdir. map(), bir geri çağırma işlevini argüman olarak alır ve aşağıdaki şekilde çalışır:

let arr = [1, 2, 3, 4, 5];

let newArr = arr.map((element, index, array) => {
  return element * 2;
})

console.log(arr);
console.log(newArr);

map() işlevine argüman olarak geçirdiğimiz geri çağırma, her öğe için gerçekleştirilir. Ardından, orijinal dizi ile aynı uzunlukta olan bir dizi döndürülür. Bu yeni dizide eleman, map() işlevine argüman olarak iletilen geri çağırma işlevi tarafından dönüştürülür.

map ile forEach ve for..of loop gibi diğer döngü mekanizmaları arasındaki belirgin fark,map öğesinin yeni dizi olarak geri dönmesi ve eski dizinin bozulmadan kalmasıdır (açıkça splice gibi düşünerek işlediğiniz durumlar hariç). 

Ayrıca map işlevinin geri çağrısının, geçerli yinelemenin dizin numarasını ikinci bir argüman olarak sağladığını unutmayın. Ayrıca, üçüncü argüman, map 'nin çağrıldığı diziyi sağlıyor mu. Bazen bu özellikler çok faydalı olabilir.

forEach kullanarak döngü

forEach, Array.prototype'da bulunan ve geri çağırma işlevini argüman olarak alan bir işlevdir. Daha sonra dizideki her eleman için bu geri çağırma işlevini yürütür. map() işlevinin aksine, forEach işlevi hiçbir şey döndürmez (undefined). Örneğin:

let arr = [1, 2, 3, 4, 5];

arr.forEach((element, index, array) => {

  console.log(element * 2);

  if (index === 4) {
    console.log(array)
  }
  // index, and oldArray are provided as 2nd and 3th argument by the callback

})

console.log(arr);

map işlevi gibi, forEach geri çağrısı, geçerli yinelemenin dizin numarasını ikinci bir argüman olarak sunar. Ayrıca üçüncü argüman, forEach 'nin çağrıldığı diziyi sağlar. 

for..of öğesini kullanarak öğeler arasında döngü

for..of döngüsü, bir dizinin (veya herhangi bir yinelenebilir nesnenin) her bir elemanı boyunca döngü yapar. Aşağıdaki şekilde çalışır:

let arr = [1, 2, 3, 4, 5];

for(let element of arr) {
  console.log(element * 2);
}

Yukarıdaki örnekte element, bir dizi öğesini temsil eder ve arr, döngülemek istediğimiz dizidir. element adının keyfi olması ve 'el' gibi başka bir isim veya bu durum söz konusu olduğunda daha açıklayıcı bir şey seçmiş olmamız değil. 

for..in döngüsünü for..of döngüsüyle karıştırmayın. for..in, dizinin tüm numaralandırılabilir özellikleri arasında döngü sağlarken, for..of döngüsü yalnızca dizi öğeleri arasında döngü kurar. Örneğin:

let arr = [1, 2, 3, 4, 5];

arr.foo = 'foo';

for(let element of arr) {
  console.log(element);
}

for(let element in arr) {
  console.log(element);
}

Büyük bir diziniz varsa, biraz verimlilik elde etmek için iterators kullanmanız gerekir. Yineleyiciler belirli JavaScript koleksiyonlarının bir özelliğidir ( Map , Set , String , Array ). Hatta, for..of başlık altında iterator kullanır.

Yineleyiciler, bir listedeki öğeleri bir akışmış gibi birer birer tüketmenize izin vererek verimliliği artırır. Bir yineleyiciyi özel yapan, bir koleksiyonu nasıl geçtiğidir. Diğer döngüler, üzerinde yineleme yapabilmek için tüm koleksiyonu önden yüklemelidir, oysa bir yineleyicinin yalnızca koleksiyondaki mevcut konumu bilmesi gerekir. 

Geçerli öğeye, yineleyicinin next yöntemini çağırarak erişirsiniz. Bir sonraki yöntem, geçerli öğenin value değerini ve koleksiyonun sonuna ne zaman ulaştığınızı belirtmek için bir boolean döndürür. Aşağıdaki bir diziden bir yineleyici oluşturma örneğidir. 

Normal dizinizi yineleyiciye dönüştürerek bu şekilde values() yöntemini kullanın: 

    const myArr = [2,3,4]

let it = myArr.values();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Ayrıca normal dizinizi yineleyiciye dönüştürebilirsiniz: Symbol.iterator böyle: 

const myArr = [2,3,4]

let it = myArr[Symbol.iterator]();

console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

Ayrıca normal array'ınızı iterator biçimine dönüştürebilirsiniz: 

let myArr = [8, 10, 12];

function makeIterator(array) {
    var nextIndex = 0;
    
    return {
       next: function() {
           return nextIndex < array.length ?
               {value: array[nextIndex++], done: false} :
               {done: true};
       }
    };
};

var it = makeIterator(myArr);

console.log(it.next().value);   // {value: 8, done: false}
console.log(it.next().value);   // {value: 10, done: false}
console.log(it.next().value);   // {value: 12, done: false}
console.log(it.next().value);   // {value: undefined, done: true}

NOT: 

• Yineleyiciler doğada tükenebilir. 
• Nesneler varsayılan olarak iterable değildir. Bu durumda for..in kullanın, çünkü değerler yerine tuşlarla çalışır.

iteration protocolburada hakkında daha fazla bilgi okuyabilirsiniz. 

var a = ["car", "bus", "truck"]
a.forEach(function(item, index) {
    console.log("Index" + index);
    console.log("Element" + item);
})

Geri arama olarak bir işlevi kabul eden ve dizinin içinde bulunan her öğe için bir kez çalışan forEach () API'sini (Javascript tarafından sağlanan) kullanabilirsiniz.

https://fullstackgeek.blogspot.com/2019/01/arrays-in-javascript-part-2.html

Python'dan geliyorum ve bu yolu daha net buldum.
dizi, dizi, örnek dizi

for(let instance of theArray)
{
    console.log("The instance",instance);
}

veya

for( instance in theArray)
{
  console.log("The instance",instance);
}

karşılaştırmak:

theArray.forEach(function(instance) {
    console.log(instance);
});

ama günün sonunda her ikisi de aynı şeyi yapıyor

Kodunuzu işlevsel bir şekilde tutmak istiyorsanız, haritayı kullanın:

theArray.map(instance => do_something);

Bu şekilde gelecekteki operasyonlar için yeni bir dizi oluşturacak ve arzu edilmeyen herhangi bir yan etkiyi geçeceksiniz.

forEach() işlevini kullanmak istiyorsanız, şöyle görünecektir - 

theArray.forEach ( element => {
    console.log(element);
});

for() işlevini kullanmak istiyorsanız, şöyle görünecektir - 

for(let idx = 0; idx < theArray.length; idx++){
    let element = theArray[idx];
    console.log(element);
}