Apa artinya JSLint error 'body of for in harus dibungkus dengan pernyataan if'?

Saya menggunakan JSLint pada file JavaScript milik saya. Itu melemparkan kesalahan:

for( ind in evtListeners ) {

Masalah pada baris 41 karakter 9: Tubuh for in harus dibungkus dengan pernyataan if untuk menyaring properti yang tidak diinginkan dari prototipe.

Apa artinya ini?

Pertama-tama, jangan pernah menggunakan for inloop untuk menghitung lebih dari satu array. Tidak pernah. Pakai tua yang bagus for(var i = 0; i<arr.length; i++).

Alasan di balik ini adalah sebagai berikut: setiap objek dalam JavaScript memiliki bidang khusus yang disebut prototype. Segala sesuatu yang Anda tambahkan ke bidang itu akan dapat diakses pada setiap objek jenis itu. Misalkan Anda ingin semua array memiliki fungsi baru yang keren yang disebut filter_0yang akan menyaring nol.

Array.prototype.filter_0 = function() {
    var res = [];
    for (var i = 0; i < this.length; i++) {
        if (this[i] != 0) {
            res.push(this[i]);
        }
    }
    return res;
};

console.log([0, 5, 0, 3, 0, 1, 0].filter_0());
//prints [5,3,1]

Ini adalah cara standar untuk memperluas objek dan menambahkan metode baru. Banyak perpustakaan melakukan ini. Namun, mari kita lihat cara for inkerjanya sekarang:

var listeners = ["a", "b", "c"];
for (o in listeners) {
    console.log(o);
}
//prints:
//  0
//  1
//  2
//  filter_0

Apakah kamu lihat? Tiba-tiba berpikir filter_0 adalah indeks array lain. Tentu saja, ini bukan benar-benar indeks numerik, tetapi for inmenghitung melalui bidang objek, bukan hanya indeks numerik. Jadi kita sekarang menghitung melalui setiap indeks numerik dan filter_0 . Tetapi filter_0bukan bidang objek array tertentu, setiap objek array memiliki properti ini sekarang.

Untungnya, semua objek memiliki hasOwnPropertymetode, yang memeriksa apakah bidang ini benar-benar milik objek itu sendiri atau jika itu hanya diwarisi dari rantai prototipe dan dengan demikian milik semua objek jenis itu.

for (o in listeners) {
    if (listeners.hasOwnProperty(o)) {
       console.log(o);
    }
}
 //prints:
 //  0
 //  1
 //  2

Perhatikan, bahwa meskipun kode ini berfungsi seperti yang diharapkan untuk array, Anda tidak boleh, tidak pernah , menggunakan for indan for each inuntuk array. Ingat bahwa for inmenghitung bidang objek, bukan indeks array atau nilai.

var listeners = ["a", "b", "c"];
listeners.happy = "Happy debugging";

for (o in listeners) {
    if (listeners.hasOwnProperty(o)) {
       console.log(o);
    }
}

 //prints:
 //  0
 //  1
 //  2
 //  happy

Douglas Crockford, penulis jslint telah menulis (dan berbicara) tentang masalah ini berkali-kali. Ada bagian pada ini halaman situs Web-nya yang meliputi ini:

untuk Pernyataan

A untuk kelas pernyataan harus memiliki bentuk berikut:

for (initialization; condition; update) {
    statements
}

for (variable in object) {
    if (filter) {
        statements
    } 
}

Bentuk pertama harus digunakan dengan array dan dengan loop dari jumlah iterasi yang tidak dapat ditentukan.

Bentuk kedua harus digunakan dengan objek. Sadarilah bahwa anggota yang ditambahkan ke prototipe objek akan dimasukkan dalam enumerasi. Adalah bijaksana untuk memprogram pertahanan dengan menggunakan metode hasOwnProperty untuk membedakan anggota objek yang sebenarnya:

for (variable in object) {
    if (object.hasOwnProperty(variable)) {
        statements
    } 
}

Crockford juga memiliki seri video tentang teater YUI di mana ia berbicara tentang ini. Seri video / pembicaraan Crockford tentang javascript harus dilihat jika Anda sedikit serius tentang javascript.

Buruk: (jsHint akan melempar kesalahan)

for (var name in item) {
    console.log(item[name]);
}

Baik:

for (var name in item) {
  if (item.hasOwnProperty(name)) {
    console.log(item[name]);
  }
}

Jawaban Vava ada di sasaran. Jika Anda menggunakan jQuery, maka $.each()fungsinya menangani ini, maka itu lebih aman untuk digunakan.

$.each(evtListeners, function(index, elem) {
    // your code
});

@semua - semua yang ada di JavaScript adalah objek (), jadi pernyataan seperti "hanya gunakan ini pada objek" agak menyesatkan. Selain itu, JavaScript tidak diketik dengan kuat sehingga 1 == "1" benar (walaupun 1 === "1" tidak, Crockford besar dalam hal ini). Ketika datang ke konsep array progromatik di JS, mengetik penting dalam definisi.

@Brenton - Tidak perlu menjadi diktator terminologi; "array asosiatif", "kamus", "hash", "objek", semua konsep pemrograman ini berlaku untuk satu struktur di JS. Ini adalah pasangan nilai nama (kunci, indeks), di mana nilainya dapat berupa objek lain (string juga objek)

Jadi, new Array()sama dengan[]

new Object() kira-kira mirip dengan {}

var myarray = [];

Membuat struktur yang merupakan array dengan batasan bahwa semua indeks (alias kunci) harus berupa bilangan bulat. Ini juga memungkinkan untuk penetapan otomatis indeks baru melalui .push ()

var myarray = ["one","two","three"];

Memang paling baik ditangani via for(initialization;condition;update){

Tapi bagaimana dengan:

var myarray = [];
myarray[100] = "foo";
myarray.push("bar");

Coba ini:

var myarray = [], i;
myarray[100] = "foo";
myarray.push("bar");
myarray[150] = "baz";
myarray.push("qux");
alert(myarray.length);
for(i in myarray){
    if(myarray.hasOwnProperty(i)){  
        alert(i+" : "+myarray[i]);
    }
}

Mungkin bukan penggunaan array yang terbaik, tetapi hanya sebuah ilustrasi yang tidak selalu jelas.

Jika Anda tahu kunci Anda, dan pasti jika itu bukan bilangan bulat, satu-satunya pilihan struktur seperti array adalah objek.

var i, myarray= {
   "first":"john",
   "last":"doe",
   100:"foo",
   150:"baz"
};
for(i in myarray){
    if(myarray.hasOwnProperty(i)){  
        alert(i+" : "+myarray[i]);
    }
}

Tentunya agak ekstrem untuk dikatakan

... tidak pernah menggunakan for in loop untuk menghitung lebih dari satu array. Tidak pernah. Gunakan good old for (var i = 0; i <arr.length; i ++)

?

Layak menyoroti bagian dalam ekstrak Douglas Crockford

... Bentuk kedua harus digunakan dengan benda ...

Jika Anda memerlukan array asosiatif (alias hashtable / kamus) di mana kunci dinamai bukannya diindeks secara numerik, Anda harus mengimplementasikan ini sebagai objek, misalnya var myAssocArray = {key1: "value1", key2: "value2"...};.

Dalam hal ini myAssocArray.lengthakan muncul nol (karena objek ini tidak memiliki properti 'panjang'), dan Anda i < myAssocArray.lengthtidak akan membuat Anda terlalu jauh. Selain memberikan kenyamanan yang lebih besar, saya berharap array asosiatif untuk menawarkan keunggulan kinerja dalam banyak situasi, karena kunci array dapat menjadi properti yang berguna (yaitu properti ID atau nama anggota array), yang berarti Anda tidak perlu beralih melalui yang panjang. array berulang kali mengevaluasi apakah pernyataan untuk menemukan entri array yang Anda cari.

Bagaimanapun, terima kasih juga untuk penjelasan dari pesan kesalahan JSLint, saya akan menggunakan cek 'isOwnProperty' sekarang ketika berinteraksi melalui berbagai array asosiatif saya!

Ini berarti Anda harus memfilter properti evtListeners dengan metode hasOwnProperty .

Hanya untuk menambahkan pada topik untuk di / untuk / $ masing-masing, saya menambahkan kasus uji jsperf untuk menggunakan $ .each vs untuk di: http://jsperf.com/each-vs-for-in/2

Browser / versi yang berbeda menanganinya secara berbeda, tetapi tampaknya $ .each dan langsung masuk adalah pilihan termurah untuk performa.

Jika Anda menggunakannya untuk beralih melalui array / objek asosiatif, mengetahui apa yang Anda cari dan mengabaikan semua yang lain, gunakan $ .each jika Anda menggunakan jQuery, atau hanya untuk di (dan kemudian istirahat; begitu Anda sudah mencapai apa yang Anda tahu harus menjadi elemen terakhir)

Jika Anda mengulangi melalui array untuk melakukan sesuatu dengan setiap pasangan kunci di dalamnya, harus menggunakan metode hasOwnProperty jika Anda TIDAK menggunakan jQuery, dan menggunakan $ .each jika Anda DO menggunakan jQuery.

Selalu gunakan for(i=0;i<o.length;i++)jika Anda tidak memerlukan array asosiatif ... lol chrome melakukan itu 97% lebih cepat dari pada untuk atau$.each