javaScript for..in ve for..of Döngü

for..in ifadesi için, bir nesnenin özelliklerini / niteliklerini (yalnızca sayılabilir özellikleri) rasgele bir sırada iterable(yineleme) yapar.

Sözdizimi :

for (var in object) {

    // Kodları buraya yaz
}

var : Gereklidir. Bir nesnenin özellikleri üzerinde yinelenen bir değişken

object : Gereklidir. Yinelenecek belirtilen nesne

for..in döngüsü rasgele bir sırada bir nesnenin özelliklerini yineler.

const obj = {
  a: 1,
  b: 2,
  c: 3,
  d: 4
}

for (const key in obj) {

  console.log( obj[key] )
}
// 1
// 2
// 3
// 4

Numaralandırılabilir bir özellik Enumerable, true değeri olan bir nesnenin bir özelliği olarak tanımlanır . Aslında, enumerable özellik, varsa, sayılabilir'dir.

Her nesnenin bir propertyIsEnumerable yöntemi vardır. Bu yöntem, bir nesnede belirtilen özelliğin for..in, prototip zinciri boyunca miras alınan özellikler haricinde bir döngü tarafından sıralanıp, sıralanamayacağını belirler . Nesne belirtilen özelliğe sahip değilse, bu yöntem geri döner false.

ÖRNEK : Aşağıdaki örnek, propertyIsEnumerable nesneler ve diziler üzerinde kullanımını gösterir :

var o = {};
 
var a = [];
 
o.prop = 'is enumerable';
 
a[0] = 'is enumerable';
 
console.log(o.propertyIsEnumerable('prop'));// returns true
 
console.log(a.propertyIsEnumerable(0));// returns true

for..in Döngü enumerable özellikleri olduğu gibi, hem kalıtsal özelliklerin üzerindede yineleme olacaktır. for..in Yinelemeyi keyfi sırayla gerçekleştirir. Bu nedenle, özel bir sıralama sonuç gerçekleşmesi gerekiyorsa kullanılmamalıdır.

for..in ve Diziler

Dizilerde nesnedir.

var x =[];

console.log(typeof x); //object

Diziler nesne olduğu için for..in döngü kullanılır.

const meyve = ['Elma', 'Muz', 'Kiraz'];

for (let i in meyve) {  

  console.log(meyve[i])
}
// Elma
// Muz
// Kiraz

for..in ve string (Metinler)

Metinlerde her karakterin bir dizini olduğu, for..in döngüsünü Metinlerde bile kullanabiliriz.

const string = 'merhaba';

for (let char in string) {  

    console.log(string[char]);
}
// m 
// e 
// r 
// h 
// a
// b
// a

for..of Döngü

ES6, geleneksel bir döngüden daha basit olan bir döngü olan yeni bir döngü yöntemi sunar ve her tür için ve giriş döngülerinin eksikliklerini telafi eder.

for..of Deyimi, yinelenen nesneler üzerinde yinelemek için bir döngü oluşturur. ES6'da tanıtılan for..of döngü , yeni yinelemeli protokollerin yerini alır for..in ve forEach() destekler. for..of Array (Diziler), String (Metinler), Map (Haritalar), Set (Kümeler), Array benzeri nesneler (örneğin arguments veya NodeList), ve diğer yinelenen veri yapıları arasında yineleme yapmanızı sağlar.

for (var of iterable) {
    //Kodlar buraya
}

Var: Her yinelemenin öznitelik değeri bu değişkene atanır.

İterable: Sayısız özelliği olan ve yinelenebilen bir nesne.

var array = ['a','b','c','d'];

for (var i of array) {

  console.log(i);
}
// a
// b
// c
// d

Ayrıca, Unicode karakter kümesi string'leri bir dize olarak ele alarak çalışır:

var dizi = ["🐬", "🦋", "🐥", "🦆"];

for (var chr of dizi) {

  console.log(chr);
}
// 🐬
// 🦋
// 🐥
// 🦆

For..in ve for..of arasında fark

var dizi = ["Kayısı","Kiraz", "Muz"];

for (var i in dizi) {

  console.log(i);
}
// 0
// 1
// 2

for (var i of dizi) {

  console.log(i);
}
// Kayısı
// Kiraz
// Muz

Yukarıda ki örnekte görüldüğü üzere for..in key (anahtarları) sıralarken for..of döngü value(değerleri) sıralar.

froeach döngülerde break, continue ifadeleri çalışmazken for..of döngü yürütme sonlandırma dört bilinen yöntemler kulanılabilmekte: break, continue, return ve throw özelliklerini kullanabilirsiniz.

for..of Döngüler, sadece tekrarlamalar için geçerlidir. Sıradan nesneleri yinelenemez.

var obj = {
           a: 1,
           b: 2,
           c: 3 
          };
for(var i of obj) {

  console.log(i);// error
}

Semboller, ES6'da tanıtılan yeni ilkel tiptir. Semboller tamamen benzersiz tanımlayıcılardır. JavaScript dilinin yedinci veri türüdür. Undefined, Null, Boolean, String, Number ve Nesne İlk altı ilkel veri Türüdür. Sembol türüne ait herhangi bir özellik adı benzersizdir ve diğer özellik isimleriyle çakışmazlık garanti edilebilir. JavaScript'in dahili olarak kullandığı birçok "sistem" sembolü var ve bunları nesnelerimizin çeşitli yönlerine ince ayar yapmak için kullanabiliriz.Symbol.iterator Nesnelerin üzerine tekrarlanmasını sağlayan özel bir yöntem atamak için kullanılan iyi bilinen bir sembol özelliğidir.

const iterable1 = new Object();

iterable1[Symbol.iterator] = function* () {
  yield 1;
  yield 2;
  yield 3;
};

console.log([...iterable1]);
// expected output: Array [1, 2, 3]

Bazı kullanım durumlarını inceleyelim.

Array (Dizi)

Array nesne gibi görünen basit bir listedir. Dizi prototipleri, geçişi gibi işlemler üzerinde gerçekleştirilmesine izin veren çeşitli yöntemler vardır. Aşağıdaki örnek for..of döngü bir dizi çapraz geçiş yapmak için kullanır:

let iterable = [10, 20, 30];

for (const value of iterable) {

  console.log(value);
}
// 10
// 20
// 30

Veriler dinamik olması için let kullanabilirsiniz.

let iterable = [40, 50, 60];

for (let value of iterable) {

  value += 1;

  console.log(value);
}
// 41
// 51
// 61

String (Metinler)

String, verileri metin olarak saklamak için kullanılır.

const iterable = 'javascript';
 
for (const value of iterable) {

  console.log(value);
}
 
// Output:
// "j"
// "a"
// "v"
// "a"
// "s"
// "c"
// "r"
// "i"
// "p"
// "t"

Burada, iterasyon bir dizide gerçekleştirilir ve her dizindeki karakter yazdırılır.

Map(haritalar)

Harita nesnesi, bir anahtar-değer çifti tutar. Nesneler ve ilkel değerler bir anahtar veya değer olarak kullanılabilir. Map nesnesi, nasıl yerleştirildiğine bağlı olarak öğeler arasında yinelenir. Diğer bir deyişle, for..of her yinelemede bir dizi anahtar - değer çiftini döndürür.

let iterable = new Map([['a', 1], ['b', 2], ['c', 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ['a', 1]
// ['b', 2]
// ['c', 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Set (Kümeler)

Set nesnesi, ilkel değerler veya nesneler olabilecek her türden benzersiz değerleri depolamanıza izin verir. Set nesneleri sadece değer koleksiyonlarıdır. Küme öğesinin yinelemesi ekleme sırasını temel alır ve her değer yalnızca bir kez oluşabilir. Sırayla, aynı öğeye birden çok kez sahip bir set oluşturursanız, hala tek bir öğe olarak kabul edilir.

let iterable = new Set([1, 1, 2, 2, 1, 3]);

for (let value of iterable) {

  console.log(value);
}
// 1
// 2
// 3

Arguments Object

Bir argümanın nesnesini basitçe bir fonksiyona aktarılan argümanlara karşılık gelen Array benzeri bir nesne olarak düşünün.

function args() {

  for (const arg of arguments) {

    console.log(arg);
  }
}

args('a', 'b', 'c');

// Output:
// a
// b
// c

Generators(jeneratörler)

Jeneratörler, çıkıp daha sonra yeniden girebilen fonksiyonlardır.

function* generator(){ 
  yield 1; 
  yield 2; 
  yield 3; 
}; 

for (const g of generator()) { 
  console.log(g); 
}

// Output:
// 1
// 2
// 3

DOM collection

for..of döngüsünün en önemli özelliği NodeList gibi DOM koleksiyonları üzerinde yineleme: