JavaScript'te bir dizi i├žin her biri i├žin?


Al─▒nan cevaba git


JavaScript kullanarak bir dizideki t├╝m giri┼čler aras─▒nda nas─▒l dola┼čabilirim?

Bunun gibi bir ┼čey oldu─čunu d├╝┼č├╝nd├╝m:

 forEach(instance in theArray)
 

Dizilim nerede theArray , ama bu yanl─▒┼č gibi g├Âr├╝n├╝yor.


4403









Cevap say─▒s─▒n─▒ say: 30






TL; DR

  • Kullanmay─▒n for-in sen ├Ânlemler ile kullanmak ya da en az─▒ndan o size can s─▒k─▒c─▒ gelebilir neden fark─▒nda olmad─▒klar─▒ s├╝rece.
  • En iyi bahislerin genellikle

    • bir for-of d├Âng├╝ (yaln─▒zca ES2015 +),
    • Array#forEach ( spec | MDN ) (veya akrabalar─▒ some ve benzeri) (yaln─▒zca ES5 +),
    • basit bir eski moda for d├Âng├╝
    • veya for-in g├╝venlik ├Ânlemleriyle birlikte.

Ama ke┼čfedilecek daha ├žok ┼čey var ...


JavaScript diziler ve dizi benzeri nesneler aras─▒nda d├Âng├╝ olu┼čturmak i├žin g├╝├žl├╝ semantik ├Âzelliklere sahiptir. Cevab─▒ iki b├Âl├╝me ay─▒rd─▒m : Orijinal diziler i├žin se├ženekler ve nesne, di─čer yinelenebilir nesneler (ES2015 +), DOM koleksiyonlar─▒ ve benzerleri i├žin sadece diziye benzeyen ┼čeyler se├ženekleri arguments .

┼×imdi , ES2015'i ES5'e aktararak , ┼čimdi ES515 se├ženeklerini , hatta ES5 motorlar─▒nda bile kullanabilece─činizi not edece─čim. "ES2015 transpiling" / "ES6 transpiling" i├žin daha fazla bilgi ara ...

Tamam, se├ženeklerimize bakal─▒m:

Ger├žek Diziler ─░├žin

┼×u anda en ├žok desteklenen s├╝r├╝m olan ECMAScript 5'te ("ES5") ve ECMAScript 2015'te ("ES2015", "ES6") eklenen iki se├žene─činiz var :

  1. Kullan─▒m forEach ve ilgili (ES5 +)
  2. Basit bir for d├Âng├╝ kullan─▒n
  3. Do─čru kullan─▒n for-in
  4. Kullan for-of (dolayl─▒ olarak bir yineleyici kullan ) (ES2015 +)
  5. A├ž─▒k├ža bir yineleyici kullan─▒n (ES2015 +)

Detaylar:

1. Kullan─▒m forEach ve ilgili

Array ES5'in ekledi─či ├Âzelliklere (do─črudan veya polyfills kullanarak) eri┼čebildi─činiz belirsiz modern ortamlarda (yani, IE8 de─čil ), forEach ( spec | MDN ) kullanabilirsiniz :

 var a = ["a", "b", "c"];
a.forEach(function(entry) {
    console.log(entry);
}); 

forEach bir geri arama i┼člevini ve iste─če ba─čl─▒ olarak this , geri arama ├ža─čr─▒l─▒rken kullan─▒lacak bir de─čer kabul eder (yukar─▒da kullan─▒lmaz). Seyrek dizilerde var olmayan giri┼čleri atlamak i├žin dizideki her giri┼č i├žin geri ├ža─č─▒rma ├ža─čr─▒l─▒r. Yukar─▒daki tek bir arg├╝man kullanmama ra─čmen, geri ├ža─čr─▒ ├╝├ž ile ├ža─čr─▒l─▒r: Her giri┼čin de─čeri, o giri┼čin dizini ve yineledi─činiz dizinin referans─▒ (fonksiyonunuz zaten kullan─▒┼čl─▒ de─čilse) ).

IE8 gibi eski taray─▒c─▒lar─▒ desteklemedi─činiz s├╝rece (NetApps'in Eyl├╝l 2016'da yazd─▒─č─▒ pay─▒n% 4'├╝nden biraz daha fazla pazar pay─▒nda g├Âsterdi─či gibi), forEach genel ama├žl─▒ bir web sayfas─▒n─▒ ┼čim┼ček olmadan kullanabilirsiniz. Eski taray─▒c─▒lar─▒ desteklemeniz gerekiyorsa, shimming / polyfilling forEach kolayca yap─▒l─▒r (├že┼čitli se├ženekler i├žin "es5 shim" i aray─▒n).

forEach yineleme i┼člevinin arg├╝manlar─▒ olarak sa─čland─▒klar─▒ ve yaln─▒zca bu yinelemeyi ├žok iyi bi├žimde kapsad─▒klar─▒ i├žin, i├žerdi─či kapsamdaki dizin olu┼čturma ve de─čer de─či┼čkenlerini bildirmeniz gerekmedi─či i├žin avantajl─▒d─▒r.

Her bir dizi giri┼či i├žin i┼člev ├ža─čr─▒s─▒ yapman─▒n ├žal─▒┼čma zaman─▒ maliyeti konusunda endi┼čeleniyorsan─▒z; ayr─▒nt─▒lar .

Ek forEach olarak, "hepsi aras─▒nda d├Âng├╝" i┼člevi de vard─▒r, ancak ES5, di─čerlerini de yararl─▒ olarak tan─▒mlam─▒┼čt─▒r: "dizi i├žinde yol al─▒p i┼člerini yapma" i┼člevleri:

  • every (geri arama ilk kez d├Ând├╝─č├╝nde false veya bir ┼čey falsey d├Ând├╝─č├╝nde d├Âng├╝y├╝ durdurur )
  • some (geri arama ilk kez geri d├Ând├╝─č├╝nde true ya da ger├žek olmayan bir ┼čey oldu─čunda d├Âng├╝lemeyi durdurur)
  • filter (S├╝zge├ž i┼člevinin d├Ând├╝rd├╝─č├╝ true ve d├Ând├╝rd├╝─č├╝ ├Â─čelerin ├ž─▒kar─▒ld─▒─č─▒ ├Â─čeleri i├žeren yeni bir dizi olu┼čturur false )
  • map (geri ├ža─č─▒rman─▒n d├Ând├╝rd├╝─č├╝ de─čerlerden yeni bir dizi olu┼čturur)
  • reduce (arka arkaya ├ža─čr─▒ yaparak, ├Ânceki de─čerlerden ge├žerek bir de─čer olu┼čturur; ayr─▒nt─▒lar i├žin ├Âzelli─če bak─▒n; bir dizinin i├žeri─čini ve di─čer bir├žok ┼čeyi toplamak i├žin kullan─▒┼čl─▒d─▒r)
  • reduceRight (gibi reduce , ama artan d├╝zen yerine azalan olarak ├žal─▒┼č─▒r)

2. Basit bir for d├Âng├╝ kullan─▒n

Bazen eski yollar en iyisidir:

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

Dizinin uzunlu─ču d├Âng├╝ s─▒ras─▒nda de─či┼čmeyecek ve (olas─▒) performans duyarl─▒ kodunda ise, ├Ân uzunlu─čunu kapma biraz daha karma┼č─▒k s├╝r├╝m├╝ olabilir k├╝├ž├╝c├╝k biraz daha h─▒zl─▒:

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

Ve / veya geriye say─▒yor:

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

Ancak modern JavaScript motorlar─▒nda, bu son meyve suyunu ├ž─▒karman─▒z nadirdir.

ES2015 ve daha ├╝st├╝ s├╝r├╝mlerde, dizin ve de─čer de─či┼čkenlerinizi for d├Âng├╝de yerel yapabilirsiniz :

 let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
    console.log(index, value);
}
//console.log(index);   // would cause "ReferenceError: index is not defined"
//console.log(value);   // would cause "ReferenceError: value is not defined"
 

 let a = ["a", "b", "c"];
for (let index = 0; index < a.length; ++index) {
    let value = a[index];
    console.log(index, value);
}
try {
    console.log(index);
} catch (e) {
    console.error(e);   // "ReferenceError: index is not defined"
}
try {
    console.log(value);
} catch (e) {
    console.error(e);   // "ReferenceError: value is not defined"
} 

Bunu yapt─▒─č─▒n─▒zda, her d├Âng├╝ yinelemesi i├žin sadece value de─čil, ayn─▒ zamanda index yeniden yarat─▒ld─▒─č─▒nda, d├Âng├╝ g├Âvdesinde yarat─▒lan kapaklar , s├Âz konusu yineleme i├žin yarat─▒lan index (ve value ) referans─▒ tutar :

 let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: " + index);
    });
}
 

 let divs = document.querySelectorAll("div");
for (let index = 0; index < divs.length; ++index) {
    divs[index].addEventListener('click', e => {
        console.log("Index is: " + index);
    });
} 
 <div>zero</div>
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div> 

Be┼č div'iniz varsa, ilkini t─▒klarsan─▒z "Dizin: 0", sonuncuyu t─▒klarsan─▒z "Dizin: 4" olur. Bunun yerine kullan─▒rsan─▒z bu i┼če yaramaz . var let

3. Do─čru kullan─▒n for-in

Kullanmak s├Âyl├╝yorum insanlar─▒ al─▒rs─▒n─▒z for-in , ama bu de─čil ne for-in i├žindir . Bir dizinin dizinlerini de─čil, bir nesnenin numaraland─▒r─▒labilir ├Âzelliklerini for-in dola┼č─▒yor . ES2015 (ES6) 'da bile sipari┼č garanti edilmez. ES2015 + nesne ├Âzelliklerinde bir emir tan─▒mlamaz (via , ve bunlar─▒ gibi kullanmak ┼čeyler ) ama gelmez o tan─▒mlamak O emri takip edecektir. ( Bu cevaptaki detaylar .) [[OwnPropertyKeys]] [[Enumerate]] Object.getOwnPropertyKeys for-in https://stackoverflow.com/a/30919039/157247

for-in Bir dizideki tek ger├žek kullan─▒m durumlar─▒ :

  • Bu bir var seyrek diziler ile masif , i├žinde bo┼čluklar veya
  • Eleman olmayan ├Âzellikler kullan─▒yorsunuz ve bunlar─▒ d├Âng├╝ye dahil etmek istiyorsunuz.

Sadece ┼ču ilk ├Ârne─če for-in bakarken: Uygun koruyucular─▒ kullan─▒yorsan─▒z , bu dizi dizilerini ziyaret etmek i├žin kullanabilirsiniz:

 // `a` is a sparse array
var key;
var a = [];
a[0] = "a";
a[10] = "b";
a[10000] = "c";
for (key in a) {
    if (a.hasOwnProperty(key)  &&        // These checks are
        /^0$|^[1-9]\d*$/.test(key) &&    // explained
        key <= 4294967294                // below
        ) {
        console.log(a[key]);
    }
} 

├ť├ž ├žeke dikkat edin:

  1. Nesnenin, bu isme g├Âre kendi ├Âzelli─čine sahip olmas─▒ (prototipinden miras kalan─▒ de─čil) ve

  2. Anahtar─▒n t├╝m ondal─▒k basamaklar oldu─ču (├Ârne─čin, normal dize formu, bilimsel g├Âsterim de─čil) ve

  3. Bir say─▒ya zorland─▒─č─▒nda anahtar─▒n de─čerinin <= 2 ^ 32 - 2 (4,294,967,294). Bu numara nereden geliyor? Spesifikasyondaki bir dizi indeks tan─▒m─▒n─▒n bir par├žas─▒ . Di─čer say─▒lar (tamsay─▒ olmayanlar, negatif say─▒lar, 2 ^ 32 - 2'den b├╝y├╝k say─▒lar) dizi dizinleri de─čildir. Bunun nedeni 2 ^ 32 - 2'nin en b├╝y├╝k endeks de─čerini bir dizinin sahip olabilece─či maksimum de─čer olan 2 ^ 32 - 1'den daha d├╝┼č├╝k yapmas─▒d─▒r length . (├ľrne─čin, bir dizinin uzunlu─ču 32 bit i┼čaretsiz bir tam say─▒ya uyar.) ( Blog g├Ânderimde yapt─▒─č─▒m bir yorumda ├Ânceki testimin do─čru olmad─▒─č─▒n─▒ belirtti.

Tabii ki sat─▒r i├ži kodunda bunu yapmazs─▒n. Bir yard─▒mc─▒ fonksiyon yazars─▒n. Belki:

 // Utility function for antiquated environments without `forEach`
var hasOwn = Object.prototype.hasOwnProperty;
var rexNum = /^0$|^[1-9]\d*$/;
function sparseEach(array, callback, thisArg) {
    var index;
    for (var key in array) {
        index = +key;
        if (hasOwn.call(a, key) &&
            rexNum.test(key) &&
            index <= 4294967294
            ) {
            callback.call(thisArg, array[key], index, array);
        }
    }
}

var a = [];
a[5] = "five";
a[10] = "ten";
a[100000] = "one hundred thousand";
a.b = "bee";

sparseEach(a, function(value, index) {
    console.log("Value at " + index + " is " + value);
}); 

4. Kullan for-of (├Ârt├╝l├╝ bir yineleyici kullan ) (ES2015 +)

ES2015, yineleyicileri JavaScript'e ekler . Yineleyicileri kullanman─▒n en kolay yolu yeni for-of ifadedir. Bu gibi g├Âr├╝n├╝yor:

 const a = ["a", "b", "c"];
for (const val of a) {
    console.log(val);
} 

Kapaklar─▒n alt─▒nda, diziden bir yineleyici al─▒r ve i├žinden d├Âner, ondan de─čer elde eder. Bunun for-in , nesnenin (dizi) tan─▒mlad─▒─č─▒ bir yineleyiciyi kullanmas─▒ nedeniyle kullanmas─▒yla ilgili bir sorunu yoktur ve diziler yineleyicilerinin giri┼čleri ( yinelemelerini de─čil) yinelemelerini tan─▒mlar . for-in ES5'ten farkl─▒ olarak, giri┼člerin ziyaret edildi─či s─▒ra dizinlerinin say─▒sal s─▒ras─▒d─▒r.

5. A├ž─▒k├ža bir yineleyici kullan─▒n (ES2015 +)

Bazen, a├ž─▒k├ža bir yineleyici kullanmak isteyebilirsiniz . Bunu, ├žok daha clunkier olmas─▒na ra─čmen yapabilirsiniz for-of . Bu gibi g├Âr├╝n├╝yor:

 const a = ["a", "b", "c"];
const it = a.values();
let entry;
while (!(entry = it.next()).done) {
    console.log(entry.value);
} 

Yineleyici, belirtimdeki Yineleyici tan─▒m─▒na uyan bir nesnedir. Onun next y├Ântemi, yeni bir d├Ând├╝r├╝r sonu├ž nesnesi diyorsunuz her seferinde. Sonu├ž nesnesi, done yap─▒l─▒p yap─▒lmayaca─č─▒n─▒ bize s├Âyleyen ve value bu yineleme i├žin de─čeri olan bir ├Âzelli─če sahiptir. ( done Olaca─č─▒n─▒ ve bu iste─če ba─čl─▒d─▒r false , value bu olurdu iste─če ba─čl─▒d─▒r undefined ).

Anlam─▒ value iterasyon ba─čl─▒ olarak de─či┼čir; diziler yineleyiciler d├Ând├╝ren (en az) ├╝├ž i┼člevi destekler:

  • values() : Yukar─▒da kulland─▒─č─▒m ┼čey bu. Her bir yineleyici d├Ând├╝ren value bu yineleme i├žin dizi giri┼čtir ( "a" , "b" ve "c" ├Ârne─čin daha ├Ânce).
  • keys() : ─░ade her bir yineleyici value bu yineleme i├žin anahtard─▒r (yani bizim i├žin a yukar─▒daki olurdu "0" , sonra "1" sonra, "2" ).
  • entries() : Her birinin value , [key, value] bu yineleme i├žin formdaki bir dizi oldu─ču bir yineleyiciyi d├Ând├╝r├╝r .

Dizi Benzeri Nesneler ─░├žin

Ger├žek dizilerin yan─▒ s─▒ra, bir ├Âzelli─či ve say─▒sal adlar─▒ olan ├Âzellikleri olan dizi benzeri nesneler de vard─▒r length : NodeList ├Ârnekler, arguments nesne vb. ─░├žeriklerini nas─▒l de─či┼čtiririz?

Diziler i├žin yukar─▒daki se├ženeklerden birini kullan─▒n.

Yukar─▒daki dizi yakla┼č─▒mlar─▒n─▒n en az─▒ndan baz─▒lar─▒ ve muhtemelen ├žo─ču veya hatta t├╝m├╝, dizi benzeri nesnelere s─▒kl─▒kla iyi uygulan─▒r:

  1. Kullan─▒m forEach ve ilgili (ES5 +)

    ├ťzerindeki ├že┼čitli fonksiyonlar Array.prototype "kas─▒tl─▒ olarak jenerik" tir ve genellikle Function#call veya benzeri dizi benzeri nesnelerde kullan─▒labilir Function#apply . ( Bu yan─▒t─▒n sonunda ana bilgisayar taraf─▒ndan sa─članan nesneler i├žin Caveat'e bak─▒n , ancak bu nadir bir konudur.)

    Kullanmak istedi─čim varsayal─▒m forEach bir ├╝zerinde Node bireyin childNodes m├╝lkiyet. Bunu yapars─▒n:

     Array.prototype.forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
     

    Bunu ├žok yapacaksan─▒z, i┼člev referans─▒n─▒n bir kopyas─▒n─▒ yeniden kullanmak ├╝zere bir de─či┼čkene almak isteyebilirsiniz, ├Ârne─čin:

     // (This is all presumably in some scoping function)
    var forEach = Array.prototype.forEach;
    
    // Then later...
    forEach.call(node.childNodes, function(child) {
        // Do something with `child`
    });
     
  2. Basit bir for d├Âng├╝ kullan─▒n

    A├ž─▒k├žas─▒, basit bir for d├Âng├╝ dizi benzeri nesnelere uygulan─▒r.

  3. Do─čru kullan─▒n for-in

    for-in bir dizideki gibi ayn─▒ g├╝vencelerle dizilim benzeri nesnelerle de ├žal─▒┼č─▒lmal─▒d─▒r; yukar─▒daki # 1 ├╝zerindeki konak├ž─▒ taraf─▒ndan sa─članan nesneler i├žin uyar─▒ uygulanabilir.

  4. Kullan for-of (dolayl─▒ olarak bir yineleyici kullan ) (ES2015 +)

    for-of e─čer varsa, nesne taraf─▒ndan sa─članan yineleyiciyi kullan─▒r; Bunun, ├Âzellikle sunucu taraf─▒ndan sa─člananlar gibi ├že┼čitli dizi benzeri nesnelerle nas─▒l oynad─▒─č─▒n─▒ g├Ârmemiz gerekir. ├ľrne─čin, i├žin ┼čartname NodeList gelen querySelectorAll yinelemeyi desteklemek i├žin g├╝ncellendi. ─░├žin Spec HTMLCollection gelen getElementsByTagName de─čildi.

  5. A├ž─▒k├ža bir yineleyici kullan─▒n (ES2015 +)

    4'e bak─▒n, yineleyicilerin nas─▒l oynad─▒─č─▒n─▒ g├Ârmemiz gerekecek.

Ger├žek bir dizi olu┼čturun

Di─čer zamanlarda, dizi benzeri bir nesneyi ger├žek bir diziye d├Ân├╝┼čt├╝rmek isteyebilirsiniz. Bunu yapmak ┼ča┼č─▒rt─▒c─▒ derecede kolayd─▒r:

  1. slice Diziler y├Ântemini kullan─▒n

    slice Yukar─▒da belirtilen di─čer y├Ântemlerin "kas─▒tl─▒ olarak genel" oldu─ču gibi dizilerin benzeri nesnelerle kullan─▒labilen dizilerin y├Ântemini kullanabiliriz :

     var trueArray = Array.prototype.slice.call(arrayLikeObject);
     

    ├ľrne─čin, e─čer NodeList bir diziyi ger├žek bir diziye d├Ân├╝┼čt├╝rmek istiyorsak , ┼čunu yapabiliriz:

     var divs = Array.prototype.slice.call(document.querySelectorAll("div"));
     

    A┼ča─č─▒daki sunucu taraf─▒ndan sa─članan nesneler i├žin Uyar─▒ya bak─▒n. ├ľzellikle, bunun IE8 ve ├Ânceki s├╝r├╝mlerinde ba┼čar─▒s─▒z olaca─č─▒n─▒ ve bunun this gibi ana bilgisayar taraf─▒ndan sa─članan nesneleri kullanman─▒za izin vermedi─čini unutmay─▒n .

  2. Forma s├Âzdizimini kullan ( ... )

    ES2015'in yay─▒lma s├Âzdizimini , bu ├Âzelli─či destekleyen JavaScript motorlar─▒yla kullanmak da m├╝mk├╝nd├╝r :

     var trueArray = [...iterableObject];
     

    ├ľrne─čin, e─čer NodeList bir diziyi ger├žek bir diziye d├Ân├╝┼čt├╝rmek istiyorsak , yay─▒lma s├Âzdizimi ile bu olduk├ža ├Âzl├╝ olur:

     var divs = [...document.querySelectorAll("div")];
     
  3. Kullan─▒m─▒ Array.from (spec) | (MDN)

    Array.from (ES2015 +, ancak kolayca polyfilled), iste─če ba─čl─▒ olarak giri┼čleri ├Ânce bir e┼čleme i┼člevinden ge├žirerek, dizi benzeri bir nesneden bir dizi olu┼čturur. Yani:

     var divs = Array.from(document.querySelectorAll("div"));
     

    Veya, belirli bir s─▒n─▒fa sahip ├Â─čelerin etiket adlar─▒n─▒n bir dizisini elde etmek istiyorsan─▒z, haritalama i┼člevini kullan─▒rs─▒n─▒z:

     // Arrow function (ES2015):
    var divs = Array.from(document.querySelectorAll(".some-class"), element => element.tagName);
    
    // Standard function (since `Array.from` can be shimmed):
    var divs = Array.from(document.querySelectorAll(".some-class"), function(element) {
        return element.tagName;
    });
     

Ana bilgisayar taraf─▒ndan sa─članan nesneler i├žin uyar─▒

Ana makine taraf─▒ndan sa─članan dizi benzeri nesnelere Array.prototype sahip i┼člevler kullan─▒yorsan─▒z (DOM listesi ve taray─▒c─▒ taraf─▒ndan sa─članan, JavaScript motoru yerine di─čer ┼čeyler), ana makine taraf─▒ndan sa─članan nesnenin do─čru davrand─▒─č─▒ndan emin olmak i├žin hedef ortamlar─▒n─▒zda test etti─činizden emin olman─▒z gerekir. . Bir├žo─ču (┼čimdi) d├╝zg├╝n davran─▒yor , ancak test etmek ├Ânemlidir. Bunun nedeni, kullanmak isteyece─činiz y├Ântemlerin ├žo─čunun , soyut i┼čleme d├╝r├╝st bir cevap veren, ana bilgisayar taraf─▒ndan sa─članan nesneye dayanmas─▒d─▒r . Bu yaz─▒ itibariyle, taray─▒c─▒lar bu konuda ├žok iyi bir i┼č ├ž─▒karsa da, 5.1 spesifikasyonu, bir ev sahibi taraf─▒ndan sa─članan nesnenin d├╝r├╝st olamayaca─č─▒ ihtimaline izin verdi. ┬ž8.6.2'de , o b├Âl├╝m├╝n ba┼člang─▒c─▒na yak─▒n olan b├╝y├╝k tablonun alt─▒nda birka├ž paragraf var. ) Array.prototype [[HasProperty]] http://www.ecma-international.org/ecma-262/5.1/%23sec-8.6.2#sec-8.6.2

Ana bilgisayar nesneleri, bu dahili y├Ântemleri aksi belirtilmedik├že herhangi bir ┼čekilde uygulayabilir; ├Ârne─čin, bir olas─▒l─▒k, [[Get]] ve [[Put]] belirli bir ana bilgisayar nesnesi i├žin ger├žekten ├Âzellik de─čerlerini almak ve depolamakt─▒r ancak [[HasProperty]] her zaman yanl─▒┼č olu┼čturur .

(Ben ES2015 spec e┼čde─čer ┼či┼čirme bulamad─▒k, ama yine de durum olacagi kesin.) Yine, ortak konak taraf─▒ndan sa─članan [modern taray─▒c─▒larda nesnelerin dizi benzeri bu yaz─▒n─▒n yaz─▒ld─▒─č─▒ s─▒rada NodeList , ├Ârne─čin ├Ârnekleri] do sap─▒ [[HasProperty]] do─čru, ama test etmek ├Ânemlidir.)


6719







Not : Bu cevap umutsuzca g├╝ncel de─čil. Daha modern bir yakla┼č─▒m i├žin, bir dizideki mevcut y├Ântemlere bak─▒n . ─░lgi ├žekici y├Ântemler:

  • her biri i├žin
  • map
  • filtre
  • zip
  • azaltmak
  • her
  • baz─▒

JavaScriptÔÇÖteki bir diziyi yinelemenin standart yolu 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 problemleriyle kar┼č─▒la┼čabilirsiniz, ├ž├╝nk├╝ dizide ger├žekte bulunmayan bir├žok indeksi yinelemelisiniz . Bu durumda, bir for .. in d├Âng├╝ daha iyi bir fikir olabilir. Bununla birlikte , for..in -loop da eski taray─▒c─▒larda da numaraland─▒r─▒laca─č─▒ndan , yaln─▒zca dizinin istenen ├Âzelliklerinin (dizi ├Â─čeleri) uyguland─▒─č─▒ndan emin olmak i├žin uygun g├╝venlik ├Ânlemlerini kullanman─▒z gerekir . enumerable .

In ECMAScript 5 dizi prototip ├╝zerinde forEach y├Ântemi olacakt─▒r, ancak eski taray─▒c─▒larda desteklenmez. Bu y├╝zden, 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" kullanmal─▒s─▒n─▒z. Bununla birlikte, bu i┼člevsellik i├žin Polyfill ├Ânemsizdir ve kodun okunmas─▒n─▒ kolayla┼čt─▒rd─▒─č─▒ndan, eklenmesi iyi bir polyfill'dir.


489







JQuery k├╝t├╝phanesini kullan─▒yorsan─▒z, jQuery.each ├Â─česini kullanabilirsiniz :

 $.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].
}
 

224







Geri d├Âng├╝

Bence d├Âng├╝ i├žin tam tersi burada bir s├Âz├╝ hak ediyor:

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

Avantajlar─▒:

  • Ge├žici bir len de─či┼čken bildirmeniz veya array.length her yinelemeyle kar┼č─▒la┼čt─▒rman─▒z gerekmeyebilir ; bunlar─▒n ikisi de bir 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.)
  • E─čer varsa dizi de─či┼čtirmek ya da dizin sonra, d├Âng├╝ s─▒ras─▒nda i (├Ârne─čin, kald─▒rmak veya bir madde eklemek array[i] ) sonra iletme d├Âng├╝s├╝ konuma do─čru sola kayd─▒r─▒lm─▒┼č madde atlamak i , ya da yeniden i┼člem i olarak inci madde sa─ča kayd─▒r─▒ld─▒. Geleneksel bir d├Âng├╝de, i'yi i┼členmesi gereken bir sonraki ├Â─čeye i┼čaret edecek ┼čekilde g├╝ncelleyebilirsiniz - 1, ancak yineleme y├Ân├╝n├╝ tersine ├ževirmek genellikle daha basit ve daha zarif bir ├ž├Âz├╝md├╝r .https://stackoverflow.com/questions/23186254/javascript-splice-changing-earlier-values-in-an-array/23186450%2323186450#23186450
  • Benzer ┼čekilde, i├ž i├že DOM ├Â─čelerini de─či┼čtirirken veya kald─▒r─▒rken , geriye do─čru i┼člem yapmak hatalar─▒ a┼čabilir . ├ľ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.
  • ├ľyle k─▒sa yaz─▒n ve okumaya m├╝sait di─čer se├ženeklerden baz─▒lar─▒ daha. Her ne forEach() kadar ES6'ya kaybederse de for ... of .

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─▒raya g├Âre tersine ├ževrilir .
  • S─▒rayla karde┼člerini s─▒ras─▒n─▒ korumak i├žin DOM'a ilk ├žocuk olarak sokmak daha az etkilidir . (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).
  • Ters d├Âng├╝ k├╝├ž├╝k geli┼čtiriciler i├žin kafa kar─▒┼čt─▒r─▒c─▒ . (G├Âr├╝n├╝m├╝n├╝ze 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, varsay─▒lan olarak d├Âng├╝ i├žin tersini 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 bunu yaparken bu vesilelerle ay─▒rt edilemez oldu─čundan, asl─▒nda niyet g├╝venilir bir g├Âstergesidir yapmak amac─▒yla ilgili bak─▒m ve ger├žekten yapmak ihtiyac─▒n─▒ ters i├žinde d├Âng├╝. Bu y├╝zden asl─▒nda, "umursamamak" niyetini do─čru bir ┼čekilde ifade etmek i├žin ba┼čka bir yap─▒ya ihtiya├ž duyulacakt─▒; ┼ču anda ECMAScript dahil olmak ├╝zere ├žo─ču dilde mevcut olmayan, ancak ├Ârne─čin, adland─▒r─▒labilecek bir ┼čey forEachUnordered() .

E─čer sipari┼č ├Ânemli de─čilse ve verimlilik bir sorun ise (bir oyunun veya animasyon motorunun en i├žteki d├Âng├╝s├╝nde), o zaman go-to-pattern olarak d├Âng├╝ i├žin tersini kullanmak kabul edilebilir. Unutmay─▒n, mevcut kodda bir d├Âng├╝ i├žin bir tersi g├Ârmek mutlaka s─▒ran─▒n alakas─▒z oldu─ču anlam─▒na gelmez !

ForEach () kullanmak daha iyiydi

Genel olarak, netli─čin ve g├╝venli─čin daha fazla endi┼če verici oldu─ču daha y├╝ksek seviyeli kod i├žin , daha ├Ânce Array::forEach d├Âng├╝ i├žin varsay─▒lan ┼čablon olarak kullanman─▒z─▒ tavsiye ettim (bug├╝nlerde kullanmay─▒ tercih etmeme ra─čmen for..of ). forEach Ters bir d├Âng├╝ yerine tercih etme nedenleri :

  • Okumak daha net.
  • O belirtir i (her zaman uzun olas─▒ bir s├╝rpriz gizleme olan blo─čun i├žinde yer de─či┼čtirebilecek gitmiyor for ve while d├Âng├╝ler).
  • 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.

(Niyet tart─▒┼čmas─▒ size bir anlam ifade etmiyorsa, siz ve kodunuz Crockford'un Programlama Stili ve Beyniniz hakk─▒ndaki dersini izlemekten fayda sa─člayabilirsiniz .)

┼×imdi ... i├žin kullanmak daha iyidir!

Olup olmad─▒─č─▒ hakk─▒nda bir tart─▒┼čma vard─▒r for..of ya forEach() tercih edilir:

  • Maksimum taray─▒c─▒ deste─či i├žin, yineleyiciler for..of i├žin bir ├žoklu doldurma gerektirir , bu sayede uygulaman─▒z─▒n ├žal─▒┼čmas─▒n─▒ biraz yava┼člat─▒r ve indirmek i├žin biraz daha b├╝y├╝r.

  • Bu nedenle (ve kullan─▒m─▒n─▒ te┼čvik etmek map ve filter ), baz─▒ ├Ân u├ž stil k─▒lavuzlar─▒ yasaklama for..of tamamen!

  • Ancak yukar─▒daki kayg─▒lar, for..of ┼ču anda iyi desteklendi─či Node.js uygulamalar─▒ i├žin ge├žerli de─čildir .

  • Ve ayr─▒ca i├žeride await ├žal─▒┼čmaz forEach() . Kullan─▒m─▒ for..of ise en a├ž─▒k desen bu durumda.

┼×ahsen, performans veya ufak tefek bir endi┼če kayna─č─▒ olmad─▒k├ža okunmas─▒ en kolay olan─▒ kullanmaya meyilliyim. Yani bug├╝nlerde for..of yerine kullanmay─▒ tercih ediyorum forEach() ama her zaman map veya filter veya find veya some ne zaman uygulanabilirse kullanaca─č─▒m . (Meslekta┼člar─▒m ad─▒na, nadiren kullan─▒yorum reduce .)


O nas─▒l ├žal─▒┼č─▒r?

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

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

Bunun i-- orta f─▒kra oldu─čunu (genellikle bir kar┼č─▒la┼čt─▒rma g├Ârd├╝─č├╝m├╝z yerde) ve son f─▒kran─▒n bo┼č oldu─čunu (genellikle g├Ârd├╝─č├╝m├╝z yerde) fark edeceksiniz i++ . Bu i-- ayn─▒ zamanda devam─▒n ┼čart─▒ olarak da kullan─▒ld─▒─č─▒ anlam─▒na gelir . ├ľnemli bir ┼čekilde, her yinelemeden ├Ânce y├╝r├╝t├╝l├╝r ve kontrol edilir .

  • array.length Patlamadan nas─▒l ba┼člayabilir ?

    ├ç├╝nk├╝ i-- ishal ├Ânce her yineleme, birinci tekrar biz asl─▒nda ├Â─čeyi eri┼čecek array.length - 1 herhangi bir sorun ka├ž─▒nan Dizi-out-of-s─▒n─▒rlar─▒ undefined ├Â─čeler.

  • Neden dizin 0'dan ├Ânce yinelemeyi durdurmuyor?

    D├Âng├╝ ko┼čulu i-- bir falsey de─čerini de─čerlendirdi─činde yinelemeyi durduracakt─▒r (0 verdi─činde).

    Hile benzemez --i , arka i-- operat├Âr bir azal─▒r i ancak de─čerini verir ├Ânce azalmayla. Konsolunuz bunu g├Âsterebilir:

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

    [5, 5, 4]

    Bu y├╝zden son tekrar─▒nda, I , daha ├Ânce oldu─ču 1 ve i-- sentezleme i├žin de─či┼čir , 0 ama asl─▒nda verir 1 (truthy) ve durumu ge├žer, b├Âylece. Bir sonraki ad─▒m ├╝zerinde i-- de─či┼čir i i├žin -1 , ancak verimleri 0 y├╝r├╝t├╝lmesine neden olan (Falsey) hemen d├Âng├╝ taban─▒ndan d─▒┼čar─▒ do─čru b─▒rak─▒n.

    Geleneksel olarak d├Âng├╝ i├žin ileri i++ ve ++i de─či┼čtirilebilir (Douglas Crockford'un i┼čaret etti─či gibi). Bununla birlikte, d├Âng├╝ i├žin tersine, azal─▒┼č─▒m─▒z ayn─▒ zamanda ko┼čul ifademiz i-- oldu─čundan, ├Â─čeyi 0 dizininde i┼člemek istiyorsak , buna ba─čl─▒ kalmal─▒y─▒z .


├Ânemsiz ┼čeyler

Baz─▒ insanlar ters for d├Âng├╝ye k├╝├ž├╝k bir ok ├žizmeyi sever ve g├Âz k─▒rpma ile son bulur:

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

Krediler, bana d├Âng├╝ i├žin tersinin faydalar─▒n─▒ ve deh┼četlerini g├Âstermek i├žin WYL'ye gidiyor.


104







Baz─▒ C stili diller foreach numaraland─▒rmalar aras─▒nda ge├ži┼č yapmak i├žin kullan─▒r . JavaScript'te bu for..in d├Âng├╝ 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 dola┼čacakt─▒r. Nesnenin prototipi ile miras al─▒nan de─čerleri okumaktan ka├ž─▒nmak i├žin, ├Âzelli─čin nesneye ait olup olmad─▒─č─▒n─▒ kontrol etmeniz yeterlidir:

 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 bir forEach y├Ântem ekledi Array.prototype (polyfill dok├╝manlardayd─▒, b├Âylece daha eski taray─▒c─▒lar i├žin yine de kullanabilirsiniz):

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

Array.prototype.forEach Geri arama geri d├Ând├╝─č├╝nde k─▒r─▒lmad─▒─č─▒na dikkat etmek ├Ânemlidir false . jQuery ve Underscore.js each k─▒sa devre yapabilen d├Âng├╝ler sa─člamak i├žin kendi varyasyonlar─▒n─▒ sa─člar.


78







Bir dizi ├╝zerinde d├Âng├╝ yapmak istiyorsan─▒z, standart ├╝├ž b├Âl├╝ml├╝ for d├Âng├╝y├╝ kullan─▒n.

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

├ľnbellekleyerek myArray.length veya geriye do─čru yineleyerek baz─▒ performans optimizasyonlar─▒ elde edebilirsiniz .


39







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

Art─▒k, angular.forEach i┼člevi vanilya aromal─▒ ilmeklerin yerine kullanman─▒n avantajlar─▒ ve dezavantajlar─▒ var for .

Art─▒lar─▒

  • Kolay okunabilirlik
  • Kolay yaz─▒labilirlik
  • Varsa angular.forEach , ES5 forEach d├Âng├╝s├╝n├╝ kullan─▒r. ┼×imdi, forEach d├Âng├╝ler for d├Âng├╝lerden ├ž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─▒┼č olmak 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
        }
    }
}
 

Bu ├žok basit bir varsay─▒m ├Ârne─čidir, ancak ikinci yakla┼č─▒m─▒ kullanarak d├Âng├╝ler i├žin g├Âm├╝l├╝ ├╝├žl├╝ yazd─▒m ve bu konuda okumak ve yazmak ├žok zordu.

Eksileri

  • Verimlilik. angular.forEach ve bu y├╝zden yerli forEach , normal d├Âng├╝den ├žok daha yava┼čt─▒r for ... yakla┼č─▒k % 90 yava┼čt─▒r . Bu y├╝zden, b├╝y├╝k veri k├╝meleri i├žin yerel for d├Âng├╝ye ba─čl─▒ kalman─▒n en iyisidir .
  • Ara vermeyin, devam edin veya destek vermeyin. continue asl─▒nda " kaza " ile desteklenir , angular.forEach basit bir ┼čekilde size devam etmek i├žin bu iterasyon i├žin i┼člevden ├ž─▒kar─▒lmas─▒na neden olacak return; gibi bir fonksiyona bir ifade koyun angular.forEach(array, function(item) { if (someConditionIsTrue) return; }); . Bu ayn─▒ zamanda yerlinin ara vermeyi forEach desteklememesi ya da devam etmemesinden kaynaklanmaktad─▒r.

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 for , d├Âng├╝ gereksinimleriniz i├žin sadece yerel d├Âng├╝ye ba─čl─▒ kald─▒─č─▒n─▒z─▒ hissediyorum . Ancak, veri k├╝meleriniz daha k├╝├ž├╝kse ve okunabilirlik ve yaz─▒labilirlik kar┼č─▒l─▒─č─▒nda vazge├žmek i├žin bir verimlilik yeterliyse, o zaman elbette angular.forEach ki bu k├Ât├╝ ├žocu─ča bir ┼čey at─▒n .


31







Bir forEach uygulamas─▒ ( bkz. 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
  }
);
 

29







Diziyi bo┼čaltma sak─▒ncas─▒ yoksa:

 var x;

while(x = y.pop()){ 

    alert(x); //do something 

}
 

x son de─čerini i├žerecek y ve diziden silinecektir. shift() ─░lk ├Â─čeyi verecek ve kald─▒racak olan─▒ da kullanabilirsiniz y .


29







├ť├ž uygulamalar─▒ vard─▒r foreach i├žinde jQuery olarak izler.

 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
 

26







┼×imdi kolay bir ├ž├Âz├╝m, underscore.js k├╝t├╝phanesini kullanmak olacakt─▒r . Gibi bir├žok yararl─▒ ara├ž sa─člar each ve varsa otomatik olarak i┼či yerel olarak devreder forEach .

http://codepen.io/Micka33/pen/nbyxfNas─▒l ├žal─▒┼čt─▒─č─▒na dair bir CodePen ├Ârne─či :

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

Ayr─▒ca bak─▒n─▒z

  • Yerli belgeler Array.prototype.forEach() .
  • In For_Each ... l├╝tfen (MDN) o a├ž─▒klanm─▒┼čt─▒r for each (variable in object) ECMA-357 (bir par├žas─▒ olarak kullan─▒m d─▒┼č─▒ kalm─▒┼čt─▒r EAX ) standard─▒.
  • i├žin ... (MDN) for (variable of object) , Uyum (ECMAScript 6) teklifinin bir par├žas─▒ olarak kullanman─▒n bir sonraki yineleme y├Ântemini a├ž─▒klar .

26







ECMAScript 6ÔÇÖdan itibaren:

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

Nerede of ili┼čkili tuhafl─▒klar─▒ ├Ânler in ve benzeri ├žal─▒┼čmas─▒n─▒ sa─člar for ba┼čka dilin d├Âng├╝ ve let ba─člamalar i i┼člev i├žinde kar┼č─▒t olarak d├Âng├╝ i├žinde.

Parantez ( {} ) yaln─▒zca bir komut oldu─čunda ├ž─▒kar─▒labilir (├Ârne─čin yukar─▒daki ├Ârnekte).


26


2016-05-26





Muhtemelen for(i = 0; i < array.length; i++) d├Âng├╝ en iyi se├ženek de─čildir. Niye ya? E─čer bu varsa:

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

Y├Ântem dan arayacak array[0] kadar array[2] . Birincisi, bu sizin ilk ├Ânce sahip olmad─▒─č─▒n─▒z de─či┼čkenleri referans al─▒r, ikincisi dizide de─či┼čkenlere sahip olmazs─▒n─▒z ve ├╝├ž├╝nc├╝s├╝ kod kodlay─▒c─▒ yapar. 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 bunun 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
//!!!
 

25







for each Yerel JavaScript'te herhangi bir d├Âng├╝ yok . Bu i┼člevselli─či elde etmek i├žin kitapl─▒klar─▒ kullanabilirsiniz ( Underscore.js'yi tavsiye ederim ), basit bir for d├Âng├╝ kullan─▒n .

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

Bununla birlikte, daha basit bir for d├Âng├╝ kullanman─▒n nedenleri olabilece─čine dikkat edin (bkz. Y─▒─č─▒n Ta┼čmas─▒ sorusu Neden dizi i├žin "bu kadar k├Ât├╝ bir fikirle" for ... in "kullan─▒yor? )

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

20







Bu, endonun 0'da ba┼člad─▒─č─▒, seyrek olmayan liste i├žin bir yineleyicidir; bu, document.getElementsByTagName veya document.querySelectorAll) ile ilgili tipik senaryodur.

 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 al─▒r class="blue"

├ľ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.


19


2014-01-30





JavaScript'te bir dizi aras─▒nda dola┼čman─▒n birka├ž yolu vard─▒r :

├ž├╝nk├╝ - en yayg─▒n olan─▒ . 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 - ayr─▒ca ko┼čul do─čru oldu─čunda bir kod blo─čundan ge├žerek 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> 

Fonksiyonel d├Âng├╝ler - forEach , map , filter , ayr─▒ca reduce sen vb dizisi, bir ┼čeyler yapmak gerekiyorsa (ki┼čilermi┼čiz i┼člevi arac─▒l─▒─č─▒yla d├Âng├╝, ancak kullan─▒ld─▒klar─▒

 // 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> 

Dizilerdeki fonksiyonel programlama hakk─▒nda daha fazla bilgi ve ├Ârnekler i├žin, Blog yaz─▒s─▒n─▒n JavaScript'teki ─░┼člevsel Programlama b├Âl├╝m├╝ne bak─▒n─▒z: harita, filtreleme ve azaltma .


18







ECMAScript 5 (JavaScript'teki s├╝r├╝m) Dizilerle ├žal─▒┼čmak i├žin:

forEach - Dizideki her ├Â─čeyi s─▒ralar ve her ├Â─čeyle ihtiyac─▒n─▒z olan─▒ yapar.

 ['C', 'D', 'E'].forEach(function(element, index) {
  console.log(element + " is #" + (index+1) + " in the 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 arama 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']
 

azaltma - Ad─▒ndan da anla┼č─▒laca─č─▒ gibi, ge├žerli ├Â─čeden ge├žen i┼člevi ve ├Ânceki y├╝r├╝tmenin 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 - Her filme ├žok benzeyen, filtre, verilen i┼čleve true de─čerini veren 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]
 

17







─░├žeri girmek i├žin yerle┼čik bir yetenek yok forEach . ─░┼člemi durdurmak i├žin Array#some a┼ča─č─▒dakileri kullan─▒n :

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

Bu i┼če yar─▒yor, ├ž├╝nk├╝ some dizi s─▒ras─▒na g├Âre ger├žekle┼čtirilen herhangi bir geri ├ža─č─▒rma i┼čleminden herhangi biri k─▒sa s├╝rede ger├žekle┼čir, geri kalan─▒n─▒n y├╝r├╝t├╝lmesine k─▒sa devre yapar. Orjinal Cevap bkz. Baz─▒lar─▒ i├žin dizi prototipihttp://www.ecma-international.org/ecma-262/5.1/%23sec-15.4.4.17#sec-15.4.4.17


15







Bunu da ters bir d├Âng├╝ ve bu s├Âzdizimini de isteyen biri i├žin yukar─▒daki bir cevab─▒n bile┼čimi olarak eklemek isterim.

 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.


12







jQuery yolu kullanarak $.map :

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

11







ECMAScript 6 imhas─▒ ve forma operat├Âr├╝ ile d├Âng├╝ler kullanma https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Spread operat├Âr├╝n├╝n yokedilmesi ve kullan─▒lmas─▒, ECMAScript 6'ya yeni ba┼člayanlar i├žin daha okunakl─▒ / estetik olarak olduk├ža faydal─▒ oldu─čunu kan─▒tlad─▒, ancak baz─▒ JavaScript gazileri da─č─▒n─▒k kalabilir. Gen├žler veya baz─▒ insanlar bunu yararl─▒ bulabilir.

A┼ča─č─▒daki ├Ârnekler for...of ifadeyi ve .forEach y├Ântemi kullanacakt─▒r .

├ľrnekler 6, 7 ve 8 gibi herhangi bir i┼člevsel d├Âng├╝ler ile birlikte kullan─▒labilir .map , .filter , .reduce , .sort , .every , .some . Bu y├Ântemler hakk─▒nda daha fazla bilgi i├žin Dizi Nesnesini inceleyin .

├ľ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: a key ve value

 // 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 sat─▒r─▒na al

 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─▒n derin nesne ├Âzelliklerini edinin

 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 3 ile kullan─▒l─▒r m─▒? .forEach

 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 4 ile kullan─▒l─▒r m─▒? .forEach

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

├ľrnek 8: ├ľrnek 5 ile kullan─▒l─▒r m─▒? .forEach

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


7







Fikrinize en yak─▒n yol Array.forEach() , dizinin her eleman─▒ i├žin y├╝r├╝t├╝lecek bir kapama i┼člevini kabul eden kullan─▒m─▒ kullanmak olacakt─▒r.

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

Uygulanabilir ba┼čka bir y├Ântem Array.map() de ayn─▒ ┼čekilde ├žal─▒┼čan kullan─▒m─▒ kullanmak olacakt─▒r , ancak ayn─▒ zamanda d├Ând├╝rd├╝─č├╝n├╝z t├╝m de─čerleri al─▒r ve bunlar─▒ yeni bir dizide d├Ând├╝r├╝r (esas olarak her bir ├Â─čeyi yeni bir tane ile e┼čle┼čtirir), ┼č├Âyle:

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

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

7







Lambda s├Âzdizimi, genellikle Internet Explorer 10 veya daha d├╝┼č├╝k s├╝r├╝mlerinde ├ž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);
});
 

Bir jQuery hayran─▒ysan─▒z ve zaten ├žal─▒┼čan bir jQuery dosyan─▒z varsa, dizin ve de─čer parametrelerinin konumlar─▒n─▒ tersine ├ževirmelisiniz.

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

6







Ok i┼člevine sahip 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');
}) 


5







B├╝y├╝k bir diziniz varsa, iterators biraz verimlilik elde etmek i├žin kullanmal─▒s─▒n─▒z . Tekrarlay─▒c─▒lar belirli JavaScript koleksiyonlar─▒ndan bir mal─▒d─▒r (gibi Map , Set , String , Array ). Hatta, ba┼čl─▒k alt─▒nda for..of kullan─▒r iterator .

Yineleyiciler, bir listedeki ├Â─čeleri bir ak─▒┼čm─▒┼č gibi tek tek 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 yapmak i├žin t├╝m koleksiyonun ├Ân├╝ne y├╝klenmelidir, oysa bir yineleyicinin koleksiyondaki mevcut konumu bilmesi gerekir.

Ge├žerli ├Â─čeye yineleyici next y├Ântemini ├ža─č─▒rarak eri┼čirsiniz . Bir sonraki y├Ântem value , ge├žerli ├Â─čenin ve boolean a'n─▒n koleksiyonun sonuna ne zaman ula┼čt─▒─č─▒n─▒z─▒ belirtmek i├žin d├Ând├╝r├╝r . A┼ča─č─▒daki bir diziden bir yineleyici olu┼čturma ├Ârne─čidir.

Bunun values() gibi y├Ântemi kullanarak normal dizinizi yineleyiciye d├Ân├╝┼čt├╝r├╝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()); 

Bunun gibi normal dizinizi yineleyiciye de d├Ân├╝┼čt├╝rebilirsiniz Symbol.iterator :

 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 d├╝zenleyicisi olan d├Ân├╝┼čt├╝rebilir array bir kar┼č─▒ iterator b├Âyle:

 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 iterable varsay─▒lan olarak de─čildir . for..in Bu durumda kullan─▒n ├ž├╝nk├╝ de─čerler yerine tu┼člarla ├žal─▒┼č─▒r.

iteration protocol Burada daha fazla okuyabilirsiniz .


4







Her Birini bu ┼čekilde arayabilirsiniz:

 let Array = [1,3,2];

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

element Her dizinin de─čeri 0 ile dizinin uzunlu─čuna sahip olacakt─▒r.

Çıktı:

 1
3
2
 

A├ž─▒klama:

forEach prototip s─▒n─▒f─▒nda. Buna Array.prototype.forEach (...);

Prototip:

JavaScript'te prototipler

Ayr─▒ca, bunun gibi bir diziyi yineleyebilirsiniz:

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

4







Kullanmak istersen forEach() , ┼čuna benzeyecek -

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

Kullanmak istersen for() , ┼čuna benzeyecek -

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

3







├ľzet:

Bir dizi ├╝zerinde yineleme yaparken, genellikle a┼ča─č─▒daki hedeflerden birini ger├žekle┼čtirmek istiyoruz:

  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 d├Âng├╝

JavaScript'te, bu iki amac─▒ da ger├žekle┼čtirmenin bir├žok yolu vard─▒r. Ancak, baz─▒lar─▒ di─čerlerinden daha uygundur. A┼ča─č─▒da, JavaScript'te dizi yinelemeyi ger├žekle┼čtirmek i├žin s─▒k kullan─▒lan baz─▒ y├Ântemleri (en uygun IMO) bulabilirsiniz.

Yeni dizi olu┼čturma: Map

map() yer alan bir fonksiyonu olan Array.prototype bir dizinin her eleman d├Ân├╝┼čt├╝rebilir ki ve daha sonra bir d├Âner yeni dizi. map() arg├╝man olarak bir geri ├ža─č─▒rma i┼člevi 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() Bir arg├╝man olarak girdi─č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, arg├╝man olarak iletilen geri ├ža─č─▒rma i┼člevi taraf─▒ndan d├Ân├╝┼čt├╝r├╝l├╝r map() .

Bir d├Âng├╝ map gibi ve di─čer d├Âng├╝ mekanizmalar─▒ aras─▒ndaki belirgin fark , yeni dizi olarak geri d├Ânen ve eski diziyi bozulmadan b─▒rak─▒r (a├ž─▒k├ža d├╝┼č├╝nenlerle manip├╝le etmemeniz hari├ž ). forEach for..of map splice

Ayr─▒ca, map i┼člevin 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 ├ža─čr─▒lan diziyi sa─čl─▒yor mu . Bazen bu ├Âzellikler ├žok faydal─▒ olabilir.

Kullanarak d├Âng├╝ forEach

forEach bulunan bir fonksiyonu olan Array.prototype bir de─či┼čken olarak bir geri arama i┼člevi al─▒r. Daha sonra dizideki her eleman i├žin bu geri ├ža─č─▒rma i┼člevini y├╝r├╝t├╝r. map() ─░┼člevin 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 ─░┼člev gibi, forEach geri ├ža─č─▒rma, ge├žerli yinelemenin dizin numaras─▒n─▒ ikinci bir arg├╝man olarak sa─člar. Ayr─▒ca ├╝├ž├╝nc├╝ arg├╝man forEach ├ža─čr─▒lan diziyi sa─člar .

Kullanarak elemanlar─▒ aras─▒nda d├Âng├╝ for..of

for..of D├Âng├╝ bir dizi (ya da ba┼čka bir iterable nesnenin) her eleman─▒n d├Âng├╝s├╝. 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 ├Â─česi anlam─▒na gelir ve arr d├Âng├╝lemek istedi─čimiz dizidir. Ad─▒n element keyfi oldu─čunu ve uygulanabilir oldu─čunda 'el' veya ba┼čka bir ┼čekilde daha a├ž─▒klay─▒c─▒ bir isim se├žti─čimizi unutmay─▒n.

for..in D├Âng├╝y├╝ d├Âng├╝ ile kar─▒┼čt─▒rmay─▒n for..of . for..in dizinin t├╝m numaraland─▒r─▒labilir ├Âzelliklerinde for..of d├Âng├╝ , d├Âng├╝ ise 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);
} 


3







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

2


2018-01-11





Kodunuzu i┼člevsel bir ┼čekilde saklamak istiyorsan─▒z, ┼čunu kullan─▒n map :

 theArray.map(instance => do_something);
 

Bu ┼čekilde gelecekteki operasyonlar i├žin yeni bir dizi olu┼čturacak ve arzu edilmeyen herhangi bir yan etkiyi atlayacaks─▒n─▒z.


2



─░lgili yay─▒nlar


Java'da bir enum ├╝zerinden yinelenecek bir 'for' d├Âng├╝s├╝

Bir diziyi JavaScript'te ├žo─čaltman─▒n en h─▒zl─▒ yolu - dilim - 'for' d├Âng├╝s├╝

JavaScript'te blok kapsam─▒ndaki de─či┼čken bildirimleri i├žin neden 'let' ad─▒ se├žildi?

JavaScript'te ├Âzellik ve y├Ântem adlar─▒ i├žin alt ├žizgi ├Ânizlemesi

JavaScript'te bir nesne olu┼čturmak i├žin en iyi yol hangisidir? Bir nesne ├Âzelli─činden ├Ânce var 'gerekli midir?

─░ki listeyi yinelemenin ve her yinelemede her listeden bir ├Â─če alman─▒n daha iyi bir yolu var m─▒? [├žift]

Objects / Arrays'in JavaScript'teki performans─▒ nedir? (├Âzellikle Google V8 i├žin)

Javascript'teki ├ç├Âp Toplay─▒c─▒ aktivitesini azaltmak i├žin en iyi y├Ântemler

Anahtar / de─čer ├žiftleri i├žin Javascript'teki dizilere kar┼č─▒ nesneler

Ggplot2 ile R'deki her ├žubuk i├žin geom_bar ├╝zerine etiket koymak

Etiketle ilgili di─čer sorular [javascript]


Bir TextView'da metni yatay ve dikey olarak nas─▒l ortalayabilirim?

Yerel bir ┼čubenin hangi uzak ┼čubeyi takip etti─čini ├Â─črenin

HTML5'te float giri┼č t├╝r├╝ var m─▒?

JavaScript'te grafik g├Ârselle┼čtirme k├╝t├╝phanesi

TensorFlow pip kullanarak bulunamad─▒

C++ 'ta statik std :: map <int, int> ba┼člat─▒l─▒yor

Haz─▒rda bekletme g├Âsterisi ger├žek SQL [duplicate]

Enum de─čerlerini String de─či┼čmezleri olarak kullanma

Neden ÔÇťhari├ž: ge├žmekÔÇŁ k├Ât├╝ bir programlama uygulamas─▒?

Soru i┼čareti ve nokta operat├Âr├╝ nedir? C# 6.0'da ortalama?