JavaScript untuk ... dalam vs untuk

Apakah Anda pikir ada perbedaan besar dalam untuk ... dalam dan untuk loop? Jenis "untuk" apa yang Anda pilih untuk digunakan dan mengapa?

Katakanlah kita memiliki array array asosiatif:

var myArray = [{'key': 'value'}, {'key': 'value1'}];

Jadi kita bisa beralih:

for (var i = 0; i < myArray.length; i++)

Dan:

for (var i in myArray)

Saya tidak melihat perbedaan besar. Apakah ada masalah kinerja?

Pilihannya harus didasarkan pada idiom mana yang paling dipahami.

Array diulang menggunakan:

for (var i = 0; i < a.length; i++)
   //do stuff with a[i]

Objek yang digunakan sebagai array asosiatif diulang menggunakan:

for (var key in o)
  //do stuff with o[key]

Kecuali Anda memiliki alasan untuk menghancurkan bumi, patuhi pola penggunaan yang telah ditetapkan.

Douglas Crockford merekomendasikan dalam JavaScript: The Good Parts (halaman 24) untuk menghindari penggunaan for inpernyataan.

Jika Anda menggunakan for inuntuk mengulang nama properti di suatu objek, hasilnya tidak diurutkan. Lebih buruk: Anda mungkin mendapatkan hasil yang tidak terduga; itu termasuk anggota yang diwarisi dari rantai prototipe dan nama metode.

Semuanya kecuali properti dapat disaring .hasOwnProperty. Contoh kode ini melakukan apa yang awalnya Anda inginkan:

for (var name in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, name)) {
        // DO STUFF
    }
}

FYI - Pengguna jQuery

each(callback)Metode jQuery menggunakan for( ; ; )loop secara default, dan for( in ) hanya akan digunakan jika panjangnya undefined.

Oleh karena itu, saya akan mengatakan aman untuk mengasumsikan urutan yang benar ketika menggunakan fungsi ini.

Contoh :

$(['a','b','c']).each(function() {
    alert(this);
});
//Outputs "a" then "b" then "c"

Kelemahan dari menggunakan ini adalah bahwa jika Anda melakukan beberapa logika non UI, fungsi Anda akan lebih portabel untuk kerangka kerja lainnya. The each()fungsi mungkin terbaik dicadangkan untuk digunakan dengan pemilih jQuery dan for( ; ; )mungkin dianjurkan sebaliknya.

ada perbedaan kinerja tergantung pada jenis loop apa yang Anda gunakan dan pada browser apa.

Contohnya:

for (var i = myArray.length-1; i >= 0; i--)

hampir dua kali lebih cepat pada beberapa browser dibandingkan:

for (var i = 0; i < myArray.length; i++)

Namun, kecuali jika array Anda BESAR atau Anda memutarnya secara konstan, semuanya cukup cepat. Saya sangat ragu bahwa array looping adalah hambatan dalam proyek Anda (atau untuk proyek lain dalam hal ini)

Perhatikan bahwa metode Array.forEach asli sekarang banyak didukung .

Jawaban yang diperbarui untuk 2012 versi terbaru dari semua browser utama - Chrome, Firefox, IE9, Safari dan Opera mendukung larik asli ES5. ForEach

Kecuali Anda memiliki alasan untuk mendukung IE8 secara native (dengan mengingat ES5-shim atau bingkai Chrome dapat diberikan kepada pengguna ini, yang akan memberikan lingkungan JS yang tepat), lebih bersih jika hanya menggunakan sintaksis bahasa yang tepat:

myArray.forEach(function(item, index) {
    console.log(item, index);
});

Dokumentasi lengkap untuk array.forEach () ada di MDN.

Keduanya tidak sama ketika array jarang.

var array = [0, 1, 2, , , 5];

for (var k in array) {
  // Not guaranteed by the language spec to iterate in order.
  alert(k);  // Outputs 0, 1, 2, 5.
  // Behavior when loop body adds to the array is unclear.
}

for (var i = 0; i < array.length; ++i) {
  // Iterates in order.
  // i is a number, not a string.
  alert(i);  // Outputs 0, 1, 2, 3, 4, 5
  // Behavior when loop body modifies array is clearer.
}

Menggunakan forEach untuk melewati rantai prototipe

Hanya tambahan cepat untuk jawaban @ nailer di atas , menggunakan forEach dengan Object.keys berarti Anda dapat menghindari iterasi melalui rantai prototipe tanpa harus menggunakan hasOwnProperty.

var Base = function () {
    this.coming = "hey";
};

var Sub = function () {
    this.leaving = "bye";
};

Sub.prototype = new Base();
var tst = new Sub();

for (var i in tst) {
    console.log(tst.hasOwnProperty(i) + i + tst[i]);
}

Object.keys(tst).forEach(function (val) {
    console.log(val + tst[val]);
});

Saya berpendapat kedua bahwa Anda harus memilih metode iterasi sesuai dengan kebutuhan Anda. Saya akan menyarankan Anda sebenarnya untuk tidak pernah melalui asli Arraydengan for instruktur. Ini jauh lebih lambat dan , seperti yang ditunjukkan Chase Seibert saat ini, tidak kompatibel dengan kerangka kerja Prototype.

Ada tolok ukur yang sangat baik pada berbagai gaya perulangan yang harus Anda perhatikan jika Anda bekerja dengan JavaScript . Jangan melakukan optimasi awal, tetapi Anda harus menyimpannya di belakang kepala Anda.

Saya akan menggunakan for inuntuk mendapatkan semua properti dari suatu objek, yang sangat berguna saat men-debug skrip Anda. Misalnya, saya suka membuat garis ini berguna ketika saya menjelajahi objek yang tidak dikenal:

l = ''; for (m in obj) { l += m + ' => ' + obj[m] + '\n' } console.log(l);

Itu membuang konten dari seluruh objek (bersama-sama dengan badan metode) ke log Firebug saya. Sangat berguna.

ini adalah sesuatu yang saya lakukan.

function foreach(o, f) {
 for(var i = 0; i < o.length; i++) { // simple for loop
  f(o[i], i); // execute a function and make the obj, objIndex available
 }
}

ini adalah bagaimana Anda akan menggunakannya
ini akan bekerja pada array dan objek (seperti daftar elemen HTML)

foreach(o, function(obj, i) { // for each obj in o
  alert(obj); // obj
  alert(i); // obj index
  /*
    say if you were dealing with an html element may be you have a collection of divs
  */
  if(typeof obj == 'object') { 
   obj.style.marginLeft = '20px';
  }
});

Saya baru saja membuat ini jadi saya terbuka untuk saran :)

Saya akan menggunakan metode yang berbeda berdasarkan pada bagaimana saya ingin referensi item.

Gunakan foreach jika Anda hanya ingin item saat ini.

Gunakan untuk jika Anda memerlukan pengindeks untuk melakukan perbandingan relatif. (Yaitu, bagaimana ini dibandingkan dengan item sebelumnya / berikutnya?)

Saya tidak pernah memperhatikan perbedaan kinerja. Saya akan menunggu sampai memiliki masalah kinerja sebelum mengkhawatirkannya.

Dengan for (var i di myArray) Anda juga dapat mengulang objek, saya akan berisi nama kunci dan Anda dapat mengakses properti melalui myArray [i] . Selain itu, semua metode yang akan Anda tambahkan ke objek akan dimasukkan dalam loop, juga, yaitu, jika Anda menggunakan kerangka kerja eksternal seperti jQuery atau prototipe, atau jika Anda menambahkan metode ke objek prototipe secara langsung, pada satu titik saya akan menunjuk ke metode-metode itu.

Awas!

Misalnya, jika Anda memiliki beberapa tag skrip dan sedang mencari informasi dalam atribut tag, Anda harus menggunakan properti .length dengan for for karena itu bukan array sederhana melainkan objek HTMLCollection.

https://developer.mozilla.org/en/DOM/HTMLCollection

Jika Anda menggunakan pernyataan foreach untuk (var i di yourList) itu akan mengembalikan properti dan metode HTMLCollection di sebagian besar browser!

var scriptTags = document.getElementsByTagName("script");

for(var i = 0; i < scriptTags.length; i++)
alert(i); // Will print all your elements index (you can get src attribute value using scriptTags[i].attributes[0].value)

for(var i in scriptTags)
alert(i); // Will print "length", "item" and "namedItem" in addition to your elements!

Bahkan jika getElementsByTagName harus mengembalikan NodeList, sebagian besar browser mengembalikan HTMLCollection: https://developer.mozilla.org/en/DOM/document.getElementsByTagName

Karena dalam loop pada Array tidak kompatibel dengan Prototipe. Jika Anda berpikir Anda mungkin perlu menggunakan perpustakaan itu di masa depan, masuk akal untuk berpegang teguh pada loop.

http://www.prototypejs.org/api/array

Saya telah melihat masalah dengan "untuk masing-masing" menggunakan objek dan prototipe dan array

pemahaman saya adalah bahwa untuk masing-masing adalah untuk properti objek dan BUKAN array

Jika Anda benar-benar ingin mempercepat kode Anda, bagaimana dengan itu?

for( var i=0,j=null; j=array[i++]; foo(j) );

itu agak memiliki logika sementara dalam pernyataan untuk dan itu kurang berlebihan. Juga firefox memiliki Array.forEach dan Array.filter

Kode yang lebih pendek dan terbaik menurut jsperf adalah

keys  = Object.keys(obj);
for (var i = keys.length; i--;){
   value = obj[keys[i]];// or other action
}

Gunakan array Array (). ForEach untuk memanfaatkan paralelisme

untuk (;;) adalah untuk Array : [20,55,33]

for..in adalah untuk Objects : {x: 20, y: 55: z: 33}

Hati-hati!!! Saya menggunakan Chrome 22.0 di Mac OS dan saya mengalami masalah dengan untuk setiap sintaks.

Saya tidak tahu apakah ini masalah browser, masalah javascript atau beberapa kesalahan dalam kode, tapi ini SANGAT aneh. Di luar objek itu bekerja dengan sempurna.

var MyTest = {
    a:string = "a",
    b:string = "b"
};

myfunction = function(dicts) {
    for (var dict in dicts) {
        alert(dict);
        alert(typeof dict); // print 'string' (incorrect)
    }

    for (var i = 0; i < dicts.length; i++) {
        alert(dicts[i]);
        alert(typeof dicts[i]); // print 'object' (correct, it must be {abc: "xyz"})
    }
};

MyObj = function() {
    this.aaa = function() {
        myfunction([MyTest]);
    };
};
new MyObj().aaa(); // This does not work

myfunction([MyTest]); // This works

Ada perbedaan penting antara keduanya. For-in iterate atas properti dari suatu objek, jadi ketika case adalah array, ia tidak hanya akan beralih pada elemen-elemennya tetapi juga pada fungsi "remove" yang dimilikinya.

for (var i = 0; i < myArray.length; i++) { 
    console.log(i) 
}

//Output
0
1

for (var i in myArray) { 
    console.log(i) 
} 

// Output
0 
1 
remove

Anda bisa menggunakan for-in dengan if(myArray.hasOwnProperty(i)). Namun, ketika mengulangi array saya selalu lebih suka untuk menghindari ini dan hanya menggunakan pernyataan for (;;).

Meskipun keduanya sangat mirip, ada perbedaan kecil:

var array = ["a", "b", "c"];
array["abc"] = 123;
console.log("Standard for loop:");
for (var index = 0; index < array.length; index++)
{
  console.log(" array[" + index + "] = " + array[index]); //Standard for loop
}

dalam hal ini outputnya adalah:

STANDAR UNTUK LOOP:

ARRAY [0] = A

ARRAY [1] = B

ARRAY [2] = C

console.log("For-in loop:");
for (var key in array)
{
  console.log(" array[" + key + "] = " + array[key]); //For-in loop output
}

sedangkan dalam hal ini outputnya adalah:

FOR-IN LOOP:

ARRAY [1] = B

ARRAY [2] = C

ARRAY [10] = D

ARRAY [ABC] = 123

Pernyataan dalam untuk memungkinkan untuk perulangan melalui nama-nama semua properti dari suatu objek. Sayangnya, itu juga loop melalui semua anggota yang diwarisi melalui rantai prototipe. Ini memiliki efek samping yang buruk dari melayani fungsi metode ketika bunga ada di anggota data.