Kontrol akışı

Kontrol akışı, JavaScript yorumlayıcısının yürütülme sırasıdır açıklamalarına dikkat edin. Bir komut dosyası akışını değiştiren ifadeler içermiyorsa her defasında bir satır olacak şekilde baştan sona uygulanır. Kontrol yapıları bir ifade grubuna bağlı olarak yürütülüp yürütülmeyeceğini bir dizi ifadeyi tekrar tekrar yürütmeye veya bir ifadeyi kesintiye uğratmaya ifade dizisidir.

Koşullu ifadeler

Koşullu ifadeler, kodun tek bir koşula bağlı olarak mı yürütüleceğini daha fazla koşul sunabilir. Koşullu ifade, ilişkilendirilen koşul (veya koşullar kümesi) true olarak değerlendirilir. Aksi halde, kod atlanır.

if…else

if ifadesi, eşleşen parantez içindeki bir koşulu değerlendirir. takip etmek istiyorum. Parantez içindeki koşul true olarak değerlendiriliyorsa ifade veya engelleme ifadesi sonra eşleşen parantez yürütülür:

if ( true ) console.log( "True." );
> "True."

if ( true ) {
    const myString = "True.";
    console.log( myString );
}
> "True."

Parantez içindeki koşul false olarak değerlendiriliyorsa aşağıdakinden sonra yok sayılır:

if ( false ) console.log( "True." );

if ifadesinden hemen sonra gelen else anahtar kelimesi ve koşullu olarak yürütülen deyim, if koşulu false olarak değerlendirilir:

if ( false ) console.log( "True." )''
else console.log( "False" );
> "False."

Birden fazla if ifadesini birbirine bağlamak için else diğer if ifadesinden sonra koşullu olarak yürütülen ifade:

const myCondition = 2;
if ( myCondition === 5 ) console.log( "Five." );
else if ( myCondition === 2 ) console.log( "Two." );

Koşulları şu şekilde kullanmanızı öneririz: okunabilirliği artırır ancak else if ifadeleri genellikle bunun için bir istisnadır:

if ( myCondition === 5 ) {
    console.log( "Five." );
} else if ( myCondition === 3 ) {
    console.log( "Three" );
} else {
    console.log( "Neither five nor three." );
}
> "Neither five nor three."

Üçlü operatör

if, bir ifadeyi koşullu olarak yürütür. Üçlü operatör (daha doğru daha az yaygın olarak üçlü koşullu operatör olarak adlandırılır) işlevini koşullu olarak yürütür. Adından da anlaşılacağı gibi üçlü operatör, üç işleneni kullanan tek JavaScript operatörüdür:

• Değerlendirilecek koşul ve ardından soru işareti (?).
• Koşul true ve ardından bir değer olarak değerlendirilirse yürütülecek ifade iki nokta üst üste (:).
• Koşul false olarak değerlendirilirse yürütülecek ifade.

Bu, genellikle bir değeri koşullu olarak ayarlamak veya iletmek için kullanılır:

const myFirstResult  = true  ? "First value." : "Second value.";
const mySecondResult = false ? "First value." : "Second value.";

myFirstResult;
> "First value."

mySecondResult;
> "Second value."

switch…case

Bir ifadenin değeriniswitch bir veya daha fazla case anahtar kelime kullanılarak tanımlanan potansiyel değerleri gösterir. Bu söz dizimi JavaScript'in en eski tasarım kararlarından bazılarında olduğu için olağan dışıdır. switch...case söz dizimi, switch anahtar kelimesini ve ardından bir ifade kullanır. parantez içine alınmış olarak değerlendirilir ve ardından eşleşen bir çift küme parantezi gelir. switch öğesinin gövdesinde case anahtar kelime bulunabilir. Bu anahtar kelimeler genellikle bir veya daha fazla olabilir. Ardından bir ifade veya değer ve ardından iki nokta işareti (:) gelir.

Yorumlayıcı, sunulan ifadeyle eşleşen bir değere sahip bir case değerine ulaştığında, switch anahtar kelimesinden sonra parantez içinde değerlendirildiğinde, şu case deyimine uyan ifadeler:

switch ( 2 + 2 === 4 ) {
  case false:
    console.log( "False." );
  case true:
    console.log( "True." );
}
> "True."

Eşleşen case öğesini izleyen tüm ifadeler, blok ifadesi içinde yer alır.

switch ( 2 + 2 === 4 ) {
    case false:
    console.log( "False." );
  case true:
    let myVariable = "True.";
    console.log( myVariable );

}
> "True."

switch…case kullanmanın olumsuz yanlarından biri, bir eşleşme bulduktan sonra JavaScript yorumlayıcısı, eşleşen case ifadesinden sonra gelen herhangi bir ifadeyi yürütür, hatta diğer case yan tümcelerinde bulunanlar da dahil. Buna "arada kalma” adı verilir değerini sonraki case:

switch ( 2 + 2 === 7 ) {
    case false:
    console.log( "False." );
  case true:
    console.log( "True." );
}
> "False."
> "True."

Çakışmayı önlemek için her bir yazışmayı break anahtar kelimesiyle sonlandırın. switch gövdesinin değerlendirilmesini hemen durdurur:

switch ( 2 + 2 === 7 ) {
    case false:
    console.log( "False." );
    break;
  case true:
    console.log( "True." );
    break;
}
> "False."

Koşullu değerle eşleşen bir case yoksa switch, default değerini seçer ifadesini ekleyin:

switch ( 20 ) {
    case 5:
    console.log( "The value was five." );
    break;
  case 10:
    console.log( "The value was ten." );
    break;
  default:
    console.log( "The value was something unexpected." );
}
> "The value was something unexpected."

Ancak düşüş, default için de geçerlidir ve potansiyel olarak beklenmedik sonuçlar. Bunu düzeltmek için default ifadesini break ile sonlandırın, veya destek kaydı listesinin sonuna ekleyin.

switch ( 20 ) {
  default:
    console.log( "The value was something unexpected." );
  case 10:
    console.log( "The value was ten." );
    break;
  case 5:
    console.log( "The value was five." );
    break;
}
> The value was something unexpected.
> The value was ten.

Çünkü case deyimleri bir Gruplandırma için engelleme ifadesi birden çok ifade, case ve default ifadeleri oluşturulmaz kelimeli kapsam:

let myVariable;
switch ( true ) {
  case true:
    let myVariable = "True.";
    break;
  default:
    let myVariable = "False.";
    break;
}
> Uncaught SyntaxError: redeclaration of let myVariable

Kapsamı yönetmek için blok ifadeleri kullanın:

let myVariable;
switch ( true ) {
  case true: {
    let myVariable = "True.";
    break;
  }
  default: {
    let myVariable = "False.";
    break;
  }
}

Döngüler ve yineleme

Döngüler, bir ifade grubunu bir koşul karşılandığı sürece tekrarlamanıza olanak tanır. devam ettirebilirsiniz. Düzeltilmiş bir dizi talimatı uygulamak için belirli bir sonuca ulaşılıncaya ya da çevirmen, bir veya daha fazla yinelenebilir bir veri yapısının (örneğin, dizi, harita veya küme, bir nesnenin nihai özelliği veya bir dize).

Döngüler "yukarıdan aşağıya" işlemini kesintiye uğratır yineleme yoluyla komut dosyasının yürütme akışı bir veya daha fazla koşul karşılanana ya da artık geçerli olmayana kadar bir ifade grubu üzerinde karşılandığından emin olun. Döngü sona erdikten sonra sonraki ifadelere de devam eder. Aşağıdaki örnekte, döngünün gövdesindeki ifadeler, çevirmen devam eder:

let iterationCount = 0;
console.log( "Pre-loop." );
while( iterationCount < 3 ) {
  iterationCount++;
  console.log( "Loop iteration." );
}
console.log( "Continuing on." );
> "Pre-loop."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Continuing on."

Döngü yürütülürken koşullar karşılanmazsa döngü devam eder koruyabilmelidir. Bu sonsuz döngüler, programlama sürecinde ana yürütme ileti dizisine neden olur. sonsuza kadar duraklatabilir veya hatta tarayıcı sekmelerinin kilitlenmesini sağlayabilirsiniz.

Aşağıdaki örnek, true Boole değeri kaldığı sürece yürütülür true Boole değerleri sabit olduğundan, sonsuz bir döngü oluşturur.

console.log( "Pre-loop." );
while( true ) {
console.log( "Loop iteration." );
}
> "Pre-loop."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
> "Loop iteration."
…

Üretim kodunuzda sonsuz döngüler bırakmaktan kaçının. Yanlışlıkla bir diğeri ise geliştirme sırasında, çalıştırdığı tarayıcı sekmesini kapatarak kodunu ekleyerek döngünün artık sonsuz olmamasını sağlayabilir ve sayfasını ziyaret edin.

while

while anahtar kelimesi ve ardındanwhile değerlendirilecek bir koşul içeren eşleştirilmiş parantezler. Belirtilen koşul başlangıçta true, ifade (veya blok ifadesi) bu parantezler yürütüldüğünden emin olun. Aksi takdirde döngü hiçbir zaman çalışmaz. Her koşul yeniden değerlendirilir. Hâlâ true ise döngü tekrarlanır.

let iterationCount = 0;
while( iterationCount < 3 ) {
  iterationCount++;
  console.log( `Loop ${ iterationCount }.` );
}
> "Loop 1."
> "Loop 2."

Çevirmen, while döngüsünde bir continue ifadesi bulursa durumu yeniden değerlendirir ve mümkünse döngüyü sürdürür:

let iterationCount = 0;
while( iterationCount <= 5 ) {
  iterationCount++;
  if( iterationCount === 3 ) {
    continue;
  }
  console.log( `Loop ${ iterationCount }.` );
}
console.log( "Loop ended." );
> "Loop 1."
> "Loop 2."
> "Loop 4."
> "Loop 5."
> "Loop ended."

Çevirmen, while döngüsünde bir break ifadesi bulursa o yineleme durdurulur ve koşul yeniden değerlendirilmez. Bu durumda çevirmen konuşmaya devam eder:

let iterationCount = 1;
while( iterationCount <= 5 ) {
  if( iterationCount === 3 ) {
    console.log(`Iteration skipped.``);`
    break;
  }
  console.log( `Loop ${ iterationCount }.` );
  iterationCount++;
}
console.log( "Loop ended." );
> "Loop 1."
> "Loop 2."
> "Iteration skipped.
> "Loop ended."

Şurada görüldüğü gibi belirli sayıda yineleme yapmak için while kullanabilirsiniz: ama while için en yaygın kullanım alanı belirsiz uzunluk:

let randomize = () => Math.floor( Math.random() * 10 );
let randomNum = randomize();
while( randomNum !== 3 ){
  console.log( `The number is not ${ randomNum }.` );
  randomNum = randomize();
}
console.log( `The correct number, ${ randomNum }, was found.` );
> "The number is not 0."
> "The number is not 6."
> "The number is not 1."
> "The number is not 8."
> "The correct number, 3, was found."

do…while

do...while, koşullu koşulların içinde yer aldığı while döngüsünün bir varyantıdır. değer, döngünün her yinelemesinin sonunda gerçekleşir. Bu, döngü gövdesi, her zaman en az bir kez yürütülür.

do...while döngüsü oluşturmak için do anahtar kelimesini ve ardından şu ifadeyi kullanın: (veya engelleme ifadesi) yerine her yinelemede yürütülür. Bu ifadeden hemen sonra while ve değerlendirilecek koşulu içeren eşleşen parantezler. Zaman bu koşul artık true olarak değerlendirilmez, döngü sona erer.

let iterationCount = 1;
do {
  console.log( `Loop ${ iterationCount }.` );
  iterationCount++;
} while ( iterationCount < 3 );
> "Loop 1."
> "Loop 2."
> "Loop 3."

while döngüsünde olduğu gibi do için en yaygın kullanım alanı...while, bir belirsiz uzunluk:

let randomNum;
do {
  randomNum = ( () => Math.floor( Math.random() * 10 ) )();
  console.log( `Is the number ${ randomNum }?` );
} while ( randomNum !== 3 );
console.log( `Yes, ${ randomNum } was the correct number.` );
> "Is the number 9?"
> "Is the number 2?"
> "Is the number 8?"
> "Is the number 2?"
> "Is the number 3?"
> "Yes, 3 was the correct number."

for

Bilinen bir miktar üzerinde iterasyon yapmak için for döngülerini kullanın. Eski kod tabanlarında bu değer bir dizideki öğeleri yinelemek için sıkça kullanılır.

Bir for döngüsü oluşturmak için for anahtar kelimesini ve ardından bir parantez grubu kullanın aşağıdaki üç ifadeyi sırayla ve noktalı virgüller:

1. Döngü başladığında değerlendirilecek bir ifade
2. Döngünün devam edip etmeyeceğini belirleyen bir koşul
3. Her döngünün sonunda yürütülecek bir ifade

Bu parantezlerden sonra, ifadeyi ekleyin (genellikle blok ifadesi) aynı olmalıdır. yürütülmesidir.

for( let i = 0; i < 3; i++ ) {
  console.log( "This loop will run three times.")
}

İlk ifade, sayaç görevi gören bir değişkeni başlatır. Bu ifade, döngünün ilk iterasyonundan önce bir kez değerlendirilir. Şunları yapabilirsiniz: bu değişkeni, diğer herhangi bir işlem gibi let (veya geçmişte var) kullanarak başlatın değişkeninin kapsamı döngünün gövdesidir. Bu değişkenlerde geçerli bir tanımlayıcıdır, ancak "iterasyon" için sıklıkla i olarak adlandırılır. veya "index" ekleyin. Bu, yerleşik kalite yönetimiyle çelişiyor. Tahmin edilebilir tanımlayıcı adları için en iyi uygulamalar, ama kongre aynı zamanda şirketteki diğer geliştiricilerin de açıkça anlayabileceği kadar bir fikir edinmiş olabilir. Dizine eklenen koleksiyonların dizine eklenme işlemi sıfır olduğundan, bu değişkenlerin başlangıç değeri hemen hemen her zaman 0 olur.

Diğer döngü biçimlerinde olduğu gibi, koşul da döngünün yürütülüp yürütülmeyeceğini belirler. Bu genellikle, en sık kullanılan sınırı vardır. Çevirmenden önce koşulu değerlendirir. for döngüsünü ilk kez yürütüyoruz.Koşul başlangıçta true olarak değerlendirilirse döngünün gövdesi yürütülmez.

Son ifade, döngüdeki her iterasyonun sonunda yürütülür. Genellikle tanımlayıcıyı bir birim artırmak için kullanılır.

En yaygın olarak, eski dizelerde for döngülerinin yinelendiğini görürsünüz kod tabanları kullanır. Bu durumlarda, döngüyü devam ettirmek için belirtilen koşul iterasyon sayısı, iterasyon yapılan dizinin uzunluğundan küçük veya bu sayıya eşit üzerinden geçireceğiz. Mevcut yineleme sayısını izlemek için kullanılan değişken, dönüşüm sayısının yukarıya doğru her bir öğeye izin verir ve işlem yapılacak diziyi seçin:

var myArray = [ true, false, true ];
for( let i = 0; i <= myArray.length; i++ ) {
  console.log( myArray[ i ] );
}
> true
> false
> true

Bu yaklaşım artık kullanılmamaktadır. Bunun için daha modern yaklaşımlara yinelenebilir veri yapıları arasında döngü oluşturabilirsiniz.

for [...] of [...]

Bir tablodaki değerleri tekrarlamak için for...of... döngülerini kullanın iterlenebilir veri yapısı (ör. dizi, küme veya harita)

for...of... döngüsünde for anahtar kelimesi ve ardından bir parantez grubu kullanılır içeren değişken (ve ardından of) ile yinelenmekte olan veri yapısı bitti. Değişken, burada let, const veya var, daha önce geçerli kapsamda tanımlanan bir değişken, bir nesne veya devri sökme. Öğenin, mevcut iterasyona karşılık gelen değerini içerir karar vermektir.

const myIterable = [ true, false, true ];
for( const myElement of myIterable ) {
  console.log( myElement );
}
> true
> false
> true

Bu örnekte, myElement için const kullanıldığında, myElement döngünün her yinelemesinde yeni bir değer verilir. Bunun nedeni, değişkenlerin let veya const ile tanımlanan çerezlerin kapsamı, döngüde bulabilirsiniz. Değişken her iterasyonun başında başlatılır ve şu tarihte kaldırılır: son adımını atmak daha iyi olur.

for...in...

Bir nesnenin numaralandırılabilir özelliklerini yinelemek için for...in... döngülerini kullanın. özellikleri içerir. for...of... döngüsünde olduğu gibi, for...in... döngüsünde for anahtar kelimesi ve ardından bir parantez grubu kullanılır karşılık gelen mülk anahtarının değerini içeren bir değişken içerir. döngünün mevcut iterasyonu ile değiştirilir. Bu değişkenin ardından in anahtar kelime, ardından yineleme yapılan nesne:

const myObject = { "myProperty" : true, "mySecondProperty" : false };
for( const myKey in myObject ) {
  console.log( myKey );
}
> "myProperty"
> "mySecondProperty"

Döngünün her iterasyonunda myKey değeri değişse de Değişken etkili bir şekilde silindiğinden const hatası olmadan kullanabilirsiniz eklemesi gerekir ve başta yeniden oluşturulur.

Her bir mülk anahtarıyla ilişkilendirilen değer, for...in... söz dizimi. Ancak döngünün bu anahtarı kullanarak “aramak” ve değeri:

const myObject = { "myProperty" : true, "mySecondProperty" : false };
for( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  console.log( `${ myKey } : ${ myValue }` );
}
> "myProperty : true"
> "mySecondProperty : false"

Yerleşik kuruculardan devralınan özellikler numaralandırılamaz. Diğer bir deyişle, for...in..., Object öğesinden devralınan mülklerle yineleme yapmaz. kurucusu. Bununla birlikte, nesnenin prototip zinciri dahildir:

const myPrototype = { "protoProperty" : true };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: true,
    enumerable: true
    }
});
for ( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  console.log( `${ myKey } : ${ myValue }` );
}
> "myProperty : true"
> "protoProperty : true"

JavaScript, bir mülkün uygun bir mülk olup olmadığını belirlemek için nesnenin prototipindeki bir özellik yerine nesnenin doğrudan özelliği zincir: modern Object.hasOwn() ve eski Object.prototype.hasOwnProperty() yöntemleri. Bu yöntemler, belirtilen bir özelliğin devralınıp alınmadığını (veya bildirilmediğini) true değerini yalnızca belirtilen nesnenin hemen özellikleri için döndürür:

const myPrototype = { "protoProperty" : true };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: true,
    enumerable: true
    }
});
for ( const myKey in myObject ) {
  const myValue = myObject[ myKey ];
  if ( Object.hasOwn( myObject, myKey ) ) {
    console.log( `${ myKey } : ${ myValue }` );
  }
}
> "myProperty : true"

Ayrıca her biri Nesnenin numaralanabilir anahtarları (Object.keys()), değerleri (Object.values()) veya anahtar/değer çiftleri (Object.entries()):

const myObject = { "myProperty" : true, "mySecondProperty" : false };
Object.keys( myObject );
> Array [ "myProperty", "mySecondProperty" ]

Bu, Nesne anahtarlarını, değerlerini veya anahtar/değer çiftlerini ( devralın yapılandırmasını kaldırma) işlemini, Nesnenin prototipine ait mülkleri dahil etmeden gerçekleştirmeniz gerekir:

const myPrototype = { "protoProperty" : "Non-enumerable property value." };
const myObject = Object.create( myPrototype, {
    myProperty: {
    value: "Enumerable property value.",
    enumerable: true
    }
});

for ( const propKey of Object.keys( myObject ) ) {
  console.log( propKey );
}
> "myProperty"

for ( const propValue of Object.values( myObject ) ) {
  console.log( propValue );
}
> "Enumerable property value."

for ( const [ propKey, propValue ] of Object.entries( myObject ) ) {
  console.log( `${ propKey } : ${ propValue }` );
}
> "myProperty : Enumerable property value."

forEach()

Array tarafından sağlanan forEach() yöntemleri, Harita, Ayarla, ve NodeList oluşturucuları, bir veri üzerinde yineleme yaparken kullanışlı bir kısaltma sağlar. bu yapıyı geri çağırma işlevidir. Diğer döngü biçimlerinden farklı olarak Herhangi bir forEach() yöntemiyle oluşturulan döngü, break veya continue.

forEach, her veri yapısının prototipinin sahip olduğu bir yöntemdir. Her forEach yöntemi, bağımsız değişken olarak bir geri çağırma işlevi bekler. Ancak, işlev çağrıldığında eklenen bağımsız değişkenlerin terimlerinin sayısını ifade eder. İsteğe bağlı olarak ikinci bağımsız değişken,this geri çağırma işlevinden yararlanırız.

Array.forEach ile kullanılan geri çağırma işlevi, geçerli öğenin değeri, geçerli öğenin dizini ve forEach yönteminin çağrıldığı dizi:

const myArray = [ true, false ];
myArray.forEach( ( myElement, i, originalArray ) => {
  console.log( i, myElement, originalArray  );
});
> 0 true Array(3) [ true, false ]
> 1 false Array(3) [ true, false ]

Map.forEach ile kullanılan geri çağırma işlevi, değeri, mevcut öğeyle ilişkili anahtar öğesi ve forEach yönteminin çağrıldığı eşleme:

const myMap = new Map([
  ['myKey', true],
  ['mySecondKey', false ],
]);
myMap.forEach( ( myValue, myKey, originalMap ) => {
    console.log( myValue, myKey, originalMap  );
});
> true "myKey" Map { myKey → true, mySecondKey → false }
> false "mySecondKey" Map { myKey → true, mySecondKey → false }

Set.forEach geri çağırması benzer parametreler içerir. Çünkü Sette değerlerden farklı dizinler veya anahtarlar sağlar; ikinci bağımsız değişken bunun yerine bir gereksiz, göz ardı edilebilir değerler kullanır ve böylece söz dizimini diğer forEach yöntem.

const mySet = new Set([ true, false ]);
mySet.forEach( ( myValue, myKey, originalSet ) => {
  console.log( myValue, myKey, originalSet  );
});
> true true Set [ true, false ]
> false false Set [ true, false ]

Yinelemeler

Yinelenebilir, bağımsız öğelerden oluşan herhangi bir veri yapısıdır. kullanarak tekrarlamaya başlarsınız. Yineleyici, yiteratör protokolünü izleyen yinelemeli nesnedir; yani bu nesne her seferinde bir tane olmak üzere, içerdiği öğeler arasında ilerleyen bir next() yöntemi. yöntem her çağrıldığında, sıralı her öğe için bir nesne döndürür öğesini seçin.

JavaScript'in yerleşik yinelenebilir veri yapıları (ör. Dizi, Harita ve Belirlenen), kendileri ancak tümüiterator @@iterator ünlü Sembol, Bu örnekte, yinelenebilir veri yapısından oluşturulan bir yineleme nesnesi döndürülür:

const myIterable = [ 1, 2, 3 ];
const myIterator = myIterable[ Symbol.iterator ]();

myIterable;
> (3) [1, 2, 3]

myIterator;
> Array Iterator {}

Bir iteratörde next() yöntemini çağırmak, her seferinde bir tane içerir ve her çağrı iki tane içeren bir nesne döndürür. özellikleri: value; mevcut öğenin değerini içerir ve done, yinelemenin içindeki son öğeyi geçip geçmediğini belirten bir boole veri yapısıyla ilgilidir. done değeri yalnızca next() çağrısı yapıldığında true olur işlevi, içindeki son öğenin ötesindeki bir öğeye yineleme.

const myIterable = [ 1, 2, 3 ];
const myIterator = myIterable[ Symbol.iterator ]();

myIterator.next();
> Object { value: 1, done: false }

myIterator.next();
> Object { value: 2, done: false }

myIterator.next();
> Object { value: 3, done: false }

myIterator.next();
> Object { value: undefined, done: true }

Oluşturucu İşlevleri

Oluşturucuyu tanımlamak için function* anahtar kelimesini kullanın (yıldız işaretine dikkat edin) işlevini kullanın veya bir oluşturucu işlev ifadesi tanımlayın:

function* myGeneratorFunction() { };

Yineleyiciler gibi, oluşturucu işlevleri de durumu korur. Çağrı yapılıyor: oluşturucu işlevi, yeni bir Oluşturucu nesnesi döndürüyor, ancak hemen değil fonksiyonun gövdesindeki kodu yürütün:

function* myGeneratorFunction() {
  console.log( "Generator function body ")
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject;
> Generator {  }

typeof myGeneratorObject;
> "object"

Oluşturucu nesneleri, yineleyici protokolünü izler. Her bir çağrının Oluşturucu işlevinde döndürülen next(), yield ifadesiyle belirlenir. Bu kod, oluşturucu işlevinin yürütülmesini duraklatır ve yield anahtar kelimesini içeren bir ifadedir. next() ile yapılan sonraki aramalar işlevin yürütülmesine devam eder, sonraki yield ifadesinde duraklar ve değer döndürülüyor.

function* myGeneratorFunction() {
  yield "My first yielded value.";
  yield "My second yielded value.";
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: "My first yielded value.", done: false }

myGeneratorObject.next();
> Object { value: "My second yielded value.", done: false }

yield kullanılarak başka değer belirtilmediğinde next() çağrıldığında return veya throw (hata durumunda), fonksiyonun geri kalanı gövde yürütülür ve döndürülen Nesne value olarak undefined ve done değerine sahip true mülkü:

function* myGeneratorFunction() {
    console.log( "Start of the generator function." );
    yield "First";
    console.log( "Second part of the generator function."  );
    yield "Second";
    console.log( "Third part of the generator function." );
    yield "Third";
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> "Start of the generator function."
> Object { value: "First", done: false }

myGeneratorObject.next();
> "Second part of the generator function."
> Object { value: "Second", done: false }

myGeneratorObject.next();
> "Third part of the generator function."
> Object { value: "Third", done: false }

myGeneratorObject.next();
> Object { value: undefined, done: true }

next() öğesini yalnızca oluşturucu işlevinin döndürdüğü Nesne üzerinde kullanın, oluşturabilirsiniz. Aksi takdirde, oluşturucu işlevine yapılan her çağrı yeni bir oluşturucu Nesne oluşturur:

function* myGeneratorFunction() {
  yield "First";
  yield "Second";
};

myGeneratorFunction().next();
> Object { value: "First", done: false }

myGeneratorFunction().next();
> Object { value: "First", done: false }

Oluşturma aracı işlevi, herhangi bir işlevde olduğu gibi bir return ile karşılaştığında durur. anahtar kelime. Daha sonra, şunu içeren çağrı bağlamına bir Nesne döndürür: değer ve true değerine sahip bir done özelliği döndürdü.

function* myGeneratorFunction() {
  yield 1;
  yield 2;
  return 3;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next().done;
> Object { value: 1, done: false }

myGeneratorObject.next().done;
> Object { value: 2, done: false }

myGeneratorObject.next();
> Object { value: 3, done: true }

yield ifadesi, tanımlayıcının bazı anlamını alabilir, iki yönlü "iletişime" olanak tanıyarak bu bölümün askıya alınan kısmına oluşturabilirsiniz. Üreticinin next() yöntemine bir değer iletildiğinde, bağımsız değişkense, daha önce askıya alınmış önceki değerle ilişkili değerin yerine geçer yield ifadesi:

function* myGeneratorFunction() {
    const firstYield = yield;
    yield firstYield + 10;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: undefined, done: false }

myGeneratorObject.next( 5 );
> Object { value: 15, done: false }

Bunun, önceki yield olup olmadığını kontrol eder ve önceki yield değerini next() içinde belirtilen değer:

function* myGeneratorFunction() {
    const firstYield = yield;
    const secondYield = yield firstYield + 100;
    yield secondYield + 10;
};
const myGeneratorObject = myGeneratorFunction();

myGeneratorObject.next();
> Object { value: undefined, done: false }

myGeneratorObject.next( 10 ); // Can be thought of as changing the value of the `firstYield` variable to `10
> Object { value: 110, done: false }

myGeneratorObject.next( 20 ); // Can be thought of as changing the value of the `secondYield` variable to `20`, _not_ `20 + 100;`
> Object { value: 30, done: false }

Herhangi bir bağımsız değişken olmadığından, next() için yapılan ilk çağrıya iletilen bağımsız değişken yoksayılır önceki yield ifadesini kullanın. Diğer işlevlerde olduğu gibi ilk oluşturucu işlev çağrısına iletilen bağımsız değişkenler, oluşturucu işlevin gövdesinin kapsamı:

function* myGeneratorFunction( startingValue ) {
    let newValue = yield startingValue + 1;
    newValue = yield newValue + 10;
    yield startingValue + 20;
};
const myGeneratorObject = myGeneratorFunction( 2 );

myGeneratorObject.next( 1 );
> Object { value: 3, done: false }

myGeneratorObject.next( 5 );
> Object { value: 15, done: false }

myGeneratorObject.next( 10 );
Object { value: 22, done: false }

yield* (yıldız işaretine dikkat edin) operatörü, şunun gibi bir yinelemeyle kullanılır: her değeri tekrarlamak ve işlem göreni vermek için başka bir oluşturucu işlev şunu döndürür:

function* mySecondaryGenerator() {
  yield 2;
  yield 3;
}

function* myGenerator() {
  yield 1;
  yield* mySecondaryGenerator();
  yield 4;
  return 5;
}

const myIterator = myGenerator();

myIterator.next();
> Object { value: 1, done: false }

myIterator.next();
> Object { value: 2, done: false }

myIterator.next();
> Object { value: 3, done: false }

myIterator.next();
> Object { value: 4, done: false }

myIterator.next();
> Object { value: 5, done: true }

Eşzamansız JavaScript

JavaScript temel olarak eşzamanlı olsa da konusunda ise geliştiricilerin, Google'ın sağladığı avantajlardan yararlanmasını gerçekleştirilecek etkinlik döngüsünü eş zamanlı olarak yürütülür.

Vaatler

Vaat, vaat söz konusu olduğunda bilinmeyen bir değerin yer tutucusudur oluşturuldu. Bu, eş zamansız bir işlemi (ör. bu işlemin başarılı veya başarısız olduğu kabul edildiğinde, ve elde edilen değeri yerine getirir.

Yerleşik Promise özelliğine sahip new operatörünü kullanarak bir Promise örneği oluşturun. oluşturucu fonksiyonu. Bu oluşturucu, yürütücü adlı bir işlevi kabul eder kullanabilirsiniz. Bu yürütücü işlevi, genellikle bir veya daha fazla eş zamansız eylemleri içeriyorsa, Promise'ın kullanılması gereken terimleri kabul edilmiş veya reddedilmiş kabul edilir. Vaat, beklemede olarak tanımlanır Yürütücü işlevi çalışırken. Vasiyet vasiyetini bitirdikten sonra bir Taahhüt durumu belirtildi (veya bazı doküman kaynaklarında çözülmüş olarak) yürütücü işlevi ve gerçekleştirdiği eşzamansız işlem tamamlanır başarılı bir şekilde ve yürütücü işlevi bir hatayla karşılaşırsa reddedildi veya gerçekleştirilen eşzamansız işlem başarısız olur. Vaat yerine getirildikten sonra ya da reddedildiyse çözülmüş olarak kabul edilir.

const myPromise = new Promise( () => { });

Oluşturucu, yürütücü işlevini iki bağımsız değişkenle çağırır. Bu bağımsız değişkenler Sözü manuel olarak yerine getirmenize veya reddetmenize olanak tanıyan işlevlerdir:

const  myPromise = new Promise( ( fulfill, reject ) => { });

Bir Vaadi yerine getirmek veya reddetmek için kullanılan işlevler değeri (genellikle reddetme için verilir):

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = true;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was successful." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 10000);
});

myPromise;
> Promise { <state>: "pending" }

myPromise;
> Promise { <state>: "fulfilled", <value>: "This Promise was successful." }

Zincirleme Taahhüt

Ortaya çıkan Promise nesnesi, then(), catch() ve finally() yöntemleri Promise oluşturucudan devralındı. Bunların her biri yöntemleri, then() aracılığıyla hemen harekete geçilebilecek bir Vaat döndürür. catch() veya tekrar finally() aracılığıyla elde edilen Vaatleri zincirlemenize olanak tanır.

then(), bağımsız değişken olarak iki geri çağırma işlevi sağlar. Karşılamak için ilkini kullan oluşan Promise’ı, ikincisi ise reddettiğini gösterir. Her iki yöntem de tek bir argümanını ifade eder.

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = true;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was fulfilled." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 100);
});

myPromise.then( successfulResult => console.log( successfulResult ), failedResult => console.error( failedResult ) );
> "This Promise was successful."

Yalnızca karşılanan durumu yönetmek için then() öğesini ve yalnızca durumu yerine getirmek için catch öğesini kullanabilirsiniz. durumunu ele alacağız. catch öğesini, şunu içeren tek bir bağımsız değişkenle çağırın: Promise ret yönteminde sağlanan değer:

const myPromise = new Promise( ( fulfill, reject ) => {
  const myResult = false;
  setTimeout(() => {
    if( myResult === true ) {
        fulfill( "This Promise was fulfilled." );    
    } else {
        reject( new Error( "This Promise has been rejected." ) );
    }
  }, 100);
});

myPromise
  .then( fulfilledResult => console.log(fulfilledResult ) )
  .catch( rejectedResult => console.log( rejectedResult ) )
  .finally( () => console.log( "The Promise has settled." ) );
> "Error: This Promise has been rejected."
> "The Promise has settled."

Promise olduğunda işleyici işlevinin çalışmasına izin veren then ve catch öğelerinin aksine işlemi gerçekleştirildiğinde veya reddedildiğinde finally işlevine bağımsız değişken olarak iletilen bir işlev yöntemi, Promise'ın yerine getirilip yerine getirilmediğine bakılmaksızın çağrılır. İşleyici işlevi, işlevin amaçlandığı şekilde bağımsız değişken olmadan çağrılır: yalnızca Söz tamamlandı.

Eşzamanlılık

Promise kurucusu, birden çok ilişkili öğe ile çalışmak için dört yöntem sunar. Promise nesnelerini içeren bir iterable (iterable) kullanarak Promises. Bu yöntemlerin her biri, içinde bulunulan duruma göre yerine getirilen veya reddedilen bir Vaat döndürür. taahhüt edilen taahhütlerin sorumluluğundadır. Örneğin Promise.all(), bir Vaat oluşturur söz konusu yönteme iletilen tüm Vaatler yerine getirildiğinde temin edilir:

const firstPromise  = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const secondPromise = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const thirdPromise  = new Promise( ( fulfill, reject ) => fulfill( "Successful. ") );
const failedPromise = new Promise( ( fulfill, reject ) => reject( "Failed.") );
const successfulPromises = [ firstPromise, secondPromise, thirdPromise ];
const oneFailedPromise = [ failedPromise, ...successfulPromises ];

Promise.all( successfulPromises )
  .then( ( allValues ) => {
    console.log( allValues );
  })
  .catch( ( failValue ) => {
    console.error( failValue );
  });
> Array(3) [ "Successful. ", "Successful. ", "Successful. " ]

Promise.all( oneFailedPromise  )
    .then( ( allValues ) => {
      console.log( allValues );
    })
    .catch( ( failValue ) => {
     console.error( failValue );
    });
> "Failed."

Eşzamanlılığı vadetme yöntemleri şunlardır:

Promise.all()

Yalnızca sağlanan tüm Vaatler yerine getirildiğinde sağlanır.

Promise.any()

Sağlanan Vaatlerden biri karşılanırsa yerine getirilir ve yalnızca reddedilir reddetmesi gerekir.

Promise.allSettled()

Sonuçlarından bağımsız olarak, Vaatler yerine getirildiğinde yerine getirilir.

Promise.race()

İlk ödeme Taahhüdü'nün sonucuna göre reddedilmiş veya yerine getirilmiştir, daha sonra çözüme kavuşturulan tüm Vaatler göz ardı edilir.

async/await

async anahtar kelimesini işlev bildiriminden önce kullandığınızda veya işlev ifadesi, işlevin döndürdüğü değer, şunu içeren yerine getirilmiş bir Vaat olarak döndürülür. değer. Bu sayede, aynı temel istemciyi kullanarak eşzamansız işlemleri olarak iş akışlarını eş zamanlı olarak geliştiriyoruz.

async function myFunction() {
  return "This is my returned value.";
}

myFunction().then( myReturnedValue => console.log( myReturnedValue ) );
> "This is my returned value."

await ifadesi, eşzamansız işlevin yürütülmesini duraklatırken ilgili Vaat yerine getirilmiştir. Vaat anlaşıldıktan sonra, await ifadesi, Promise'in yerine getirilmiş veya reddedilen değeridir.

async function myFunction() {
  const myPromise  = new Promise( ( fulfill, reject ) => { setTimeout( () => fulfill( "Successful. "), 5000 ); });
  const myPromisedResult = await myPromise;
  return myPromisedResult;
}

myFunction()
  .then( myResult => console.log( myResult ) )
  .catch( myFailedResult => console.error( myFailedResult ) );
> "Successful."

Bir await ifadesinde yer alan Promise olmayan herhangi bir değer vaat edilenlerin sayısı:

async function myFunction() {
  const myPromisedResult = await "String value.";
  return myPromisedResult;
}

myFunction()
  .then( myResult => console.log( myResult ) )
  .catch( myFailedResult => console.error( myFailedResult ) );
> "String value."

Öğrendiklerinizi sınayın