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:
- Döngü başladığında değerlendirilecek bir ifade
- Döngünün devam edip etmeyeceğini belirleyen bir koşul
- 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
Bilinen bir miktarı yinelemek için hangi döngü türünü kullanırsınız?
while
for
do...while