Mengapa menggunakan "untuk ... dalam" dengan iterasi array adalah ide yang buruk?

Saya diberitahu untuk tidak menggunakan for...inarray dalam JavaScript. Kenapa tidak?

Alasannya adalah bahwa satu konstruksi:

var a = []; // Create a new empty array.
a[5] = 5;   // Perfectly legal JavaScript that resizes the array.

for (var i = 0; i < a.length; i++) {
    // Iterate over numeric indexes from 0 to 5, as everyone expects.
    console.log(a[i]);
}

/* Will display:
   undefined
   undefined
   undefined
   undefined
   undefined
   5
*/

kadang-kadang bisa sangat berbeda dari yang lain:

var a = [];
a[5] = 5;
for (var x in a) {
    // Shows only the explicitly set index of "5", and ignores 0-4
    console.log(x);
}

/* Will display:
   5
*/

Juga pertimbangkan bahwa perpustakaan JavaScript mungkin melakukan hal-hal seperti ini, yang akan memengaruhi array apa pun yang Anda buat:

// Somewhere deep in your JavaScript library...
Array.prototype.foo = 1;

// Now you have no idea what the below code will do.
var a = [1, 2, 3, 4, 5];
for (var x in a){
    // Now foo is a part of EVERY array and 
    // will show up here as a value of 'x'.
    console.log(x);
}

/* Will display:
   0
   1
   2
   3
   4
   foo
*/

The for-inPernyataan itu sendiri tidak "praktek buruk", namun dapat disalahgunakan , misalnya, untuk iterate lebih dari array atau array-seperti objek.

Tujuan dari for-inpernyataan ini adalah untuk menghitung lebih dari properti objek. Pernyataan ini akan muncul dalam rantai prototipe, juga menyebutkan sifat-sifat yang diwariskan , suatu hal yang terkadang tidak diinginkan.

Juga, urutan iterasi tidak dijamin oleh spec., Yang berarti bahwa jika Anda ingin "mengulangi" objek array, dengan pernyataan ini Anda tidak dapat yakin bahwa properti (indeks array) akan dikunjungi dalam urutan numerik.

Misalnya, dalam JScript (IE <= 8), urutan enumerasi bahkan pada objek Array didefinisikan ketika properti dibuat:

var array = [];
array[2] = 'c';
array[1] = 'b';
array[0] = 'a';

for (var p in array) {
  //... p will be "2", "1" and "0" on IE
}

Juga, berbicara tentang properti yang diwarisi, jika Anda, misalnya, memperluas Array.prototypeobjek (seperti beberapa pustaka seperti yang dilakukan MooTools), properti itu juga akan disebutkan:

Array.prototype.last = function () { return this[this.length-1]; };

for (var p in []) { // an empty array
  // last will be enumerated
}

Seperti yang saya katakan sebelumnya untuk beralih pada array atau objek seperti array, hal terbaik adalah menggunakan loop berurutan , seperti plain-old for/ whileloop.

Saat Anda ingin menghitung hanya properti sendiri dari suatu objek (yang tidak diwariskan), Anda dapat menggunakan hasOwnPropertymetode ini:

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) {
    // prop is not inherited
  }
}

Dan beberapa orang bahkan merekomendasikan untuk memanggil metode langsung dari Object.prototypeuntuk menghindari masalah jika seseorang menambahkan properti yang dinamai hasOwnPropertyke objek kita:

for (var prop in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, prop)) {
    // prop is not inherited
  }
}

Ada tiga alasan mengapa Anda tidak perlu menggunakannya for..inuntuk mengulangi elemen array:

• for..inakan mengulang semua properti yang dimiliki dan diwarisi dari objek array yang tidak DontEnum; itu berarti jika seseorang menambahkan properti ke objek array tertentu (ada alasan yang valid untuk ini - saya sudah melakukannya sendiri) atau berubah Array.prototype(yang dianggap praktik buruk dalam kode yang seharusnya bekerja dengan baik dengan skrip lain), properti ini akan diulangi juga; properti yang diwarisi dapat dikecualikan dengan memeriksa hasOwnProperty(), tetapi itu tidak akan membantu Anda dengan properti yang diatur dalam objek array itu sendiri

• for..in tidak dijamin untuk mempertahankan pemesanan elemen

• itu lambat karena Anda harus berjalan semua properti objek array dan seluruh rantai prototipe dan masih hanya akan mendapatkan nama properti, yaitu untuk mendapatkan nilai, pencarian tambahan akan diperlukan

Karena untuk ... dalam penghitungan melalui objek yang menyimpan array, bukan array itu sendiri. Jika saya menambahkan fungsi ke rantai prototipe array, itu juga akan disertakan. Yaitu

Array.prototype.myOwnFunction = function() { alert(this); }
a = new Array();
a[0] = 'foo';
a[1] = 'bar';
for(x in a){
 document.write(x + ' = ' + a[x]);
}

Ini akan menulis:

0 = foo
1 = bar
myOwnFunction = function () {alert (this); }

Dan karena Anda tidak pernah bisa yakin bahwa tidak ada yang akan ditambahkan ke rantai prototipe cukup gunakan for loop untuk menyebutkan array:

for(i=0,x=a.length;i<x;i++){
 document.write(i + ' = ' + a[i]);
}

Ini akan menulis:

0 = foo
1 = bar

Secara terpisah, tidak ada salahnya menggunakan for-in pada array. For-in iterates atas nama properti dari suatu objek, dan dalam kasus array "out-of-the-box", properti sesuai dengan indeks array. (Propertes bawaan suka length, toStringdan sebagainya tidak termasuk dalam iterasi.)

Namun, jika kode Anda (atau kerangka yang Anda gunakan) menambahkan properti kustom ke array atau ke prototipe array, maka properti ini akan dimasukkan dalam iterasi, yang mungkin bukan yang Anda inginkan.

Beberapa kerangka kerja JS, seperti Prototipe memodifikasi prototipe Array. Kerangka kerja lain seperti JQuery tidak, jadi dengan JQuery Anda dapat menggunakan for-in dengan aman.

Jika Anda ragu, Anda sebaiknya tidak menggunakan for-in.

Cara alternatif untuk iterasi melalui array menggunakan for-loop:

for (var ix=0;ix<arr.length;ix++) alert(ix);

Namun, ini memiliki masalah yang berbeda. Masalahnya adalah bahwa array JavaScript dapat memiliki "lubang". Jika Anda mendefinisikan arrsebagai:

var arr = ["hello"];
arr[100] = "goodbye";

Kemudian array memiliki dua item, tetapi panjang 101. Menggunakan for-in akan menghasilkan dua indeks, sedangkan for-loop akan menghasilkan 101 indeks, di mana 99 memiliki nilai undefined.

Pada 2016 (ES6) kita dapat menggunakan for…ofuntuk iterasi array, seperti yang sudah diperhatikan oleh John Slegers.

Saya hanya ingin menambahkan kode demonstrasi sederhana ini, untuk membuatnya lebih jelas:

Array.prototype.foo = 1;
var arr = [];
arr[5] = "xyz";

console.log("for...of:");
var count = 0;
for (var item of arr) {
    console.log(count + ":", item);
    count++;
    }

console.log("for...in:");
count = 0;
for (var item in arr) {
    console.log(count + ":", item);
    count++;
    }

Konsol menunjukkan:

for...of:

0: undefined
1: undefined
2: undefined
3: undefined
4: undefined
5: xyz

for...in:

0: 5
1: foo

Dengan kata lain:

• for...ofdihitung dari 0 hingga 5, dan juga diabaikan Array.prototype.foo. Ini menunjukkan nilai array .

• for...inhanya mencantumkan 5, mengabaikan indeks array yang tidak ditentukan, tetapi menambahkan foo. Ini menunjukkan nama properti array .

Jawaban singkat: Itu tidak layak.

Jawaban yang lebih panjang: Itu tidak layak, bahkan jika urutan elemen berurutan dan kinerja optimal tidak diperlukan.

Jawaban panjang: Tidak layak ...

• Menggunakan for (var property in array)akan menyebabkan arrayuntuk diiterasi sebagai objek , melintasi rantai prototipe objek dan akhirnya melakukan lebih lambat daripada berbasis indeksfor loop .
• for (... in ...) tidak dijamin untuk mengembalikan properti objek dalam urutan berurutan, seperti yang mungkin diharapkan.
• Menggunakan hasOwnProperty()dan !isNaN()memeriksa untuk menyaring properti objek adalah overhead tambahan yang menyebabkannya bekerja lebih lambat dan meniadakan alasan utama untuk menggunakannya di tempat pertama, yaitu karena format yang lebih ringkas.

Untuk alasan ini, trade-off yang dapat diterima antara kinerja dan kenyamanan bahkan tidak ada. Benar-benar tidak ada manfaat kecuali tujuannya adalah untuk menangani array sebagai objek dan melakukan operasi pada properti objek array.

Selain alasan yang diberikan dalam jawaban lain, Anda mungkin tidak ingin menggunakan struktur "untuk ... dalam" jika Anda perlu melakukan matematika dengan variabel penghitung karena loop berulang melalui nama properti objek dan variabel tersebut adalah sebuah string.

Sebagai contoh,

for (var i=0; i<a.length; i++) {
    document.write(i + ', ' + typeof i + ', ' + i+1);
}

akan menulis

0, number, 1
1, number, 2
...

sedangkan,

for (var ii in a) {
    document.write(i + ', ' + typeof i + ', ' + i+1);
}

akan menulis

0, string, 01
1, string, 11
...

Tentu saja, ini dapat dengan mudah diatasi dengan memasukkan

ii = parseInt(ii);

dalam lingkaran, tetapi struktur pertama lebih langsung.

Selain dari fakta bahwa for... inloop atas semua properti yang dapat dihitung (yang tidak sama dengan "semua elemen array"!), Lihat http://www.ecma-international.org/publications/files/ECMA-ST/Ecma -262.pdf , bagian 12.6.4 (edisi ke-5) atau 13.7.5.15 (edisi ke-7):

Mekanika dan urutan penghitungan properti ... tidak ditentukan ...

(Penekanan milikku.)

Itu berarti jika suatu browser ingin, itu bisa melalui properti dalam urutan di mana mereka dimasukkan. Atau dalam urutan numerik. Atau dalam urutan leksikal (di mana "30" muncul sebelum "4"! Ingat semua kunci objek - dan dengan demikian, semua indeks array - sebenarnya adalah string, sehingga masuk akal secara total). Itu bisa melalui mereka dengan ember, jika mengimplementasikan objek sebagai tabel hash. Atau ambil salah satu dari itu dan tambahkan "mundur". Peramban bahkan dapat beralih secara acak dan memenuhi persyaratan ECMA-262, asalkan mengunjungi setiap properti tepat satu kali.

Dalam praktiknya, sebagian besar browser saat ini ingin beralih dalam urutan yang kurang lebih sama. Tapi tidak ada yang mengatakan mereka harus melakukannya. Itu implementasi spesifik, dan bisa berubah kapan saja jika cara lain ditemukan jauh lebih efisien.

Either way, for... indisertai dengan itu tidak ada konotasi ketertiban. Jika Anda peduli tentang pesanan, jelaskan tentang hal itu dan gunakan forloop reguler dengan indeks.

Terutama dua alasan:

Satu

Seperti yang dikatakan orang lain, Anda mungkin mendapatkan kunci yang tidak ada dalam array Anda atau yang diwarisi dari prototipe. Jadi jika, katakanlah, perpustakaan menambahkan properti ke prototipe Array atau Object:

Array.prototype.someProperty = true

Anda akan mendapatkannya sebagai bagian dari setiap larik:

for(var item in [1,2,3]){
  console.log(item) // will log 1,2,3 but also "someProperty"
}

Anda bisa menyelesaikan ini dengan metode hasOwnProperty:

var ary = [1,2,3];
for(var item in ary){
   if(ary.hasOwnProperty(item)){
      console.log(item) // will log only 1,2,3
   }
}

tapi ini berlaku untuk iterasi atas objek apa pun dengan loop for-in.

Dua

Biasanya urutan item dalam array adalah penting, tetapi loop for-in tidak harus berulang dalam urutan yang benar, itu karena ia memperlakukan array sebagai objek, yang merupakan cara penerapannya dalam JS, dan tidak sebagai sebuah array. Ini sepertinya hal kecil, tetapi benar-benar dapat mengacaukan aplikasi dan sulit untuk di-debug.

Karena ia menyebutkan melalui bidang objek, bukan indeks. Anda bisa mendapatkan nilai dengan indeks "panjang" dan saya ragu Anda menginginkannya.

Saya rasa saya tidak punya banyak hal untuk ditambahkan misalnya. Jawaban Triptych atau jawaban CMS tentang mengapa menggunakanfor...in harus dihindari dalam beberapa kasus.

Namun, saya ingin menambahkan bahwa di browser modern ada alternatif for...inyang dapat digunakan dalam kasus-kasus di mana for...intidak dapat digunakan. Alternatif itu adalah for...of:

for (var item of items) {
    console.log(item);
}

Catatan :

Sayangnya, tidak ada versi Internet Explorer yang mendukung for...of( Edge 12+ melakukannya), jadi Anda harus menunggu sedikit lebih lama hingga Anda dapat menggunakannya dalam kode produksi sisi klien Anda. Namun, aman untuk digunakan di kode JS sisi server Anda (jika Anda menggunakan Node.js ).

Masalah dengan for ... in ...- dan ini hanya menjadi masalah ketika seorang programmer tidak benar-benar mengerti bahasa; itu bukan benar-benar bug atau apa pun - adalah bahwa itu berulang atas semua anggota objek (well, semua anggota enumerable , tapi itu detail untuk saat ini). Ketika Anda ingin beralih hanya pada properti yang diindeks dari array, satu-satunya cara dijamin untuk menjaga hal-hal konsisten secara semantik adalah dengan menggunakan indeks integer (yaitu, for (var i = 0; i < array.length; ++i)loop gaya).

Objek apa pun dapat memiliki sifat sewenang-wenang yang terkait dengannya. Tidak ada yang buruk tentang memuat properti tambahan ke instance array, khususnya. Kode yang ingin melihat hanya properti seperti array yang diindeks karena itu harus tetap berpegang pada indeks integer. Kode yang sepenuhnya menyadari apa yang perlufor ... in dan benar-benar perlu untuk melihat semua properti, baik maka itu juga ok.

Juga, karena semantik, cara for, inmemperlakukan array (yaitu sama dengan objek JavaScript lainnya) tidak selaras dengan bahasa populer lainnya.

// C#
char[] a = new char[] {'A', 'B', 'C'};
foreach (char x in a) System.Console.Write(x); //Output: "ABC"

// Java
char[] a = {'A', 'B', 'C'};
for (char x : a) System.out.print(x);          //Output: "ABC"

// PHP
$a = array('A', 'B', 'C');
foreach ($a as $x) echo $x;                    //Output: "ABC"

// JavaScript
var a = ['A', 'B', 'C'];
for (var x in a) document.write(x);            //Output: "012"

TL&DR: Menggunakan for inloop dalam array bukanlah kejahatan, pada kenyataannya justru sebaliknya.

Saya pikir for inloop adalah permata dari JS jika digunakan dengan benar dalam array. Anda diharapkan memiliki kontrol penuh atas perangkat lunak Anda dan tahu apa yang Anda lakukan. Mari kita lihat kekurangan yang disebutkan dan buktikan satu per satu.

1. Itu loop melalui properti yang diwarisi juga: Pertama-tama semua ekstensi ke yang Array.prototypeseharusnya telah dilakukan dengan menggunakan Object.defineProperty()dan enumerabledeskriptor mereka harus diatur ke false. Pustaka yang tidak melakukannya tidak boleh digunakan sama sekali.
2. Properti-properti yang Anda tambahkan ke rantai warisan kemudian mendapatkan dihitung: Ketika melakukan berbagai sub-mengklasifikasikan oleh Object.setPrototypeOfatau dengan Kelas extend. Anda harus menggunakan lagi Object.defineProperty()yang secara default mengatur writable, enumerabledan configurabledeskriptor properti false. Mari kita lihat contoh sub-klasifikasi array di sini ...

function Stack(...a){
  var stack = new Array(...a);
  Object.setPrototypeOf(stack, Stack.prototype);
  return stack;
}
Stack.prototype = Object.create(Array.prototype);                                 // now stack has full access to array methods.
Object.defineProperty(Stack.prototype,"constructor",{value:Stack});               // now Stack is a proper constructor
Object.defineProperty(Stack.prototype,"peak",{value: function(){                  // add Stack "only" methods to the Stack.prototype.
                                                       return this[this.length-1];
                                                     }
                                             });
var s = new Stack(1,2,3,4,1);
console.log(s.peak());
s[s.length] = 7;
console.log("length:",s.length);
s.push(42);
console.log(JSON.stringify(s));
console.log("length:",s.length);

for(var i in s) console.log(s[i]);

Jadi Anda tahu .. for inloop sekarang aman karena Anda peduli dengan kode Anda.

3. The for inLoop lambat: Hell no. Ini sejauh ini metode iterasi tercepat jika Anda mengulang array jarang yang diperlukan dari waktu ke waktu. Ini adalah salah satu trik kinerja paling penting yang harus diketahui. Mari kita lihat sebuah contoh. Kami akan mengulangi array yang jarang.

var a = [];
a[0] = "zero";
a[10000000] = "ten million";
console.time("for loop on array a:");
for(var i=0; i < a.length; i++) a[i] && console.log(a[i]);
console.timeEnd("for loop on array a:");
console.time("for in loop on array a:");
for(var i in a) a[i] && console.log(a[i]);
console.timeEnd("for in loop on array a:");

Selain masalah lain, sintaks "for..in" mungkin lebih lambat, karena indeksnya adalah string, bukan bilangan bulat.

var a = ["a"]
for (var i in a)
    alert(typeof i)  // 'string'
for (var i = 0; i < a.length; i++)
    alert(typeof i)  // 'number'

Aspek penting adalah bahwa for...inhanya iterate atas properti yang terkandung dalam objek yang atribut enumerable properti mereka disetel ke true. Jadi, jika seseorang mencoba untuk mengulangi objek menggunakan for...inmaka properti sewenang-wenang dapat dilewatkan jika atribut properti enumerable mereka salah. Sangat mungkin untuk mengubah atribut properti enumerable untuk objek Array normal sehingga elemen-elemen tertentu tidak disebutkan. Meskipun secara umum atribut properti cenderung berlaku untuk fungsi properti dalam suatu objek.

Orang dapat memeriksa nilai atribut properti enumerable properti dengan:

myobject.propertyIsEnumerable('myproperty')

Atau untuk memperoleh keempat atribut properti:

Object.getOwnPropertyDescriptor(myobject,'myproperty')

Ini adalah fitur yang tersedia di ECMAScript 5 - dalam versi sebelumnya tidak mungkin mengubah nilai atribut properti enumerable (selalu disetel ke true).

The for/ inbekerja dengan dua jenis variabel: hashtable (array asosiatif) dan array (non-asosiatif).

JavaScript akan secara otomatis menentukan cara barang tersebut melewati item. Jadi, jika Anda tahu bahwa array Anda benar-benar non-asosiatif, Anda dapat menggunakan for (var i=0; i<=arrayLen; i++), dan melewatkan iterasi deteksi otomatis.

Tetapi menurut saya, lebih baik menggunakan for/ in, proses yang diperlukan untuk deteksi otomatis itu sangat kecil.

Jawaban nyata untuk ini akan tergantung pada bagaimana parser / penterjemah kode JavaScript. Itu dapat berubah di antara browser.

Saya tidak dapat memikirkan tujuan lain untuk tidak menggunakan for/ in;

//Non-associative
var arr = ['a', 'b', 'c'];
for (var i in arr)
   alert(arr[i]);

//Associative
var arr = {
   item1 : 'a',
   item2 : 'b',
   item3 : 'c'
};

for (var i in arr)
   alert(arr[i]);

Karena itu akan beralih pada properti yang dimiliki objek hingga rantai prototipe jika Anda tidak hati-hati.

Anda dapat menggunakan for.. in, pastikan untuk memeriksa setiap properti dengan hasOwnProperty .

Ini tidak selalu buruk (berdasarkan apa yang Anda lakukan), tetapi dalam kasus array, jika sesuatu telah ditambahkan Array.prototype, maka Anda akan mendapatkan hasil yang aneh. Di mana Anda mengharapkan loop ini berjalan tiga kali:

var arr = ['a','b','c'];
for (var key in arr) { ... }

Jika fungsi yang disebut helpfulUtilityMethodtelah ditambahkan ke Array's prototype, maka loop Anda akan berakhir berjalan empat kali: keyakan 0, 1, 2, dan helpfulUtilityMethod. Jika Anda hanya mengharapkan bilangan bulat, oops.

Anda harus menggunakan for(var x in y)hanya pada daftar properti, bukan pada objek (seperti yang dijelaskan di atas).

Menggunakan for...inloop untuk sebuah array tidak salah, walaupun saya bisa menebak mengapa seseorang memberi tahu Anda bahwa:

1.) Sudah ada fungsi orde yang lebih tinggi, atau metode, yang memiliki tujuan untuk array, tetapi memiliki lebih banyak fungsi dan sintaks yang lebih ramping, yang disebut 'forEach': Array.prototype.forEach(function(element, index, array) {} );

2.) Array selalu memiliki panjang, tetapi for...indan forEachtidak menjalankan fungsi untuk nilai apa pun 'undefined', hanya untuk indeks yang memiliki nilai yang ditentukan. Jadi jika Anda hanya menetapkan satu nilai, loop ini hanya akan mengeksekusi fungsi sekali, tetapi karena array dihitung, itu akan selalu memiliki panjang hingga indeks tertinggi yang memiliki nilai yang ditentukan, tetapi panjang itu bisa luput dari perhatian ketika menggunakan ini loop.

3.) Standar untuk loop akan menjalankan fungsi sebanyak yang Anda tentukan dalam parameter, dan karena array diberi nomor, lebih masuk akal untuk menentukan berapa kali Anda ingin menjalankan suatu fungsi. Tidak seperti loop lainnya, loop for kemudian dapat menjalankan fungsi untuk setiap indeks dalam array, apakah nilainya didefinisikan atau tidak.

Intinya, Anda bisa menggunakan loop apa saja, tetapi Anda harus ingat persis cara kerjanya. Memahami kondisi di mana loop berbeda mengulangi, fungsi terpisah mereka, dan menyadari bahwa mereka akan lebih atau kurang sesuai untuk skenario yang berbeda.

Juga, mungkin dianggap sebagai praktik yang lebih baik untuk menggunakan forEachmetode ini daripada for...inloop pada umumnya, karena lebih mudah untuk menulis dan memiliki lebih banyak fungsi, jadi Anda mungkin ingin membiasakan diri hanya menggunakan metode dan standar ini untuk, tetapi Anda panggilan.

Lihat di bawah ini bahwa dua loop pertama hanya menjalankan pernyataan console.log sekali, sedangkan standar untuk loop mengeksekusi fungsi sebanyak yang ditentukan, dalam hal ini, array.length = 6.

var arr = [];
arr[5] = 'F';

for (var index in arr) {
console.log(index);
console.log(arr[index]);
console.log(arr)
}
// 5
// 'F'
// => (6) [undefined x 5, 6]

arr.forEach(function(element, index, arr) {
console.log(index);
console.log(element);
console.log(arr);
});
// 5
// 'F'
// => Array (6) [undefined x 5, 6]

for (var index = 0; index < arr.length; index++) {
console.log(index);
console.log(arr[index]);
console.log(arr);
};
// 0
// undefined
// => Array (6) [undefined x 5, 6]

// 1
// undefined
// => Array (6) [undefined x 5, 6]

// 2
// undefined
// => Array (6) [undefined x 5, 6]

// 3
// undefined
// => Array (6) [undefined x 5, 6]

// 4
// undefined
// => Array (6) [undefined x 5, 6]

// 5
// 'F'
// => Array (6) [undefined x 5, 6]

Berikut adalah alasan mengapa ini (biasanya) merupakan praktik buruk:

1. for...inloop mengulangi semua properti enumerable mereka sendiri dan properti enumerable prototipe mereka. Biasanya dalam iterasi array kita hanya ingin mengulangi array itu sendiri. Dan meskipun Anda sendiri mungkin tidak menambahkan apa pun ke array, pustaka atau kerangka kerja Anda mungkin menambahkan sesuatu.

Contoh :

Array.prototype.hithere = 'hithere';

var array = [1, 2, 3];
for (let el in array){
    // the hithere property will also be iterated over
    console.log(el);
}

2. for...inloop tidak menjamin urutan iterasi tertentu . Meskipun pesanan biasanya terlihat di sebagian besar browser modern hari ini, masih belum ada jaminan 100%.
3. for...inloop mengabaikan undefinedelemen array, yaitu elemen array yang belum ditetapkan.

Contoh ::

const arr = []; 
arr[3] = 'foo';   // resize the array to 4
arr[4] = undefined; // add another element with value undefined to it

// iterate over the array, a for loop does show the undefined elements
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

console.log('\n');

// for in does ignore the undefined elements
for (let el in arr) {
    console.log(arr[el]);
}

untuk ... di berguna ketika bekerja pada objek dalam JavaScript, tetapi tidak untuk Array, tapi tetap saja kita tidak bisa mengatakan itu cara yang salah, tetapi tidak disarankan, lihat contoh di bawah ini menggunakan for ... in loop:

let txt = "";
const person = {fname:"Alireza", lname:"Dezfoolian", age:35}; 
for (const x in person) {
    txt += person[x] + " ";
}
console.log(txt); //Alireza Dezfoolian 35 

OK, mari kita lakukan dengan Array sekarang:

let txt = "";
const person = ["Alireza", "Dezfoolian", 35]; 
for (const x in person) {
   txt += person[x] + " ";
}
console.log(txt); //Alireza Dezfoolian 35 

Seperti yang Anda lihat hasilnya sama ...

Tapi mari kita coba sesuatu, mari kita prototipe sesuatu ke Array ...

Array.prototype.someoneelse = "someoneelse";

Sekarang kita membuat Array baru ();

let txt = "";
const arr = new Array();
arr[0] = 'Alireza';
arr[1] = 'Dezfoolian';
arr[2] = 35;
for(x in arr) {
 txt += arr[x] + " ";
}
console.log(txt); //Alireza Dezfoolian 35 someoneelse

Kalian lihat seseorang itu sendiri !!! ... Kita benar-benar mengulang-ulang objek Array baru dalam kasus ini!

Jadi itulah salah satu alasan mengapa kita perlu menggunakan untuk..dalam hati-hati, tapi itu tidak selalu terjadi ...

A for ... in loop selalu menyebutkan kunci. Kunci properti objek selalu berupa String, bahkan properti yang diindeks dari sebuah array:

var myArray = ['a', 'b', 'c', 'd'];
var total = 0
for (elem in myArray) {
  total += elem
}
console.log(total); // 00123

Karena elemen JavaScript disimpan sebagai properti objek standar, tidak disarankan untuk mengulanginya menggunakan array JavaScript yang digunakan untuk ... dalam loop karena elemen normal dan semua properti yang dapat dihitung akan dicantumkan.

Dari https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections

walaupun tidak secara khusus ditanggapi oleh pertanyaan ini, saya akan menambahkan bahwa ada alasan yang sangat baik untuk tidak pernah menggunakan ... dengan NodeList(karena orang akan mendapatkan dari querySelectorAllpanggilan, karena tidak melihat elemen yang dikembalikan sama sekali, sebagai gantinya hanya mengulangi properti NodeList.

dalam hal hasil tunggal, saya mendapat:

var nodes = document.querySelectorAll(selector);
nodes
▶ NodeList [a._19eb]
for (node in nodes) {console.log(node)};
VM505:1 0
VM505:1 length
VM505:1 item
VM505:1 entries
VM505:1 forEach
VM505:1 keys
VM505:1 values

yang menjelaskan mengapa saya for (node in nodes) node.href = newLink;gagal.