Diziler ve koleksiyonlar için foreach js. Bir JavaScript dizisi üzerinde yineleme yapmanın tüm yolları. II. Dizi benzeri nesneleri numaralandırma

bu her biri için() yürütme yöntemi, dış görünüm öğesi dizisi için bir kez işlevini kazanır.

Bu etkileşimli örneğin kaynağı GitHub deposunda saklanır. Proje örneklerini nasıl genişleteceğinizi biliyorsanız, https://github.com/mdn/interactive-examples klonunu ve daha gelişmiş uygulamaları tekrarlayın.

Sözdizimi

parametreler

geri dönüş değeri

Tanım

for Her(), artan sırada dizideki her öğe için sağlanan bir geri arama işlevini bir kez çağırır. Özellikleri indekslemek kolay değildir, ancak değiştirilebilir veya başlatılmamış. (seyrek diziler için, .)

geri arama üç bağımsız değişkenle çağrılır:

1. elemanın değeri
2. elemanın indeksi
3. geçilen Array nesnesi

Her() için targetArg parametresi sayılırsa, bu değer geri çağırma olarak sayılır.

ForEach() tarafından işlenen öğelerin aralığı, ilk geri çağırma çağrısından önce ayarlanır. forEach() çağrısı başladıktan sonra diziye eklenen öğeler, geri çağrı tarafından ziyaret edilmeyecektir. Aramanın temel unsurlarının yanı sıra, değişen veya değişen anlamları, geri aramanın nasıl iletileceği () onları ziyaret eden bir saat için önemli olacaktır; ziyaret edilmeden önce silinen öğeler ziyaret edilmez. Nitekim, bir saatlik yineleme için ziyaret edilen öğe kaldırılır (örneğin shift() kullanılarak), sonraki öğeler atlanır. (Aşağıdaki bu örneğe bakın.)

forEach(), her dizi öğesi için her zaman bir kez işlevi geri çağırır; map() veya Reduce()'den farklı olarak, her zaman undefined değerini döndürür ve zincirlenebilir değildir. Tipik vikoristannya vipadku є vykonannya dіysnyh kіntsі kіntsya'da.

forEach() çağrıldığı diziyi değiştirmez. (Ancak, geri arama bunu yapabilir)

Bir istisna atıyormuş gibi, her biri için diğerleri arasında bir mola veya bir mola olamaz. Bu davranışa ihtiyacınız varsa, o zaman Each() yöntemi yanlış araçtır.

Erken fesih şu şekilde ayrılabilir:

Dizi yöntemleri: Every() , some() , find() ve findIndex() daha fazla yinelemenin gerekip gerekmediğini belirlemek için yüklem döndüren doğruluk değeriyle dizi öğelerini test eder.

Örnekler

Başlatılmamış değerler için işlem yok (seyrek diziler)

Bir for döngüsünü forEach'e dönüştürme

Bir dizinin içeriğini yazdırma

Not: Konsolda dizi yerine görüntülemek istiyorsanız, dizi yazıcılarının biçimlendirilmiş sürümü gibi console.table() yazabilirsiniz.

Ayak izmaritleri alternatif izmaritleri gösterir, Her() için vicorist.

Gelişmiş kod, dizideki her öğe için bir satır kaydeder:

function logArrayElements(element, index, array) ( console.log("a[" + index + "] = " + element) ) // Dizin 2'nin atlandığına dikkat edin, // bu konumda o konumda hiçbir öğe olmadığı için dizi... .forEach(logArrayElements) // günlükler: // a = 2 // a = 5 // a = 9

Başkalarının yardımı içinArg

Aşağıdaki (yapay) örnek, dizideki her girişten bir nesnenin özelliklerini günceller:

Function Counter() ( this.sum = 0 this.count = 0 ) Counter.prototype.add = function(dizi) ( array.forEach(function(giriş) ( this.sum += giriş ++this.count ), bu ) // ^---- Not ) const nesne = Counter() nesne.add() nesne.say // 3 nesne.toplam // 16

Her() için güvenliğin arşivine (ce) bir orta parametre olmadan, her çağrıldığında geri aramaya geçecektir.

Bir nesne kopyalama işlevi

Sonraki kodlar, verilen nesnenin bir kopyasını oluşturur.

Nesnenin bir kopyasının oluşturulmasından önce çeşitli şekillerde kokun. Array.prototype.forEach()'in ECMAScript 5 Object.* meta özellik işlevlerini kullanarak çalıştığı bir listenin nasıl görüntüleneceği, nasıl taranacağı hakkında yeni bir dil geliyor.

işlev kopyala(nesne) ( const kopya = Object.create(Object.getPrototypeOf(obj)) const propNames = Object.getOwnPropertyNames(obj) propNames.forEach(işlev(ad) ( const desc = Object.getOwnPropertyDescriptor(obj, ad) Nesne .defineProperty(copy, name, desc)) )) return kopya ) const obj1 = ( a: 1, b: 2 ) const obj2 = copy(obj1) // obj2 şimdi obj1'e benziyor

Yineleme sırasında bir dizi değiştirilir gibi, diğer öğeler atlanabilir.

Aşağıdaki örnek "bir" , "iki" , "dört" günlüğe kaydeder.

"(!LANG:(!LANG:iki) değerini içeren giriş" is reached, the first entry of the whole array is shifted off-resulting in all remaining entries moving up one position. Because element "four" is now at an earlier position in the array, "three" will be skipped.!}!}

forEach() yinelemeden önce dizinin bir kopyasını oluşturmaz.

Let word = ["bir", "iki", "üç", "dört"] word.forEach(function(word) ( console.log(word) if (word === "iki")) (word.shift ( ) ) )) // bir // iki // dört

Bir diziyi düzleştir

Ayak poposu sadece amaç tanıma amaçlıdır. Matematik yöntemlerine ulaşmak istiyorsanız, Array.prototype.flat() (ES2019'da çalışması beklenen ve bazı tarayıcılarda hackleniyor) hack'leyebilirsiniz.

/** * Geçilen diziyi tek boyutlu dizide düzleştirir * * @params (dizi) dizi * @returns (dizi) */ function flatten(dizi) ( const sonuç = dizi.forEach((i) => ( if (Array. ) isArray(i)) ( result.push(...flatten(i)) ) else ( result.push(i) ) )) sonuç döndür ) // Const kullanımı sorunu = , 8, 9]] düzleştir(problem) / /

Sözler veya zaman uyumsuz işlevlerin kullanımına ilişkin not

Özellikler

Tarayıcı Uyumluluğu

Tabloların bu yöndeki kompaktlığı, yapılandırma verilerinden üretilir. Verileriniz hakkında bilgi almak istiyorsanız https://github.com/mdn/browser-compat-data'ya tıklayın ve yazın.

GitHub'da uyumluluk verilerini güncelleyin

• I. Gerçek dizilerin numaralandırılması
  1. forEach yöntemi ve tartışmalı yöntemler
  2. döngü için
  3. for...in döngüsünü kullanmanın doğru yolu
  4. for...of loop (dolaylı olarak yineleyici değişken)
  5. Yineleyiciyi açıkça kullanma
• 1. Referans dizileri üzerinde yineleme yapmanın hasır yolları
  2. Doğru diziye dönüştürme
  3. Vikonannya'nın ortasındaki ob'ektiv'e saygı

I. Gerçek dizilerin numaralandırılması

1. yöntem Array.prototype.forEach;
2. döngü için klasik;
3. "doğru" bir for...in döngüsüne neden olur.

1. for...of loop (dolaylı olarak yineleyici değişken);
2. açıkça bir yineleyicinin seçimidir.

1. Her biri için yöntem ve tartışmalı yöntemler

Vikoristan örneği:
var a = ["a", "b", "c"]; a.forEach(işlev(giriş) ( console.log(giriş); ));
forEach'in vahşi sürümü için, bu yöntemi yerel olarak desteklememek için tarayıcılar için es5-shim öykünme kitaplığını bağlamanız gerekir. Onlardan önce IE 8 ve daha fazlası görülebilir erken sürümler, yakі dosі de-not-de hala vikoristovuyutsya.

Her aktarımdan önce, akış öğesinin indeksini ve değerini diziye kaydetmek için yerel değişiklikleri seslendirmesi gerekmeyenler vardır, kokuşmuş parçalar otomatik olarak argüman olarak geri çağırma işlevine iletilir.

Dış görünüm öğesi için haftalık geri aramada çalkantılı olabiliyorsanız, şikayet etmeyin ve okuyun.

Bir dizideki tüm öğeler üzerinde yineleme yapmak için ForEach atamaları, ancak ES5, diğer öğelerin tümü veya herhangi biri üzerinde yineleme için birkaç temel yöntem sunar, ayrıca bunlarla birlikte başka öğeler olduğunda yazma:

• her - doğruya dönüşür, bu nedenle bir dış görünüm öğesi için geri arama dizisi için doğruya dönüştürülen değerleri döndürür.
• geri çağırma dizisindeki tek bir öğe için bir değeri true olarak yayınlamak istiyorsanız, bir şekilde true değerini çevirin.
• filtre - çıkış dizisinin öğelerini içeren yeni bir dizi oluşturun, bunun için geri aramalar true olur.
• map - saran bir geri aramada saklanan yeni bir dizi oluşturun.
• azaltmak - diziyi tek bir değere indirgemek, ilkinden başlayarak dizi üzerinden dış görünüm öğesine geri aramayı çağırmak (dizi öğelerinin ve diğer alt çanta işlevlerinin toplamını azaltabiliriz).
• redüktörRight - azaltmak için benzer şekilde çalışır, ancak öğeler üzerinde ters sırada yinelenir.

2. for döngüsü

Var a = ["a", "b", "c"]; var indeksi; for (indeks = 0; dizin< a.length; ++index) { console.log(a); }
Dizinin uzunluğu, son döngünün uzunluğuyla değiştirilemezse ve döngünün kendisi, genişleme kodunun (küçük olan) üretkenlik planı için kritik önem taşıyorsa, mümkün olan en kısa uzunluk için daha optimal bir sürüm seçebilirsiniz. dizi:

Var a = ["a", "b", "c"]; var index, len; for (indeks = 0, len = a.uzunluk; indeks< len; ++index) { console.log(a); }
Teorik olarak, bu kod biraz daha hızlı, daha aşağı doğru hareket ettirilebilir.

Öğelerin numaralandırma sırası önemli olmadığından, optimizasyon planında daha da ileri gidebilir ve değişikliği, dizinin geri kalanını kaydetmek için kullanabilir, numaralandırma sırasını tersine çevirebilirsiniz:

Var a = ["a", "b", "c"]; var indeksi; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )
Tim daha az değil, modern JavaScript motorlarında optimizasyonlu benzer oyunlar hiçbir şey ifade etmiyor.

3. for...in döngüsünün doğru kullanımı

Tim, bazı yönlerden, farklı diziler üzerinde yineleme yapmak gibi, daha az değildir, çünkü ... in kahverengi görünebilir, çünkü aşağıdaki uçta gösterildiği gibi, bunu yalnızca diğer girişlerle yapmak mümkündür:

// a - dizi genişletme var a =; bir = "a"; bir = "b"; bir = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^\d*$/.test(key) && key<= 4294967294) { console.log(a); } }
Bu dış görünüm yineleme döngüsü için iki revizyon vardır:

1. dizinin anahtar adına gücü olabilecekler (ilk prototipten düşürülmemiş).
2. anahtarı, değeri 4294967294'ten küçük olan bir tamsayının onuncu girişinin yerini alacak bir satırdır. Kalan sayılar alındı ​​mı? Dizideki ana öğe olabilecek en büyük dizin olan ES5 dizisinin dizinine atanır: (2^32 - 2) = 4294967294 .

Kodu yeniden yazmak için bu kadar hantal bir kod yazmamak için diziyi numaralandırmak gerekirse benzer bir fonksiyonda düzenleyebilirsiniz:

işlev arrayHasOwnIndex(dizi, anahtar) ( dizi.hasOwnProperty(anahtar) && /^0$|^\d*$/.test(anahtar) && anahtarını döndürür<= 4294967294; }
Ardından, popodan gelen döngünün gövdesi önemli ölçüde hızlanacaktır:

İçin (a anahtarını girin) ( if (arrayHasOwnIndex(a, key))) ( console.log(a); ) )
Gözden geçirilen revizyon kuralları evrenseldir ve tüm görüşlere bitişiktir. Ve yine de, yenisi yerine, daha kısa versiyonu yenebilirsin, ancak resmi olarak daha büyük versiyonun doğru, koruyucu, eklentisini bilmiyorum:

For (a'yı girin) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )

4. for...of döngüsü (dolaylı olarak yineleyici değişken)

yineleyici - değerlerin sırasını (tükenmezin son sayısı) atlamak için standart yöntemi tanımlayan nesne tarafından protokolün uygulanması.
Yineleyici - next() yönteminin atandığı nesnenin tamamı - nesneyi iki güçten döndüren, argümansız bir işlev:

1. done (boolean) - yineleyicinin yinelenecek dizinin sonuna ulaşması için true değerini kabul eder. Başka bir durumda, değer yanlış olabilir.
2. değer - yineleyici tarafından döndürüldüğü için değeri ayarlar. Do'nun gücü doğru olabileceğinden (gün içinde) atanmamak mümkündür.

victoria hisse senedi... için:

Varval; var a = ["a", "b", "c"]; for (val of a) (console.log(val); )
Üzerine gelinen uygulamada, for...of döngüsü, dizinin dış görünüm değerini almak için dolaylı olarak Array nesnesinin yineleyicisini çağırır.

5. Yineleyiciyi açıkça kullanma

Var a = ["a", "b", "c"]; var it = a.entries(); var girişi; while (!(entry = it.next()).done) ( console.log(entry.value); )
Bu durumda, Array.prototype.entries yöntemi, dizinin değerini görüntülemek için kullanılan bir yineleyiciyi döndürür. input.value'nun dış görünüm yinelemesinde, [anahtar, değer] biçiminde bir dizi iletilir.

II. Dizi benzeri nesneleri numaralandırma

1. Gerçek dizileri sıralamanın tuhaf yolları

for ve for...in yapıları dizi benzeri nesnelere tam olarak dizilerle aynı şekilde yapıştırılabilir.

ForEach ve diğer Array.prototype yöntemleri de dizi benzeri nesneleri çağırır. Bunun için Function.call veya Function.apply'yi tweetlemek gerekir.

Örneğin, forEach öğesini Node nesnesinin childNodes yetkisine ayarlamak istiyorsanız, bunu şu şekilde yapabilirsiniz:

Array.prototype.forEach.call(node.childNodes, function(child) ( // alt nesneyle bir şeyler yap));
Seçimi tekrarlamanın rahatlığı için, bir okremіy zminnіy ve vikoristovuvat için Array.prototype.forEach yöntemini kısa bir yöntem olarak kullanabilirsiniz:

// (aşağıdaki tüm kodların aynı kapsamda olduğu varsayılarak) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // alt nesne etrafında çalış));
Yineleyici olarak dizi benzeri bir nesne olarak, tıpkı başvuru dizilerinde olduğu gibi nesnenin numaralandırılması için açık ve örtük olarak bükülebilir.

2. Bir referans dizisine dönüştürme

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);
Örneğin, bir NodeList koleksiyonunu bir referans dizisine dönüştürmek istiyorsanız, şunun gibi bir şeye ihtiyacınız olacaktır:

Vardivs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);
Güncelleme: rock ve torbasow yorumlarında belirtildiği gibi ES6 Array.prototype.slice içinde orjinal Array.from metodunun yerini alabilir.

3. Orta sınıfın nesnelerine saygı

Bu nedenle Array.prototype yöntemlerinin robotunun programınızın çalışması planlanan skin ortamında (tarayıcı) test edilmesi önemlidir.

• I. Gerçek dizilerin numaralandırılması
  1. forEach yöntemi ve tartışmalı yöntemler
  2. döngü için
  3. for...in döngüsünü kullanmanın doğru yolu
  4. for...of loop (dolaylı olarak yineleyici değişken)
  5. Yineleyiciyi açıkça kullanma
• II. Dizi benzeri nesneleri numaralandırma
  1. Referans dizileri üzerinde yineleme yapmanın hasır yolları
  2. Doğru diziye dönüştürme
  3. Vikonannya'nın ortasındaki ob'ektiv'e saygı

I. Gerçek dizilerin numaralandırılması

Şu anda, bir dizinin öğeleri üzerinde yineleme yapmanın üç yolu vardır:

1. yöntem Array.prototype.forEach;
2. döngü için klasik;
3. "doğru" bir for...in döngüsüne neden olur.

Ek olarak, yeni ECMAScript 6 (ES 6) standardının ortaya çıkmasıyla birlikte iki yol daha vardır:

1. for...of loop (dolaylı olarak yineleyici değişken);
2. açıkça bir yineleyicinin seçimidir.

1. Her biri için yöntem ve tartışmalı yöntemler

Projeniz ECMAScript 5 (ES5) yetenek standardına katkıda bulunuyormuş gibi, yeni bir özellikten yararlanabilirsiniz: forEach yöntemi.

Vikoristan örneği:

Var a = ["a", "b", "c"]; a.forEach(işlev(giriş) ( console.log(giriş); ));

forEach'in vahşi sürümü için, bu yöntemi yerel olarak desteklememek için tarayıcılar için es5-shim öykünme kitaplığını bağlamanız gerekir. Onlardan önce IE 8 ve önceki sürümler görülüyor, ancak yine de onlardan önce galip geliyorlar.

Her aktarımdan önce, akış öğesinin indeksini ve değerini diziye kaydetmek için yerel değişiklikleri seslendirmesi gerekmeyenler vardır, kokuşmuş parçalar otomatik olarak argüman olarak geri çağırma işlevine iletilir.

Dış görünüm öğesi için haftalık geri aramada çalkantılı olabiliyorsanız, şikayet etmeyin ve okuyun.

forEach atamaları bir dizideki tüm öğeler üzerinde yineleme yapmak için kullanılır, ancak ES5 ayrıca tüm veya diğer öğeler üzerinde yineleme yapmak için birkaç temel yöntemin yanı sıra yanlarında hangisi varsa onu yazmak için birkaç temel yöntem sunar:

• her - doğruya dönüşür, bu nedenle bir dış görünüm öğesi için geri arama dizisi için doğruya dönüştürülen değerleri döndürür.
• geri çağırma dizisindeki tek bir öğe için bir değeri true olarak yayınlamak istiyorsanız, bir şekilde true değerini çevirin.
• filtre - çıkış dizisinin öğelerini içeren yeni bir dizi oluşturun, bunun için geri aramalar true olur.
• map - saran bir geri aramada saklanan yeni bir dizi oluşturun.
• azaltmak - diziyi tek bir değere indirgemek, ilkinden başlayarak dizi üzerinden dış görünüm öğesine geri aramayı çağırmak (dizi öğelerinin ve diğer alt çanta işlevlerinin toplamını azaltabiliriz).
• redüktörRight - azaltmak için benzer şekilde çalışır, ancak öğeler üzerinde ters sırada yinelenir.

2. for döngüsü

kurallar için iyi yaşlı:

Var a = ["a", "b", "c"]; var indeksi; for (indeks = 0; dizin< a.length; ++index) { console.log(a); }

Dizinin uzunluğu, son döngünün uzunluğuyla değiştirilemezse ve döngünün kendisi, genişleme kodunun (küçük olan) üretkenlik planı için kritik önem taşıyorsa, mümkün olan en kısa uzunluk için daha optimal bir sürüm seçebilirsiniz. dizi:

Var a = ["a", "b", "c"]; var index, len; for (indeks = 0, len = a.uzunluk; indeks< len; ++index) { console.log(a); }

Teorik olarak, bu kod biraz daha hızlı, daha aşağı doğru hareket ettirilebilir.

Öğelerin numaralandırma sırası önemli olmadığından, optimizasyon planında daha da ileri gidebilir ve değişikliği, dizinin geri kalanını kaydetmek için kullanabilir, numaralandırma sırasını tersine çevirebilirsiniz:

Var a = ["a", "b", "c"]; var indeksi; for (index = a.length - 1; index >= 0; --index) ( console.log(a); )

Tim daha az değil, modern JavaScript motorlarında optimizasyonlu benzer oyunlar hiçbir şey ifade etmiyor.

3. for...in döngüsünün doğru kullanımı

for ... döngüsünü kazandığınız için sizi mutlu etmek için, diziler üzerinde yinelemenin atamaların olduğu şey olmadığını unutmayın. Daha geniş bir Umman'da, for...in döngüsü, dizinin dizinini değil, nesnenin yetkisinin eski haline getirilmesini sıralar.

Tim, bazı yönlerden, farklı diziler üzerinde yineleme yapmak gibi, daha az değildir, çünkü ... in kahverengi görünebilir, çünkü aşağıdaki uçta gösterildiği gibi, bunu yalnızca diğer girişlerle yapmak mümkündür:

// a - dizi genişletme var a =; bir = "a"; bir = "b"; bir = "c"; for (var key in a) ( if (a.hasOwnProperty(key) && /^0$|^d*$/.test(key) && key<= 4294967294) { console.log(a); } }

Bu dış görünüm yineleme döngüsü için iki revizyon vardır:

1. dizinin anahtar adına gücü olabilecekler (ilk prototipten düşürülmemiş).
2. anahtarı, değeri 4294967294'ten küçük olan bir tamsayının onuncu girişinin yerini alacak bir satırdır. Kalan sayılar alındı ​​mı? Dizideki ana öğe olabilecek en büyük dizin olan ES5 dizisinin dizinine atanır: (2^32 - 2) = 4294967294 .

Açıkçası, bu tür revizyonlar döngünün son saatini alıp götürecek. Yine de, farklı bir dizide, bu yöntem verimlidir, for döngüsünü düşürür, parçalar aynı şekilde dizide açıkça belirtilen öğelere göre sıralanır. Bu nedenle, uygulama için, for döngüsü için 10001'e karşı toplam 3 yineleme (0, 10 ve 10000 dizinleri için) olacaktır.

Kodu yeniden yazmak için bu kadar hantal bir kod yazmamak için diziyi numaralandırmak gerekirse benzer bir fonksiyonda düzenleyebilirsiniz:

işlev arrayHasOwnIndex(dizi, anahtar) ( dizi.hasOwnProperty(anahtar) && /^0$|^d*$/.test(anahtar) && anahtarını döndürür<= 4294967294; }

Ardından, popodan gelen döngünün gövdesi önemli ölçüde hızlanacaktır:

İçin (a anahtarını girin) ( if (arrayHasOwnIndex(a, key))) ( console.log(a); ) )

Gözden geçirilen revizyon kuralları evrenseldir ve tüm görüşlere bitişiktir. Ve yine de, yenisi yerine, daha kısa versiyonu yenebilirsin, ancak resmi olarak daha büyük versiyonun doğru, koruyucu, eklentisini bilmiyorum:

For (a'yı girin) ( if (a.hasOwnProperty(key) && String(parseInt(key, 10)) === key) ( console.log(a); ) )

4. for...of döngüsü (dolaylı olarak yineleyici değişken)

ES6, hala siyah durumdayken, JavaScript yineleyicilerini tanıtmaktan suçludur.

yineleyici - değerlerin sırasını (tükenmezin son sayısı) atlamak için standart yöntemi tanımlayan nesne tarafından protokolün uygulanması.
Nesne, next() atanan yeni yöntemde olduğu gibi bir yineleyicidir - nesneyi iki güçten döndüren argümansız bir işlev:

1. done (boolean) - yineleyicinin yinelenecek dizinin sonuna ulaşması için true değerini kabul eder. Başka bir durumda, değer yanlış olabilir.
2. değer - yineleyici tarafından döndürüldüğü için değeri ayarlar. Do'nun gücü doğru olabileceğinden (gün içinde) atanmamak mümkündür.

Bir sürü tomurcuklanan nesne, dahil. kilitler için yineleyiciler aramak için dizilere yardım edin. Referans dizilerine bir yineleyici eklemenin en basit yolu, yeni bir for...of yapısı kullanmaktır.

victoria hisse senedi... için:

Varval; var a = ["a", "b", "c"]; for (val of a) (console.log(val); )

Üzerine gelinen uygulamada, for...of döngüsü, dizinin dış görünüm değerini almak için dolaylı olarak Array nesnesinin yineleyicisini çağırır.

5. Yineleyiciyi açıkça kullanma

Yineleyiciler ayrıca bükülebilir ve açıkça, gerçekten, bir şekilde kod anlamlı bir şekilde daraltılabilir hale gelir, for...of döngüsü ile hizalanır. Buna benzer:

Var a = ["a", "b", "c"]; var girişi; while (!(entry = a.next()).done) ( console.log(entry.value); )

II. Dizi benzeri nesneleri numaralandırma

Doğru dizilerin suçu, JavaScript de kütle benzeri nesneler . Dizinin öğeleriyle eşleşen sayıların adlarıyla uzunluk ve güce sahip olanları eşleştirmek için referans dizileri ile. Örnek olarak, bir DOM koleksiyonunu NodeList'i ve bir işlevin/yöntemin ortasında bulunan bir bağımsız değişken sözde dizisini adlandırabilirsiniz.

1. Gerçek dizileri sıralamanın tuhaf yolları

En azından daha fazlası, ancak başvuru dizilerinin numaralandırılmasına yönelik tüm yöntemler, dizi benzeri nesnelerin numaralandırılması için durdurulamaz.

for ve for...in yapıları dizi benzeri nesnelere tam olarak dizilerle aynı şekilde yapıştırılabilir.

Dermal ve diğer yöntemler için Array.prototype ayrıca dizi benzeri nesnelere de yer verir. Bunun için Function.call veya Function.apply'yi tweetlemek gerekir.

Örneğin, forEach öğesini Node nesnesinin childNodes yetkisine ayarlamak istiyorsanız, bunu şu şekilde yapabilirsiniz:

Array.prototype.forEach.call(node.childNodes, function(child) ( // alt nesneyle bir şeyler yap));

Seçimi tekrarlamanın rahatlığı için, bir okremіy zminnіy ve vikoristovuvat için Array.prototype.forEach yöntemini kısa bir yöntem olarak kullanabilirsiniz:

// (aşağıdaki tüm kodların aynı kapsamda olduğu varsayılarak) var forEach = Array.prototype.forEach; // ... forEach.call(node.childNodes, function(child) ( // alt nesne etrafında çalış));

Yineleyici olarak dizi benzeri bir nesne olarak, tıpkı başvuru dizilerinde olduğu gibi nesnenin numaralandırılması için açık ve örtük olarak bükülebilir.

2. Bir referans dizisine dönüştürme

Ayrıca dizi benzeri bir nesneyi numaralandırmanın daha basit bir yolu vardır: onu bir referans dizisine dönüştürün ve referans dizilerini numaralandırmanın daha iyi bir yolunu bulmaya çalışın. Dönüşüm için, herhangi bir büyük nesneye yapıştırılabilen evrensel Array.prototype.slice yöntemini bükebilirsiniz. Aşağıdaki örnekte gösterildiği gibi, savaşmak daha da kolaydır:

Var trueArray = Array.prototype.slice.call(arrayLikeObject, 0);

Örneğin, bir NodeList koleksiyonunu bir referans dizisine dönüştürmek istiyorsanız, şunun gibi bir şeye ihtiyacınız olacaktır:

Vardivs = Array.prototype.slice.call(document.querySelectorAll("div"), 0);

3. Orta sınıfın nesnelerine saygı

Array.prototype yöntemlerini ortamın nesnelerine (DOM koleksiyonları gibi) yapıştırırsanız, bu yöntemlerin doğru çalışmasının tüm ortamlarda (tarayıcılar dahil) garanti edilmediğinden siz sorumlusunuz. Belirli bir nesnenin davranışını belirli bir ortamda saklamak daha iyidir; bu, HasProperty soyut işleminin hangi nesnede nasıl uygulandığı açısından daha doğrudur. Sorun, ES5 standardının kendisinin bir işlemi gerçekleştirirken bir nesnenin yanlış davranış olasılığına izin vermesidir (böl. §8.6.2).

Bu nedenle Array.prototype yöntemlerinin robotunun programınızın çalışması planlanan skin ortamında (tarayıcı) test edilmesi önemlidir.

Örnek olarak, jQuery kitaplığının her yöntemine farklı bir işlev uygulamaya daha yakından bakalım.

jQuery kitaplığında her birinin adı olan 2 farklı gün vardır.

İlk (jQuery.each) - bu, bir dizinin veya bir nesnenin öğelerini numaralandırabileceğiniz, jQuery'nin evrensel bir işlevidir.

Arkadaş (her biri) - arkalarında bir döngü düzenlemek için bir dizi öğeden önce zastosovyatsya olan aynı yöntem.

Each(jQuery.each) döngüsü. Victoria'yı uygula

Her işlevin sözdizimi:

// dizi chi nesnesi - bir dizi chi nesnesi, sıralanması gereken güç öğeleri // geri çağrı - chi nesneleri dizisini yetkiyle eşleştirmek için bir işlev $.each(dizi chi nesnesi, geri çağrı);

Her biri fonksiyona sahip robot, izmaritlerde analiz edilir.

Örnek 1 numara. Yenisinde, dizinin (dizinin) tüm öğelerini numaralandırmak mümkündür.

// 3 satırdan oluşan dizi var arr = ["Car", "Vantage", "Bus"]; // dizi üzerinde yineleme arr $.each(arr,function(index,value)( // dії, dış görünüm öğesi için diziyle nasıl eşleştirilir // dizin - akış öğesinin diziye olan dizini (sayı) )) // değer - akış öğesi dizisinin değeri //dizinin dizini ve değerini konsola gösteren konsol.log("İndeks:" + dizin + "; Değer: "+ değer); )); /* Sonuç (konsolda): Dizin: 0; Değer: Araba İndeksi: 1; Değer: Aranıyor İndeks: 2; Değer: Otobüs */

Yukarıdaki kod durumunda, işlev her biri dizi üzerinde yinelemek için saldırıya uğrar. işlev görebilir 2 dil ayarı. İlk parametre öz (nesneler dizisi), düzenlenmesi gereken öğelerdir (yetki). Bu vipadka'da - tse dizisi arr. Diğer bir parametre, kaplama elemanı (bu durumda) dizisi için vikon olacağından sürgülü vananın işlevidir. Çeşitli değişikliklerin yardımı için ortasında bulunan 2 parametre olabilir. İlk parametre, elemanın sıra numarasıdır (0'dan başlar). Diğer parametre, dizideki akış öğesinin değeridir.

Örnek numarası 2. Kimin için tüm uygulama zdiisnimo nesnenin tüm güçlerini sıralıyor.

Her işlev, JavaScript nesnelerini seçmek için kullanılabilir. Vіdmіn vykoristannya scho scho parametrelerinin funktsії vozrotnogo viklik mayut anlamındadır. İlk parametre nesnenin kalitesinin adını, diğeri ise özelliğin değerini alır.

Örnek numarası 3. Yeni zdіysnimo, katlanmış yapıyı sıraladı (her birinin katkılarını nasıl kazanacağımızı görebiliriz).

// 2 güçten oluşan bir nesne. Bu nesnenin dış görünüm gücü, öğeleri nesneler de olabilen bir dizi değeri olabilir var makaleler = ("Önyükleme": [("id":"1", "başlık":"Giriş"), ("id ": "2" , "title":"Nasıl eklenir"), ("id":"3", "title":"Sitka") ], "JavaScript": [ ("id":"4", "title" :"Temel Bilgiler"), ("id":"5", "title":"Öğelerin seçimi")]); $.each(makaleler,işlev(anahtar,veri) ( console.log("Yüklenen: " + anahtar); $.each(veri, işlev(index,değer) (console.log("Makale: id = " + değer) ["id"] + "; Başlık = "+ değer["başlık"]); )); )); /* Sonuç: Bölüm: Önyükleme Makalesi: id = 1; İsim = Giriş Makalesi: id = 2; İsim = Makale nasıl eklenir: id = 3; Ad = Sitka Bölümü: JavaScript Makale: id = 4; İsim = Temel Makale: id = 5; İsim = Eleman seçimi */

Her biri nasıl kesilir (döngüden çıkılır)?

Her döngünün kırılması, değeri false yapmaktan sorumlu olan return ifadesinin yardımıyla gerçekleşir.

Örneğin, arr dizisindeki 7 sayısını öğrendikten sonra döngüyü kıralım:

// 5 sayı dizisi var arr = ; // Bilinmesi gereken bir sayı var find = 7; // dizi üzerinde yineleme arr $.each(dizi, fonksiyon (indeks, değer) ( // gerekli sayı bulunursa, sonra .. if (değer === bul) ( // konsola giriş yapın console.log(" Yaşasın!) "+ + bul +" sayısı bulundu! Verilen sayı maє іndex: "+ index); // döngüyü kes return false; ) başka (// aksi takdirde tam sayıyı konsol konsoluna yazdırın .log("Tam sayı: "+ değer);))); /* Sonuç (konsolda): Tam sayı: 5 Tam sayı: 4 Yaşasın! 7 numara bulundu! Tse numarası ana dizini: 2 */

Bir sonraki yinelemeye nasıl geçilir (her biri devam eder)?

Akış yinelemesinin tüm kesintileri ve bir sonrakine geçiş, yanlış olan değerin annesinin hatası olan dönüş operatörünün yardımı için gereklidir.

// sayı dizisi var arr = ; // arr dizisindeki tüm elemanları yerleştirebilen dizi, crim çift sayıları var yeniarr = ; // diziyi yinele arr $.each(dizi, function (index, value) ( ​​// eleman bir dude ise, atla if (value % 2 === 0)) ( // kır iş parçacıklı yineleme ve saldırgan dönüşe git; ) // dizi yeniarr değer değerini itin yeniarr.push(değer); )); console.log("Cob dizisi (dizi):" + arr.join()); console.log("Sonuç dizisi (newarr):" + newarr.join()); /* Sonuç (konsolda): Outar dizisi (dizi): 3,5,4,9,17,19,30,35,40 Sonuç dizisi (newarr): 3,5,9,17,19,35 */

Akış öğelerinin numaralandırılması (.each)

Her yöntemin sözdizimi (yalnızca seçili öğelerde değişir):

Adım adım popo üzerinde .each yöntemini nasıl kullanacağımızı bulalım (div öğelerini yineleyelim):

Üzerine gelinen örnekte, her yöntemin basitleştirilmiş bir kümesi vardır ($("div") seçicisinden sonra seçilen öğeler). Her yöntem için bir sarmalayıcı olarak, akış kümesinin dış görünüm öğesi (bu durumda dış görünüm div öğesi için) için bir kesme olacağından işlev çağrılır. Bu fonksiyon 2 isteğe bağlı dil parametresine sahip olabilir. Bunlardan biri (indeks) akış yinelemesinin seri numarası, diğeri (eleman) akış öğesine gönderilen DOM'dir. Ayrıca, this anahtar sözcüğü, akış öğesine bir DOM mesajı yerleştirmek için diğer parametrenin yanı sıra işlevin ortasında bulunur.

Örneğin, tüm öğeler için href niteliğinin değerini konsolda ve diğer tarafta gösteririz:

$("a").each(function() ( console.log($(this).attr("href")); ));

$("a").each(function() ( var link = $(this).attr("href"); if ((link.indexOf("http://") == 0) || (bağlantı .indexOf("https://") == 0))) ( console.log("href gönderildi = " + link); ) ))); // Bu üçüncü taraf dağıtımında nasıl yayınlanır: // Yandex // JavaScript nasıl çalışır? // Bootstrap // O zaman konsoldaki sonuç daha olasıdır: // https://www.yandex.ru/ // http://getbootstrap.com/

Örneğin, DOM elemanları üzerinde her bir döngünün nasıl organize edileceğine, name sınıfının nasıl bulunacağına bakalım (aynı sınıfın tüm elemanlarını sıralayalım).

Örneğin, yandaki tüm öğeleri nasıl sıralayacağımızı bulalım.

Örneğin, tüm girdi öğelerinin değerini yanda gösteriyoruz.

$("input").each(function() ( console.log($(this).val()); ));

Örneğin, tüm alt öğeleri yineleyelim, ul z id="myList" (her çocuk) içinde yakі raztashovanі.

• HTML
• JavaScript

Her bir yönteme jQuery'nin kalan indeksini (öğesini) atamanıza yardımcı olacak bir yola bakalım.

// Elemanları seç var myList = $("ul li"); // Seçimdeki eleman sayısını belirleyin var total = myList.length; // kalan öğeleri yineleyebiliriz myList.each(function(index) ( if (index === toplam - 1) ( // seçimin kalan öğesi )));

Son zamanlarda ihtiyacım vardı JavaScript ilişkisel dizi oluştur. Muhteşem bir rütbede, daha önce bende, daha önce ihtiyaç duyulmadı JavaScript. Yoga gibi internette süründüm. Ve şimdiden cıvıldamaya başladım, ne kadar çok insan yazıyor, ne imkansız, JavaScript yoga yok. Dobre benim bagatorichny dosvid bana kokunun çıldırtıcı olduğunu söyledi. Bunun için, zreshtoyu, tanıdım, javascript'te ilişkisel bir dizi nasıl oluşturulur, Makalemde anlatacaklarım hakkında.

Aşağıdaki kod, içinde ilişkisel bir dizi oluştur, sonra bir i öğesi daha ekleyin, nareshti, dizi döngü boyunca sıralanır:

Bu yazılara baktık ilişkisel dizilerin oluşturulması, їх değişiklik ve döngü boyunca ikinci bir numaralandırma için. ben özellikle bir papazım ilişkisel JavaScript dizileri bir kereden fazla, ancak böyle bir olasılık hakkında bilmek obov'yazkovo gereklidir.