ES9-新機能

ここでは、ES9の新機能について学習します。非同期ジェネレーターについて理解することから始めましょう。

非同期発電機と反復

非同期発電機は、を使用して非同期にすることができます asyncキーワード。ザ・syntax 非同期ジェネレータを定義するための以下の式を示します。

async function* generator_name() {
   //statements
}

例

次の例は、への呼び出しごとにPromiseを返す非同期ジェネレーターを示しています。 next() ジェネレータの方法。

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

上記のコードの出力は次のようになります-

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

ループ待ち

非同期反復可能オブジェクトは、従来の方法を使用して反復することはできません for..of loop約束を返す構文。ES9はfor await of loop サポートする asynchronous iteration。

を使用するための構文 for await of loop 以下に示します。ここで、

  • 各反復で、異なるプロパティの値がに割り当てられます variable 変数は、const、let、またはvarで宣言できます。

  • iterable −反復可能なプロパティが繰り返されるオブジェクト。
for await (variable of iterable) {
   statement
}

例

次の例は、for awaitofループを使用して非同期ジェネレーターを反復する方法を示しています。

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

上記のコードの出力は次のようになります-

end of script
1
2
3

例

次の例では、for待機ループを使用して配列を反復処理します。

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

上記のコードの出力は次のようになります-

end of script
10
20
30
40

レスト/スプレッドプロパティ

ES9は、オブジェクトでのRestおよびSpread演算子の使用をサポートしています。

例：オブジェクトとレスト演算子

次の例は、オブジェクトでのrest演算子の使用を示しています。学生のageプロパティの値はage変数にコピーされ、残りのプロパティの値は残りの構文 `...`を使用して他の変数にコピーされます。

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

上記のコードの出力は次のようになります-

10
{height: 5, weight: 50}

例：Object andSpread演算子

スプレッド演算子を使用して、複数のオブジェクトを結合したり、オブジェクトのクローンを作成したりできます。これを次の例に示します-

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

上記のコードの出力は以下のようになります-

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

約束：finally（）

ザ・ finally()結果に関係なく、約束が解決されるたびに実行されます。この関数はpromiseを返します。両方のpromiseでコードの重複を回避するために使用できますthen() そして catch() ハンドラー。

構文

下記の構文は関数用です finally()。

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

例

次の例では、3秒の遅延後に正の数の2乗を返す非同期関数を宣言しています。負の数が渡されると、関数はエラーをスローします。いずれの場合も、promiseが拒否されたか解決されたかに関係なく、finallyブロックのステートメントが実行されます。

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

上記のコードの出力は次のようになります

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

テンプレートリテラルリビジョン

ES7以降、タグ付きテンプレートは次のエスケープシーケンスのルールに準拠しています-

  • Unicodeエスケープシーケンスは、 "\u"、 例えば \u2764\uFE0F

  • Unicodeコードポイントエスケープシーケンスは、 "\u{}"、 例えば \u{2F}

  • 16進エスケープシーケンスは、 "\x"、 例えば \xA8

  • 8進数のリテラルエスケープシーケンスは、「」を使用して表され、その後に1つ以上の数字が続きます。 \125

ES2016以前では、タグ付けされた関数で無効なエスケープシーケンスが使用されると、以下に示すように構文エラーがスローされます。

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

ただし、以前のバージョンとは異なり、ES9は無効なUnicodeシーケンスを未定義に解析し、エラーをスローしません。これを次の例に示します-

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

上記のコードの出力は次のようになります-

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

生の文字列

ES9は特別なプロパティを導入します raw、タグ関数の最初の引数で使用できます。このプロパティを使用すると、エスケープシーケンスを処理せずに、入力されたとおりの生の文字列にアクセスできます。

例

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

上記のコードの出力は次のようになります-

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

正規表現機能

正規表現では、ドット演算子またはピリオドを使用して1つの文字を照合します。ザ・. dot operator 次のような改行文字をスキップします \n, \r 以下の例に示すように-

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

正規表現パターンは/として表されます regular_expression /.test（）メソッドは文字列パラメーターを受け取り、正規表現パターンを検索します。上記の例では、test() methodTutorialsで始まり、その後に任意の1文字が続き、Pointで終わるパターンを検索します。使用する場合\n または \r TutorialsとPointの間の入力文字列で、test（）メソッドはfalseを返します。

true
false
false

ES9は新しいフラグを導入します- DotAllFlag (\s)これを正規表現で使用して、ラインターミネーターと絵文字を一致させることができます。これを次の例に示します-

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

上記のコードの出力は以下のようになります-

true
true

名前付きキャプチャグループ

ES9より前は、キャプチャグループはインデックスによってアクセスされていました。ES9では、キャプチャグループに名前を割り当てることができます。同じ構文を以下に示します-

(?<Name1>pattern1)

例

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

上記のコードの出力は次のとおりです-

1999
04
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved