ES9 - Yeni Özellikler

Burada ES9'daki yeni özellikleri öğreneceğiz. Eşzamansız üreteçleri anlayarak başlayalım.

Eşzamansız Üreteçler ve Yineleme

Eşzamansız üreteçler, asyncanahtar kelime. syntax bir eşzamansız oluşturucu tanımlamak için aşağıda verilmiştir -

async function* generator_name() {
   //statements
}

Misal

Aşağıdaki örnek, bir next() jeneratör yöntemi.

<script>
   async function* load(){
      yield await Promise.resolve(1);
      yield await Promise.resolve(2);
      yield await Promise.resolve(3);
   }
   
   let l = load();
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
   l.next().then(r=>console.log(r))
</script>

Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır -

{value: 1, done: false}
{value: 2, done: false}
{value: 3, done: false}
{value: undefined, done: true}

döngü beklemek için

Eşzamansız yinelemeler geleneksel yöntem kullanılarak yinelenemez. for..of loopsözdizimi vaatleri döndürürken. ES9,for await of loop desteklemek asynchronous iteration.

Kullanmak için sözdizimi for await of loop aşağıda verilmiştir, nerede,

Her yinelemede farklı bir özelliğin değeri atanır. variable ve bir değişken const, let veya var ile bildirilebilir.
iterable - Yinelenebilir özellikleri üzerinde yinelenecek nesne.

for await (variable of iterable) {
   statement
}

Misal

Aşağıdaki örnek, bir zaman uyumsuz oluşturucuyu yinelemek için for await of döngüsünün kullanımını gösterir.

<script>
   async function* load(){
      yield await Promise.resolve(1);
      yield await Promise.resolve(2);
      yield await Promise.resolve(3);
   }

   async function test(){
      for await (const val of load()){
         console.log(val)
      }
   }
   test();
   console.log('end of script')
</script>

Yukarıdaki kodun çıktısı aşağıda gösterildiği gibi olacaktır -

end of script
1
2
3

Misal

Aşağıdaki örnek, for await of döngüsünü kullanarak bir diziyi yineler.

<script>
   async function fntest(){
      for await (const val of [10,20,30,40]){
         console.log(val)
      }
   }
   fntest();
   console.log('end of script')
</script>

Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır -

end of script
10
20
30
40

Dinlenme / Yayılma Özellikleri

ES9, Rest ve Spread operatörlerinin Objects ile kullanımını destekler.

Örnek: Nesne ve Dinlenme Operatörü

Aşağıdaki örnek, bir nesne ile rest operatörünün kullanımını gösterir. Öğrencinin yaş özelliğinin değeri yaş değişkenine kopyalanırken, kalan özelliklerin değerleri diğer değişkene rest sözdizimi `` ... '' kullanılarak kopyalanır.

<script>
   const student = {
      age:10,
      height:5,
      weight:50
   }
   const {age,...other} = student;
   console.log(age)
   console.log(other)
</script>

Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır -

10
{height: 5, weight: 50}

Örnek: Nesne ve Yayılma operatörü

Yayılma operatörü, birden çok nesneyi veya klonlama nesnelerini birleştirmek için kullanılabilir. Bu, aşağıdaki örnekte gösterilmektedir -

<script>
   //spread operator
   const obj1 = {a:10,b:20}
   const obj2={c:30}
   //clone obj1
   const clone_obj={...obj1}
   //combine obj1 and obj2
   const obj3 = {...obj1,...obj2}
   console.log(clone_obj)
   console.log(obj3)
</script>

Yukarıdaki kodun çıktısı aşağıda belirtildiği gibi olacaktır -

{a: 10, b: 20}
{a: 10, b: 20, c: 30}

Söz: sonunda ()

finally()sonucuna bakılmaksızın, bir söz verildiğinde yerine getirilir. Bu işlev bir söz verir. Her iki taahhütte de kod tekrarını önlemek için kullanılabilir.then() ve catch() işleyiciler.

Sözdizimi

Aşağıda belirtilen sözdizimi işlev içindir finally().

promise.finally(function() {
});
promise.finally(()=> {
});

Misal

Aşağıdaki örnek, 3 saniyelik bir gecikmeden sonra pozitif bir sayının karesini döndüren zaman uyumsuz bir işlevi bildirir. Negatif bir sayı geçilirse işlev bir hata atar. Son bloğundaki ifadeler, söz ister reddedilsin ister çözülsün, her iki durumda da yürütülür.

<script>
   let asyncSquareFn = function(n1){
      return new Promise((resolve,reject)=>{
         setTimeout(()=>{
            if(n1>=0){
               resolve(n1*n1)
            }
            else reject('NOT_POSITIVE_NO')
         },3000)
      })
   }
   console.log('Start')

   asyncSquareFn(10)//modify to add -10
   .then(result=>{
      console.log("result is",result)
   }).catch(error=>console.log(error))
   .finally(() =>{
      console.log("inside finally")
      console.log("executes all the time")
   })

   console.log("End");
</script>

Yukarıdaki kodun çıktısı aşağıda gösterildiği gibi olacaktır.

Start
End
//after 3 seconds
result is 100
inside finally
executes all the time

Şablon Değişmez revizyonu

ES7 itibariyle, etiketli şablonlar aşağıdaki kaçış dizilerinin kurallarına uygundur -

Unicode kaçış dizileri kullanılarak temsil edilir "\u", Örneğin \u2764\uFE0F
Unicode kod noktası kaçış dizileri kullanılarak temsil edilir "\u{}", Örneğin \u{2F}
Onaltılık kaçış dizileri kullanılarak temsil edilir "\x", Örneğin \xA8
Sekizli değişmez kaçış dizileri "" kullanılarak temsil edilir ve ardından bir veya daha fazla rakam gelir, örneğin \125

ES2016 ve önceki sürümlerinde, etiketli işlevlerle geçersiz kaçış dizileri kullanılırsa, aşağıda gösterildiği gibi bir Sözdizimi Hatası atılır -

//tagged function with an invalid unicode sequence
myTagFn`\unicode1`
// SyntaxError: malformed Unicode character escape sequence

Ancak, önceki sürümlerden farklı olarak, ES9 geçersiz unicode dizisini tanımsız olarak ayrıştırır ve bir hata vermez. Bu, aşağıdaki örnekte gösterilmektedir -

<script>
   function myTagFn(str) {
      return { "parsed": str[0] }
   }
   let result1 =myTagFn`\unicode1` //invalid unicode character
   console.log(result1)
   let result2 =myTagFn`\u2764\uFE0F`//valid unicode
   console.log(result2)
</script>

Yukarıdaki kodun çıktısı aşağıda gösterildiği gibi olacaktır -

{parsed: undefined}
{parsed: "❤️"}

Ham Dizeler

ES9 özel bir özellik sunar rawetiket işlevinin ilk bağımsız değişkeninde bulunur. Bu özellik, kaçış dizilerini işlemeden ham dizelere girildikleri gibi erişmenizi sağlar.

Misal

<script>
   function myTagFn(str) {
      return { "Parsed": str[0], "Raw": str.raw[0] }
   }
   let result1 =myTagFn`\unicode`
   console.log(result1)

   let result2 =myTagFn`\u2764\uFE0F`
   console.log(result2)
</script>

Yukarıdaki kodun çıktısı aşağıdaki gibi olacaktır -

{Parsed: undefined, Raw: "\unicode"}
{Parsed: "❤️", Raw: "\u2764\uFE0F"}

Normal İfade özelliği

Normal ifadelerde, nokta operatörü veya nokta tek bir karakterle eşleştirmek için kullanılır. . dot operator gibi satır sonu karakterlerini atlar \n, \r aşağıdaki örnekte gösterildiği gibi -

console.log(/Tutorials.Point/.test('Tutorials_Point')); //true
console.log(/Tutorials.Point/.test('Tutorials\nPoint')); //false
console.log(/Tutorials.Point/.test('Tutorials\rPoint')); //false

Normal bir ifade modeli / olarak temsil edilir regular_expression /.Test () yöntemi bir dize parametresi alır ve normal ifade kalıbını arar. Yukarıdaki örnekte,test() methodÖğreticilerle başlayıp ardından herhangi bir tek karakterin geldiği ve Nokta ile biten kalıbı arar. Eğer kullanırsak\n veya \r Tutorials ile Point arasındaki girdi dizesinde test () yöntemi false değerini döndürür.

true
false
false

ES9 yeni bir bayrak sunar - DotAllFlag (\s)satır sonlandırıcıları ve emojileri eşleştirmek için Regex ile birlikte kullanılabilir. Bu, aşağıdaki örnekte gösterilmektedir -

console.log(/Tutorials.Point/s.test('Tutorials\nPoint'));
console.log(/Tutorials.Point/s.test('Tutorials\rPoint'));

Yukarıdaki kodun çıktısı aşağıda belirtildiği gibi olacaktır -

true
true

Adlandırılmış Yakalama Grupları

ES9'dan önce, yakalama gruplarına dizinler aracılığıyla erişiliyordu. ES9, yakalama gruplarına adlar atamamıza izin verir. Aynı sözdizimi aşağıda verilmiştir -

(?<Name1>pattern1)

Misal

const birthDatePattern = /(?<myYear>[0-9]{4})-(?<myMonth>[0-9]{2})/;
const birthDate = birthDatePattern.exec('1999-04');
console.log(birthDate.groups.myYear);
console.log(birthDate.groups.myMonth);

Yukarıdaki kodun çıktısı aşağıda gösterildiği gibidir -

1999
04