Saya tahu apa itu for... inloop (iterates over key), tetapi mendengar pertama kali tentang for... of(iterates over value).

Saya bingung dengan for... ofloop. Saya tidak mendapatkan kata sifat. Ini adalah kode di bawah ini:

var arr = [3, 5, 7];
arr.foo = "hello";

for (var i in arr) {
  console.log(i); // logs "0", "1", "2", "foo"
}

for (var i of arr) {
  console.log(i); // logs "3", "5", "7"
  // it is does not log "3", "5", "7", "hello"
}

Apa yang saya dapatkan adalah, for... ofmengulangi nilai properti. Lalu mengapa itu tidak masuk (kembali) "3", "5", "7", "hello"bukan "3", "5", "7"? tetapi for... inloop berulang di atas setiap tombol ( "0", "1", "2", "foo"). Di sini for... inloop juga beralih pada fookunci. Tetapi for... oftidak mengulangi nilai fooproperti yaitu "hello". Kenapa begitu?

Singkat cerita:

Di sini saya konsol for... ofloop. Seharusnya log "3", "5", "7","hello"tapi di sini log "3", "5", "7". Mengapa

Contoh Tautan

for in loop atas nama properti enumerable dari suatu objek.

for of(Baru dalam ES6) tidak menggunakan iterator khusus objek dan loop atas nilai-nilai yang dihasilkan oleh itu.

Dalam contoh Anda, array iterator menghasilkan semua nilai dalam array (mengabaikan properti non-indeks).

Saya menemukan jawaban lengkap di: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Meskipun untuk skrip jenis, ini juga sama untuk javascript)

Keduanya for..ofdan for..inpernyataan beralih pada daftar; nilai-nilai yang diulang berbeda, for..inmengembalikan daftar kunci pada objek yang diulang, sedangkan for..ofmengembalikan daftar nilai-nilai sifat numerik dari objek yang diulang.

Berikut adalah contoh yang menunjukkan perbedaan ini:

let list = [4, 5, 6];

for (let i in list) {
   console.log(i); // "0", "1", "2",
}

for (let i of list) {
   console.log(i); // "4", "5", "6"
}

Perbedaan lain adalah bahwa for..in beroperasi pada objek apa pun; ini berfungsi sebagai cara untuk memeriksa properti pada objek ini. for..ofdi sisi lain, terutama tertarik pada nilai objek yang dapat diubah. Objek bawaan seperti Peta dan Tetapkan implement Symbol.iteratorproperti yang memungkinkan akses ke nilai yang disimpan.

let pets = new Set(["Cat", "Dog", "Hamster"]);
pets["species"] = "mammals";

for (let pet in pets) {
   console.log(pet); // "species"
}

for (let pet of pets) {
    console.log(pet); // "Cat", "Dog", "Hamster"
}

Untuk ... dalam lingkaran

The for ... in loop meningkatkan kelemahan loop for dengan menghilangkan logika penghitungan dan kondisi keluar.

Contoh:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Tapi, Anda masih harus berurusan dengan masalah menggunakan indeks untuk mengakses nilai-nilai array, dan itu bau; itu hampir membuatnya lebih membingungkan dari sebelumnya.

Juga, for ... in loop dapat membawa Anda ke masalah besar ketika Anda perlu menambahkan metode tambahan ke array (atau objek lain). Karena untuk ... dalam loop loop atas semua properti enumerable, ini berarti jika Anda menambahkan properti tambahan ke prototipe array, maka properti itu juga akan muncul dalam loop.

Array.prototype.decimalfy = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toFixed(2);
  }
};

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const index in digits) {
  console.log(digits[index]);
}

Cetakan:

0

1

2

3

4

5

6

7

8

9

function () {for (let i = 0; i <this.length; i ++) {this [i] = this [i] .toFixed (2); }}

Inilah sebabnya mengapa ... dalam loop tidak disarankan saat mengulang array.

CATATAN : Loop forEach adalah jenis lain untuk loop di JavaScript. Namun, forEach()sebenarnya adalah metode array, sehingga hanya dapat digunakan secara eksklusif dengan array. Juga tidak ada cara untuk menghentikan atau memutus forEach loop. Jika Anda membutuhkan tipe perilaku itu di loop Anda, Anda harus menggunakan dasar untuk loop.

Untuk ... dari loop

Untuk ... dari loop digunakan untuk mengulang semua jenis data yang dapat diulang.

Contoh:

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  console.log(digit);
}

Cetakan:

0

1

2

3

4

5

6

7

8

9

Ini membuat for ... of the loop versi paling ringkas dari semua for for loop.

Tapi tunggu, masih ada lagi! Untuk ... loop juga memiliki beberapa manfaat tambahan yang memperbaiki kelemahan for dan for ... in loop.

Anda dapat menghentikan atau menghancurkan for ... of loop kapan saja.

const digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

for (const digit of digits) {
  if (digit % 2 === 0) {
    continue;
  }
  console.log(digit);
}

Cetakan:

1

3

5

7

9

Dan Anda tidak perlu khawatir tentang menambahkan properti baru ke objek. Untuk ... dari loop hanya akan mengulang pada nilai-nilai dalam objek.

Perbedaan for..indan for..of:

Keduanya for..indan for..ofmerupakan perulangan konstruksi yang digunakan untuk beralih pada struktur data. Satu-satunya perbedaan adalah atas apa yang mereka lakukan:

1. for..initerates atas semua kunci properti enumerable dari suatu objek
2. for..ofiterates atas nilai - nilai objek iterable. Contoh objek yang dapat diubah adalah array, string, dan NodeLists.

Contoh:

let arr = ['el1', 'el2', 'el3'];

arr.addedProp = 'arrProp';

// elKey are the property keys
for (let elKey in arr) {
  console.log(elKey);
}

// elValue are the property values
for (let elValue of arr) {
  console.log(elValue)
}

Dalam contoh ini kita dapat mengamati bahwa for..inloop berulang di atas kunci objek, yang merupakan objek array dalam contoh ini. Tombolnya adalah 0, 1, 2 yang sesuai dengan elemen array yang kita tambahkan dan addedProp. Ini adalah bagaimana arrobjek array terlihat di devtools chrome:

Anda melihat bahwa for..inperulangan kami tidak lebih dari sekadar mengulangi nilai-nilai ini.

The for..ofloop dalam contoh kita iterates atas nilai-nilai dari struktur data. Nilai dalam contoh khusus ini adalah 'el1', 'el2', 'el3'. Nilai-nilai yang menggunakan struktur data iterable akan kembali for..oftergantung pada jenis objek iterable. Sebagai contoh sebuah array akan mengembalikan nilai-nilai semua elemen array sedangkan string mengembalikan setiap karakter individu dari string.

The for...inpernyataan iterates atas sifat enumerable suatu objek, dalam urutan yang sewenang-wenang. Properti enumerable adalah properti yang flag [[Enumerable]] internalnya benar, maka jika ada properti enumerable dalam rantai prototipe, for...inloop akan beralih pada mereka juga.

The for...ofpernyataan iterates atas data yang mendefinisikan objek iterable akan mengulangi lebih.

Contoh:

Object.prototype.objCustom = function() {}; 
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];

for (let i in iterable) {
  console.log(i); // logs: 0, 1, 2, "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // logs: 0, 1, 2,
  }
}

for (let i of iterable) {
  console.log(i); // logs: 3, 5, 7
}

Seperti sebelumnya, Anda dapat melewatkan menambahkan hasOwnPropertydi for...ofloop.

Pernyataan for-in iterate atas properti enumerable suatu objek, dalam urutan sewenang-wenang.

Loop akan mengulangi semua properti enumerable dari objek itu sendiri dan yang diwarisi objek dari prototipe konstruktornya

Anda dapat menganggapnya sebagai "untuk masuk" pada dasarnya mengulang dan mencantumkan semua kunci.

var str = 'abc';
var arrForOf = [];
var arrForIn = [];

for(value of str){
  arrForOf.push(value);
}

for(value in str){
  arrForIn.push(value);
}

console.log(arrForOf); 
// ["a", "b", "c"]
console.log(arrForIn); 
// ["0", "1", "2", "formatUnicorn", "truncate", "splitOnLast", "contains"]

Ada beberapa tipe data yang sudah didefinisikan yang memungkinkan kita untuk beralih di atasnya dengan mudah misalnya Array, Map, String Objects

Normal untuk yang diulang di atas iterator dan sebagai respons memberi kita kunci yang ada di urutan penyisipan seperti yang ditunjukkan pada contoh di bawah ini.

  const numbers = [1,2,3,4,5];
   for(let number in number) {
     console.log(number);
   }

   // result: 0, 1, 2, 3, 4

Sekarang jika kita mencoba yang sama dengan for , maka sebagai respons itu memberi kita nilai bukan kunci. misalnya

  const numbers = [1,2,3,4,5];
   for(let numbers of numbers) {
    console.log(number);
  }

  // result: 1, 2, 3, 4, 5

Jadi melihat kedua iterator kita dapat dengan mudah membedakan perbedaan keduanya.

Catatan: - Untuk hanya bekerja dengan Symbol.iterator

Jadi jika kita mencoba untuk mengulangi objek normal, maka itu akan memberi kita kesalahan misalnya-

const Room = {
   area: 1000,
   height: 7,
   floor: 2
 }

for(let prop in Room) {
 console.log(prop);
 } 

// Result area, height, floor

for(let prop of Room) {
  console.log(prop);
 } 

Kamar tidak bisa diubah

Sekarang untuk iterating over kita perlu mendefinisikan ES6 Symbol.iterator misalnya

  const Room= {
    area: 1000, height: 7, floor: 2,
   [Symbol.iterator]: function* (){
    yield this.area;
    yield this.height;
    yield this.floors;
  }
}


for(let prop of Room) {
  console.log(prop);
 } 

//Result 1000, 7, 2

Inilah perbedaan antara For in dan For of . Berharap itu bisa menghapus perbedaan.

Perbedaan lain antara kedua loop, yang belum pernah disebutkan sebelumnya:

Destrukturisasi for...insudah usang. Gunakan for...ofsebagai gantinya.

Sumber

Jadi jika kita ingin menggunakan destructure dalam satu loop, untuk mendapatkan kedua indeks dan nilai setiap elemen array , kita harus menggunakan for...ofloop dengan metode Arrayentries() :

for (const [idx, el] of arr.entries()) {
    console.log( idx + ': ' + el );
}

Semua orang memang menjelaskan mengapa masalah ini terjadi, tetapi masih sangat mudah untuk melupakannya dan kemudian menggaruk kepala Anda mengapa Anda mendapat hasil yang salah. Terutama ketika Anda sedang mengerjakan set data besar ketika hasilnya tampak baik-baik saja pada pandangan pertama.

Menggunakan Object.entriesAnda memastikan untuk melewati semua properti:

var arr = [3, 5, 7];
arr.foo = "hello";

for ( var [key, val] of Object.entries( arr ) ) {
   console.log( val );
}

/* Result:

3
5
7
hello

*/

Saya melihat banyak jawaban bagus, tetapi saya memutuskan untuk menggunakan 5 sen hanya untuk mendapatkan contoh yang bagus:

Untuk dalam lingkaran

iterates atas semua alat peraga enumerable

let nodes = document.documentElement.childNodes;

for (var key in nodes) {
  console.log( key );
}

Untuk loop

iterates atas semua nilai iterable

let nodes = document.documentElement.childNodes;

for (var node of nodes) {
  console.log( node.toString() );
}

Ketika saya pertama kali mulai mempelajari for and in loop , saya juga bingung dengan output saya, tetapi dengan beberapa penelitian dan pemahaman Anda dapat memikirkan loop individual seperti berikut: The

1. untuk ... dalam lingkaran mengembalikan indeks properti individu dan tidak memilikidampak pada nilai properti , itu loop dan mengembalikan informasi pada properti dan bukan nilai . Misalnya

let profile = { name : "Naphtali", age : 24, favCar : "Mustang", favDrink : "Baileys" }

Kode di atas hanya membuat objek yang disebut profil , kita akan menggunakannya untuk kedua contoh kita , jadi, jangan bingung ketika Anda melihat objek profil pada contoh, ketahuilah itu dibuat.

Jadi sekarang mari kita gunakan for ... di loop di bawah ini

for(let myIndex in profile){
    console.log(`The index of my object property is ${myIndex}`)
}
 // Outputs : 
        The index of my object property is 0
        The index of my object property is 1
        The index of my object property is 2
        The index of my object property is 3

Sekarang Alasan untuk output adalah bahwa kita memiliki Empat (4) properti di objek profil kita dan pengindeksan seperti yang kita semua tahu mulai dari 0 ... n , jadi, kita mendapatkan indeks properti 0,1,2,3 karena kita bekerja dengan for..in loop.

2. untuk ... dari loop * dapat mengembalikan properti , nilai atau keduanya , Mari kita lihat caranya. Dalam javaScript, kita tidak bisa mengulangi objek secara normal seperti pada array, jadi, ada beberapa elemen yang bisa kita gunakan untuk mengakses salah satu dari pilihan kita dari suatu objek.

   • Object.keys ( objek-nama-berjalan-di sini ) >>> Mengembalikan kunci atau properti suatu objek.

   • Nilai Objek ( object-name-goes-here ) >>> Mengembalikan nilai suatu objek.

   • Object.entries ( objek-nama-goes-sini ) >>> Pengembalian baik yang kunci dan nilai-nilai dari suatu objek.

Di bawah ini adalah contoh penggunaannya, perhatikan Object.entries () :

Step One: Convert the object to get either its key, value, or both.
Step Two: loop through.


// Getting the keys/property

   Step One: let myKeys = ***Object.keys(profile)***
   Step Two: for(let keys of myKeys){
             console.log(`The key of my object property is ${keys}`)
           }

// Getting the values of the property

    Step One: let myValues = ***Object.values(profile)***
    Step Two : for(let values of myValues){
                 console.log(`The value of my object property is ${values}`)
               }

Saat menggunakan Object.entries () memilikinya bahwa Anda memanggil dua entri pada objek, yaitu kunci dan nilai. Anda dapat memanggil keduanya dengan salah satu entri. Contoh Di Bawah Ini.

Step One: Convert the object to entries, using ***Object.entries(object-name)***
Step Two: **Destructure** the ***entries object which carries the keys and values*** 
like so **[keys, values]**, by so doing, you have access to either or both content.


    // Getting the keys/property

       Step One: let myKeysEntry = ***Object.entries(profile)***
       Step Two: for(let [keys, values] of myKeysEntry){
                 console.log(`The key of my object property is ${keys}`)
               }

    // Getting the values of the property

        Step One: let myValuesEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myValuesEntry){
                     console.log(`The value of my object property is ${values}`)
                   }

    // Getting both keys and values

        Step One: let myBothEntry = ***Object.entries(profile)***
        Step Two : for(let [keys, values] of myBothEntry){
                     console.log(`The keys of my object is ${keys} and its value 
is ${values}`)
                   }

Berikan komentar pada bagian bagian yang tidak jelas.

The for-inloop

for-inloop digunakan untuk melintasi properti enumerable dari koleksi, dalam urutan acak . Koleksi adalah objek tipe wadah yang itemnya dapat menggunakan indeks atau kunci.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];
var myString = "123";

console.log( myObject[ 'a' ], myArray[ 1 ], myString[ 2 ] );

for-inloop mengekstraksi properti enumerable ( kunci ) koleksi sekaligus dan beralih satu per satu. Properti enumerable adalah properti koleksi yang dapat muncul dalam for-inloop.

Secara default, semua properti dari Array dan Object muncul dalam for-inloop. Namun, kita bisa menggunakan metode Object.defineProperty untuk mengonfigurasi properti koleksi secara manual.

var myObject = {a: 1, b: 2, c: 3};
var myArray = [1, 2, 3];

Object.defineProperty( myObject, 'd', { value: 4, enumerable: false } );
Object.defineProperty( myArray, 3, { value: 4, enumerable: false } );

for( var i in myObject ){ console.log( 'myObject:i =>', i ); }
for( var i in myArray ){ console.log( 'myArray:i  =>', i ); }

Dalam contoh di atas, properti ddari myObjectdan indeks 3dari myArraytidak muncul dalam for-inlingkaran karena mereka dikonfigurasi dengan enumerable: false.

Ada beberapa masalah dengan for-inloop. Dalam kasus Array, for-inloop juga akan mempertimbangkan methodsmenambahkan pada array menggunakan myArray.someMethod = fsintaks, bagaimanapun, myArray.lengthtetap 4.

The for-ofloop

Ini adalah kesalahpahaman bahwa for-ofloop mengulangi nilai-nilai koleksi. for-ofloop berulang di atas Iterableobjek. Iterable adalah objek yang memiliki metode dengan nama Symbol.iteratorlangsung di atasnya satu-satu prototipe.

Symbol.iteratorMetode harus mengembalikan Iterator . Iterator adalah objek yang memiliki nextmetode. Metode ini ketika dipanggil kembali valuedandone properti.

Ketika kita mengulangi objek iterable menggunakan for-ofloop, Symbol.iteratormetode akan dipanggil setelah mendapatkan objek iterator . Untuk setiap iterasi for-ofloop, nextmetode objek iterator ini akan dipanggil sampai donedikembalikan oleh next()panggilan mengembalikan false. Nilai yang diterima oleh for-ofloop untuk setiap iterasi jika valueproperti dikembalikan oleh next()panggilan.

var myObject = { a: 1, b: 2, c: 3, d: 4 };

// make `myObject` iterable by adding `Symbol.iterator` function directlty on it
myObject[ Symbol.iterator ] = function(){
  console.log( `LOG: called 'Symbol.iterator' method` );
  var _myObject = this; // `this` points to `myObject`
  
  // return an iterator object
  return {
    keys: Object.keys( _myObject ), 
    current: 0,
    next: function() {
      console.log( `LOG: called 'next' method: index ${ this.current }` );
      
      if( this.current === this.keys.length ){
        return { done: true, value: null }; // Here, `value` is ignored by `for-of` loop
      } else {
        return { done: false, value: _myObject[ this.keys[ this.current++ ] ] };
      }
    }
  };
}

// use `for-of` loop on `myObject` iterable
for( let value of myObject ) {
  console.log( 'myObject: value => ', value );
}

The for-ofloop baru dalam ES6 dan begitu adalah Iterable dan Iterables . The Arraytipe konstruktor memilikiSymbol.iterator metode pada prototipe. The Objectkonstruktor sayangnya tidak memilikinya tetapi Object.keys(), Object.values()dan Object.entries()metode mengembalikan iterable ( Anda dapat menggunakan console.dir(obj)untuk memeriksa metode prototipe ). Keuntungan dari for-ofloop adalah bahwa objek apa pun dapat dibuat iterable, bahkan custom Dogdan Animalkelas Anda.

Cara mudah untuk membuat objek dapat diubah adalah dengan mengimplementasikan ES6 Generator alih-alih implementasi kustom iterator.

Tidak seperti for-in, for-ofloop dapat menunggu untuk menyelesaikan tugas async di setiap iterasi. Ini dicapai dengan menggunakan awaitkata kunci setelah dokumentasifor pernyataan .

Satu hal hebat tentang for-ofloop adalah bahwa ia memiliki dukungan Unicode. Menurut spesifikasi ES6, string disimpan dengan pengkodean UTF-16. Karenanya, setiap karakter dapat mengambil salah satu 16-bitatau 32-bit. Secara tradisional, string disimpan dengan pengkodean UCS-2 yang memiliki dukungan untuk karakter yang dapat disimpan 16 bitshanya dalam .

Karenanya, String.lengthmengembalikan jumlah 16-bitblok dalam string. Karakter modern seperti karakter Emoji membutuhkan 32 bit. Karenanya, karakter ini akan mengembalikan length2. for-inloop berulang di atas 16-bitblok dan mengembalikan yang salah index. Namun, for-ofloop berulang atas karakter individu berdasarkan spesifikasi UTF-16.

var emoji = "😊🤣";

console.log( 'emoji.length', emoji.length );

for( var index in emoji ){ console.log( 'for-in: emoji.character', emoji[index] ); }
for( var character of emoji ){ console.log( 'for-of: emoji.character', character ); }

Saya menemukan penjelasan berikut dari https://javascript.info/array sangat membantu:

Salah satu cara tertua untuk menggilir item array adalah for loop over indexes:

let arr = ["Apple", "Orange", "Pear"];

for (let i = 0; i < arr.length; i++) { alert( arr[i] ); } But for arrays there is another form of loop, for..of:

let fruits = ["Apple", "Orange", "Plum"];

// iterates over array elements for (let fruit of fruits) { alert( fruit ); } The for..of doesn’t give access to the number of the current element, just its value, but in most cases that’s enough. And it’s shorter.

Secara teknis, karena array adalah objek, juga dimungkinkan untuk digunakan untuk..in:

let arr = ["Apple", "Orange", "Pear"];

for (let key in arr) { alert( arr[key] ); // Apple, Orange, Pear } But that’s actually a bad idea. There are potential problems with it:

Pengulangan for..in mengulangi semua properti, tidak hanya yang numerik.

Ada yang disebut "array-like" objek di browser dan di lingkungan lain, yang terlihat seperti array. Yaitu, mereka memiliki properti panjang dan indeks, tetapi mereka mungkin juga memiliki properti dan metode non-numerik lainnya, yang biasanya tidak kita butuhkan. Loop for..in akan menampilkannya. Jadi jika kita perlu bekerja dengan objek mirip array, maka properti "ekstra" ini bisa menjadi masalah.

Loop for..in dioptimalkan untuk objek generik, bukan array, dan karenanya 10-100 kali lebih lambat. Tentu saja, masih sangat cepat. Speedup mungkin hanya penting dalam kemacetan. Tapi tetap saja kita harus mewaspadai perbedaannya.

Secara umum, kita seharusnya tidak menggunakan for..in untuk array.

Berikut adalah mnemonik yang berguna untuk mengingat perbedaan antara for...inLoop dan for...ofLoop.

"indeks, objek dari"

for...in Loop=> mengulangi indeks dalam array.

for...of Loop=> iterates atas objek objek.