for... inDöngünün ne olduğunu biliyorum (anahtar üzerinden yinelenir), ancak ilk kez duydumfor... of (değer üzerinde yineleme) .

for... ofDöngü ile kafam karıştı . Ben itiraz etmedim. Bu aşağıdaki kod:

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"
}

Ne var, for... ofözellik değerleri üzerinden yineliyor. Öyleyse neden (getiri) kütüğe "3", "5", "7", "hello"yerine "3", "5", "7"? ancak for... indöngü her tuşun ( "0", "1", "2", "foo") üzerinde yinelenir . Burada for... indöngü de fooanahtar üzerinden yinelenir . Ancak mülkün for... ofdeğeri üzerinden yineleme yapmaz . Neden böyle?foo"hello"

Kısaca uzun hikaye:

Burada for... ofdöngü konsol . Giriş yapmalı "3", "5", "7","hello"ama burada günlük tutuyor "3", "5", "7". Neden ?

Örnek Bağlantı

for in bir nesnenin numaralandırılabilir özellik adları üzerinde döngüler.

for of(ES6'da yeni) nesneye özgü bir yineleyici kullanır ve bunun tarafından üretilen değerlerin üzerinden geçer.

Örneğinizde , dizi yineleyicisi dizideki tüm değerleri verir (dizin olmayan özellikleri yok sayarak).

Tam bir cevap bulabiliyorum: https://www.typescriptlang.org/docs/handbook/iterators-and-generators.html (Tür komut dosyası için olmasına rağmen, bu javascript için de aynıdır)

Hem for..ofve for..inifadeler listeler üzerinde yinelenir; yinelenen değerler farklı olsa for..inda yinelenen nesne üzerindeki anahtarların bir listesini döndürürfor..of sayısal özelliklerinin değerlerinin listesini döndürür.

İşte bu ayrımı gösteren bir örnek:

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"
}

Başka bir ayrım, herhangi bir nesne üzerinde çalıştığı için; bu nesne üzerindeki özellikleri incelemek için bir yol olarak hizmet eder. for..ofÖte yandan, esas olarak tekrarlanabilir nesnelerin değerleri ile ilgilenmektedir. implement Symbol.iteratorSaklanan değerlere erişime izin veren Harita ve Ayarla özelliği gibi yerleşik nesneler .

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"
}

Döngü için ...

İçin ... lütfen döngü sayma mantığı ve çıkış koşulu ortadan kaldırarak döngü zayıf yönlerine bağlı geliştirir.

Misal:

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

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

Ancak, yine de dizinin değerlerine erişmek için bir dizin kullanma sorunu ile uğraşmak zorundasınız ve bu kokuyor; neredeyse öncekinden daha kafa karıştırıcı hale getiriyor.

Ayrıca, bir diziye (veya başka bir nesneye) fazladan bir yöntem eklemeniz gerektiğinde for ... in döngüsü sizi büyük sorunlara sokabilir. Çünkü ... için döngüler tüm numaralandırılabilir özellikler üzerinde döngü yapar, bu, dizinin prototipine herhangi bir ek özellik eklerseniz, bu özellikler döngüde de görünecektir.

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

Baskılar:

0

1

2

3

4

5

6

7

8

9

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

Bu nedenle ... diziler üzerinde döngü yaparken döngülerde önerilmez.

Not : forEach döngü JavaScript başka bir for döngüsü türüdür. Ancak, forEach()aslında bir dizi yöntemidir, bu yüzden sadece dizilerle kullanılabilir. Ayrıca bir forEach döngüsünü durdurmanın veya kırmanın bir yolu yoktur. Döngünüzde bu tür bir davranışa ihtiyacınız varsa, döngü için bir temel kullanmanız gerekir.

Döngü için ...

Türk pazarına ... döngü iterable olduğu her veri türü üzerinde döngü için kullanılır.

Misal:

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

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

Baskılar:

0

1

2

3

4

5

6

7

8

9

Bu, for ... döngüsünü tüm for döngülerinin en özlü sürümü yapar.

Ama bekleyin, dahası var! For ... of loop ayrıca for için ve için ... zayıflıklarını gideren bazı ek faydalara da sahiptir.

İstediğiniz zaman bir for ... döngüsünü durdurabilir veya ...

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

Baskılar:

1

3

5

7

9

Ayrıca, nesnelere yeni özellikler ekleme konusunda endişelenmenize gerek yok. For ... of loop yalnızca nesnedeki değerler üzerinde döngü yapar.

Fark for..invefor..of :

Her ikisi de for..inve for..ofveri yapıları üzerinde yineleme yapmak için kullanılan döngü yapılarıdır. Tek fark, tekrar ettikleri şeydir:

1. for..inbir nesnenin tüm numaralandırılabilir özellik anahtarları üzerinde yineleme yapar
2. for..ofyinelenebilir bir nesnenin değerleri üzerinden yinelenir . Yinelenebilir nesnelere örnek olarak diziler, dizeler ve Düğüm Listeleri verilebilir.

Misal:

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

Bu örnekte, for..indöngünün bu örnekte bir dizi nesnesi olan nesnenin anahtarları üzerinde yinelendiğini gözlemleyebiliriz . Anahtarlar, eklediğimiz dizi öğelerine karşılık gelen 0, 1, 2'dir ve addedProp. Bu nasıl arrdizi nesne krom DevTools'un arar:

for..inDöngünümüzün bu değerler üzerinde yinelemekten başka bir şey yapmadığını görürsünüz .

for..ofÖrneğimizde döngü üzerinde dolaşır değerleri bir veri yapısı. Bu özel örnekteki değerler şunlardır 'el1', 'el2', 'el3'. Yinelenebilir bir veri yapısının kullanarak döndüreceği değerler for..ofyinelenebilir nesnenin türüne bağlıdır. Örneğin, bir dizi tüm dizi öğelerinin değerlerini döndürürken bir dize dizenin her karakterini döndürür.

for...inİfadesi keyfi sırayla, bir nesnenin enumerable özelliklerini üzerinde dolaşır. Numaralandırılabilir özellikler, dahili [[Numaralandırılabilir]] bayrağı true olarak ayarlanmış olan özelliklerdir, bu nedenle prototip zincirinde numaralandırılabilir bir özellik varsa,for...in döngü bunlarda da yinelenir.

for...ofİfadesi iterable nesne tanımlar iterated edilecek verilerin üzerinde dolaşır.

Misal:

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
}

Daha önce olduğu gibi, eklemekte atlayabilirsiniz hasOwnPropertyiçinde for...ofdöngüler.

For-in deyimi, bir nesnenin numaralandırılabilir özellikleri üzerinde rasgele sırada yinelenir.

Döngü, nesnenin kendisinin tüm numaralandırılabilir özellikleri üzerinde yinelenir ve nesne yapıcısının prototipinden miras alır

Bunu temel olarak yinelediği ve "tüm anahtarları listelediği" için "olarak düşünebilirsiniz.

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

Bunlar üzerinde kolayca yineleme yapmamızı sağlayan bazı tanımlanmış veri türleri vardır, örneğin Dizi, Harita, Dizgi Nesneleri

Normal de için yineleyici üzerinde dolaşır ve tepki olarak örneğin aşağıda gösterildiği gibi yerleştirme sırasına göre şöyledir tuşları ile bize sağlar.

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

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

Şimdi için ile denerseniz , o zaman cevap olarak bize anahtarları değil değerleri sağlar. Örneğin

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

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

Bu nedenle, her iki yineleyiciye de baktığımızda, her ikisi arasındaki farkı kolayca ayırt edebiliriz.

Not: - ait İçin sadece Symbol.iterator ile çalışır

Normal nesne üzerinde yinelemeye çalışırsak, bu bize bir hata verir.

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

Oda tekrarlanabilir değil

Şimdi yinelemek için bir ES6 Symbol.iterator tanımlamamız gerekiyor.

  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

Bu, For in ve For of arasındaki farktır . Umarım farkı temizler.

Daha önce kimsenin bahsetmediği iki döngü arasındaki başka bir fark :

Yıkıcı for...inkullanımdan kaldırıldı. for...ofBunun yerine kullanın .

Kaynak

Kullandığımız istiyorsak strüktür hem olsun, bir döngü içinde endeks ve değerini her dizi elemanı, kullanılacak en gerektiği for...ofile döngü Dizisi yöntemiyle entries():

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

Herkes bu sorunun neden oluştuğunu açıkladı, ancak bunu unutmak ve neden yanlış sonuçlar aldığınızı başınızı çizmek hala çok kolay. Özellikle sonuçlar ilk bakışta iyi görünüyorsa büyük veri kümeleri üzerinde çalışırken.

Object.entriesTüm özellikleri kullanmanız için şunları kullanın:

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

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

/* Result:

3
5
7
hello

*/

Bir sürü iyi cevap görüyorum, ancak 5 sentimi sadece iyi bir örneğe koymaya karar verdim:

Döngü için

tüm numaralandırılabilir sahne üzerinde tekrarlar

let nodes = document.documentElement.childNodes;

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

Döngü için

tüm yinelenebilir değerler üzerinde yineleme yapar

let nodes = document.documentElement.childNodes;

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

For ve in loop'u ilk kez öğrenmeye başladığımda , çıktımla da şaşırdım, ancak birkaç araştırma ve anlayışla bireysel döngüyü aşağıdaki gibi düşünebilirsiniz:

1. için ... lütfen döngü döner endeksler bireysel mülkiyet ve sahip hiçbir etkisi üzerindeki etkisinin tesisin değeri , bu döngüler ve üzerinde döner bilgi mülkiyet değil, değer . Örneğin

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

Yukarıdaki kod sadece profile adlı bir nesne oluşturuyor , onu her iki örneğimiz için de kullanacağız , bu nedenle, bir örnekte profil nesnesini gördüğünüzde karıştırmayın , sadece oluşturulduğunu bilin.

Şimdi for ... in aşağıdaki döngüyü kullanalım

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

Şimdi çıkış nedeni sahip olduğumuz varlık Dört (4) bizim özelliklerini profil nesne ve endeksleme Hepimizin bildiği başlar itibaren 0 ... n böylece biz özelliklerinin dizini almak 0,1,2,3 biz beri for..in döngüsü ile çalışma .

2. for * of loop * özelliği , değeri veya her ikisini birden döndürebilir , nasıl olduğunu bir göz atalım. JavaScript'te, dizilerdeki gibi normal olarak nesneler arasında geçiş yapamayız, bu nedenle, seçimlerimizden birine bir nesneden erişmek için kullanabileceğimiz birkaç öğe vardır.

   • Object.keys ( object-name-here-here ) >>> Bir nesnenin anahtarlarını veya özelliklerini döndürür .

   • Object.values ( object-name-here-here ) >>> Bir nesnenin değerlerini döndürür .

   • Object.entries ( nesne adı-gider-burada ) döndürür >>> hem anahtarlar ve değerler bir nesnenin.

Aşağıda kullanım örnekleri verilmiştir, Object.entries () öğesine dikkat edin :

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

Object.entries () kullanırken , nesne üzerinde iki girdi, yani anahtarlar ve değerler çağırıyorsunuz . Her ikisini de girişlerden biriyle arayabilirsiniz. Aşağıdaki örnek.

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

Net olmayan kısımlar hakkında yorum yapın.

for-indöngü

for-indöngü, bir koleksiyonun numaralandırılabilir özellikleri arasında rasgele bir sırada geçiş yapmak için kullanılır . Koleksiyon, öğeleri bir dizin veya anahtar kullanarak kullanılabilen bir kapsayıcı türü nesnesidir.

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 , bir koleksiyonun numaralandırılabilir özelliklerini ( anahtarlarını ) bir kerede çıkarır ve her seferinde tek tek yineler. Bir numaralandırılabilir özellik, for-indöngü içinde görünebilen bir koleksiyonun özelliğidir .

Varsayılan olarak, bir Dizi ve Nesnenin tüm özellikleri for-indöngüde görünür . Ancak, bir koleksiyonun özelliklerini el ile yapılandırmak için Object.defineProperty yöntemini kullanabiliriz .

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

Yukarıdaki örnekte, mülkiyet dait myObjectve dizin 3arasındamyArray görünmüyor for-inonlar ile yapılandırılması nedeniyle döngüenumerable: false .

for-inDöngülerle ilgili birkaç sorun vardır . Diziler söz konusu olduğunda, for-indöngü sözdizimini methodskullanarak diziye de eklenir.myArray.someMethod = fmyArray.length kalır4 .

for-ofdöngü

for-ofBir koleksiyonun değerleri üzerinde döngü yineleyen bir yanlış anlamadır . for-ofdöngü birIterable nesnenin . Bir yinelenebilir, Symbol.iteratordoğrudan prototiplerinden birinde adıyla yöntemi olan bir nesnedir .

Symbol.iteratoryöntemi bir Yineleyici döndürmelidir . Yineleyici,next yöntemi . Dönüş valueve doneözellikler olarak adlandırıldığında bu yöntem .

Döngü kullanarak yinelenebilir bir nesneyi yinelediğimizde , yöntem bir kez yineleyici nesnesi olsun çağrılır . Her döngü yinelemesi için , çağrı tarafından döndürülene kadar bu yineleyici nesnesinin yöntemi false döndürülür . Özellik çağrı tarafından döndürülürse , her yineleme için döngü tarafından alınan değer .for-ofSymbol.iteratorfor-ofnextdonenext()for-ofvaluenext()

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

for-ofDöngü ES6 yeni ve böylece vardır iterable ve Iterables . ArrayYapıcı tipi vardır Symbol.iteratoronun prototip üzerinde yöntemini. ObjectYapıcı ne yazık bunu yok ama Object.keys(), Object.values()ve Object.entries()yöntemleri (bir iterable dönmek kullanabileceğiniz console.dir(obj)prototip yöntemleri kontrol etmek ). for-ofDöngünün yararı, herhangi bir nesnenin, özel DogveAnimal sınıflarınızda .

Bir nesneyi yinelenebilir hale getirmenin kolay yolu ES6 Jeneratörü uygulamaktır , özel yineleyici uygulaması yerine uygulamaktır.

Döngü aksine for-in, for-ofdöngü her yinelemede zaman uyumsuz bir görevin tamamlanmasını bekleyebilir. Bu, ifade awaitsonrası belgeler kullanılarak anahtar kelime kullanılarak gerçekleştirilir .for

for-ofDöngü ile ilgili bir başka harika şey de Unicode desteğine sahip olmasıdır. ES6 spesifikasyonlarına göre, dizeler UTF-16 kodlaması ile saklanır. Bu nedenle, her karakter ya 16-bitda alabilir 32-bit. Geleneksel olarak, dizeler 16 bitssadece içinde saklanabilen karakterleri destekleyen UCS-2 kodlamasıyla saklanırdı .

Bu nedenle, bir dizedeki blok String.lengthsayısını döndürür 16-bit. Emoji karakteri gibi modern karakterler 32 bit alır. Bu nedenle, bu karakter length2. for-indöngü 16-bitdöndürür bloklar üzerinde yinelenir ve yanlış döndürür index. Ancak, for-ofdöngü UTF-16 spesifikasyonlarına göre tek tek karakter üzerinde yinelenir.

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

Https://javascript.info/array adresinden aşağıdaki açıklamayı çok yararlı buldum :

Dizi öğelerini döngüye almanın en eski yollarından biri for döngüsü üzerinden dizinleridir:

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.

Teknik olarak, diziler nesne olduğundan, aşağıdakiler için de kullanılabilir:

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:

..İn döngüsü yalnızca sayısal özellikleri değil tüm özellikleri yineler.

Tarayıcıda ve diğer ortamlarda dizilere benzeyen “dizi benzeri” nesneler vardır. Yani, uzunluk ve dizin özelliklerine sahiptirler, ancak genellikle ihtiyacımız olmayan diğer sayısal olmayan özelliklere ve yöntemlere de sahip olabilirler. For..in döngüsü onları listeleyecektir. Dolayısıyla, dizi benzeri nesnelerle çalışmamız gerekirse, bu “ekstra” özellikler bir sorun haline gelebilir.

For..in döngüsü, diziler için değil, genel nesneler için optimize edilmiştir ve bu nedenle 10-100 kat daha yavaştır. Tabii ki, hala çok hızlı. Hızlandırma sadece darboğazlarda önemli olabilir. Ama yine de farkın farkında olmalıyız.

Genellikle, diziler için ... in kullanmamalıyız.

for...inDöngü ve for...ofDöngü arasındaki farkı hatırlamak için kullanışlı bir anımsatıcı .

"dizin girişi, nesnesi"

for...in Loop=> dizideki dizin üzerinden yinelenir .

for...of Loop=> nesnelerin nesnesi üzerinde yineleme yapar .