JavaScriptのES7 ES8 ES9の新機能

参考文献:  https://tuobaye.com/2018/11/27/%E7%BB%86%E8%A7%A3JavaScript-ES7-ES8-ES9-%E6%96%B0%E7%89%B9%E6 %80%A7 /

ES7

1. Array.prototype.includes()方法

[ 'A'、 'B'、 'C'、 'D']。(B '')を含む          //  
[ 'A'、 'B'、 'C'、 'D']( 'B'を含みます、1)       //  
[ 'A'、 'B'、 'C'、 'D'] 2)、(B ''を含む       // 
VaRの ARY1 = [NaNに]。
console.log(ary1.indexOf(NaNの))// -1 
はconsole.log(ary1.includes(NaNの))// 

2.指数演算子(**)

使用**Math.pow代わりに。

4 ** 3

に相当

Math.pow(4,3)
n = 4でみましょう
N ** = 3。

SS8

1.非同期機能

ある非同期機能は、私たちはしばしば非同期/待つと言います。非同期/はのための取引待つJS非同期操作、私たちはコールバック地獄を取り除くのに役立ち、よりエレガントなコードを書くことができ糖衣構文を。

非同期キーワードの役割の人気の理解は、キャリブレーションのための機能が異なって扱われるべきコンパイラに指示します。コンパイラた場合、キャリブレーション機能の出会いをするには、キーワードを待つ?一時的に機能を校正し、停止した後の処理は、適切な処置を完了した待ちますこの機能が満たされ、戻り値が解決の値である場合は、それ以外の場合は値を拒否されます。

比較するために、通常の書面による約束してください:

非同期関数asyncFunc(){ 
    CONST結果は = 待つotherAsyncFunc()。
    console.log(結果)。
} 

// と同等:
機能asyncFunc(){
     戻りotherAsyncFuncを()
    .then(結果 => { 
        にconsole.log(結果); 
    }); 
}

複数の機能の並列処理:

非同期関数asyncFunc(){ 
    CONST [結果1、結果2] =を待つPromise.all([ 
        otherAsyncFunc1()、
        otherAsyncFunc2()
    ])。
    console.log(結果1、結果2)。
} 

// と同等:
機能asyncFunc(){
     戻りPromise.all([ 
        otherAsyncFunc1()、
        otherAsyncFunc2()
    ])
    .then([結果1、結果2] => { 
        にconsole.log(結果1、結果2を); 
    }); 
}

エラー処理:

非同期関数asyncFunc(){
     試みる{ 
        (otherAsyncFuncを待ちます)。
    } キャッチ(ERR){ 
        console.error(ERR)。
    } 
} 

// と同等:
関数asyncFunc(){
     戻りotherAsyncFunc() キャッチ(ERR => { 
        console.error(ERR); 
    }); 
}

2. SharedArrayBuffer和アトミック

SharedArrayBuffer SharedArrayBufferは、複数のオブジェクトとメインスレッドの労働者のバイトの間の共有を可能にします。この共有は、2つの利点があります。

  • データは、より速く、労働者間で共有することができます。
  • 労働者の間で簡単かつ迅速に(と比較してのpostMessage())コーディネーション

API:

  コンストラクタ:新しいSharedArrayBuffer(長さ)

  静的プロパティ:SharedArrayBuffer [Symbol.species]

  属性の例:SharedArrayBuffer.prototype.byteLength()

              SharedArrayBuffer.prototype.slice(開始、終了)

アトミック方法は、他の労働者と同期するために使用することができます。あなたがデータを読み書きすることができ、次の二つの動作、およびコンパイラが再配置されません。

  • Atomics.load(TA:TypedArray、インデックス)
  • Atomics.store(TA:TypedArray、インデックス値:T)

アイデアは、アトミック操作(ロード、ストア、およびその他の操作)が読み書きにセキュリティを確保する一方で、データを読み書きするために、ほとんどの日常の操作を使用することです。典型的には、カスタム同期機構を使用する(例えば)アトミックに基づいて実装されてもよいです

API: 

アトミックオペランドの主な機能は、インスタンスInt8Array、Uint8Array、Int16Array、Uint16Array、Int32ArrayまたはUint32Arrayでなければなりません。それはSharedArrayBufferに包まれている必要があります。

    • Atomics.load(TA:TypedArray、指数) :Tは、
      読み取りおよび位置指定された素子アレイ返り値にTA [インデックス]を返されます?。
    • Atomics.store(TA:TypedArray、インデックス値:T):Tは、
      [インデックス] TA値に書き込まれ、その値が返されます。
    • Atomics.exchange(TA:TypedArray、インデックス値:T):T
      セット内の要素のTA [インデックス]の値に、前のインデックスのインデックス値に戻ります。
    • Atomics.compareExchange(TA:TypedArray、インデックスのexpectedValue、replacementValue):T
      現在の要素のTA [索引]のexpectedValue上にある場合は、次にreplacementValueが置換使用。そして、元のインデックス(または変更しない)値のインデックスを返します。
    • Atomics.add(TA:TypedArray、インデックス値):Tは、
      TA [インデックス] + =値を行い、元の値の[インデックス] taを返します。
    • Atomics.sub(TA:TypedArray、インデックス値):Tは、
      TA [インデックス]実行- =値と元の値のTA [インデックス]を返します。
    • Atomics.and(TA:TypedArray、インデックス値):Tは、
      TA [インデックス]を行う&=値と元の値のTA [インデックス]を返します。
    • Atomics.or(TA:TypedArray、インデックス値):Tは、
      [インデックス] taの実行| =値と元の値のTA [インデックス]を返します。
    • Atomics.xor(TA:TypedArray、インデックス値):Tは、
      TA [インデックス] ^ =値を行い、元の値の[インデックス] taを返します。
    • Atomics.wait(TA:Int32Array、インデックス値、タイムアウト= Number.POSITIVE_INFINITYと):( '等しくない' | 'OK' | 'タイムアウト')
      TA [インデックス]は値の現在の値でない場合、返します「等しくありません。そうでない場合(等しい値)我々はAtomics.wake(で目を覚ますまで待ち続ける)か、タイムアウトするまで待ちます。前者の場合は、「OK」を返します。後者の場合には、「タイムアウト」を返します。ミリ秒単位のタイムアウト。この機能は、操作を実行することを忘れないでください:「TA [インデックス]が重視する場合は、待ち続けています。」
    • Atomics.wakeは(TA:Int32Array、インデックスは、カウント)
      カウント労働者のTA [インデックス]を待つウェイク。

3. Object.valuesとObject.entries

CONST OBJ = {10: 'XXX'、1 'YYY'、3 'ZZZ' }。
Object.values(OBJ)。// [ 'YYY'、 'ZZZ'、 'XXX'] 

Object.values( 'ES8')。// [ 'E'、 'S'、8 '']
CONST OBJ = [ 'E'、 'S'、 '8' ]。
Object.entries(OBJ)。// [[ '0'、 'E']、[ '1'、 'S']、[ '2'、 '8'] 

CONST OBJ = {10: 'XXX'、1 'YYY'、3 : 'ZZZ' }。
Object.entries(OBJ)。// [[ '1'、 'YYY']、[ '3'、 'ZZZ']、[ '10': 'XXX'] 

Object.entries( 'ES8')。// [[ '0'、 'E']、[ '1'、 'S']、[ '2'、 '8']

4.文字列のパディング

padStartとpadEnd:Stringオブジェクトとして機能の増加。得られた文字列の長さが所定の長さ(targetLength)を達成できるようにするために、列ヘッダとトレーラをパディング。あなたは、特定の文字または文字列、またはデフォルトのスペースでそれを埋めるためにすることができます。

str.padStart(targetLength【、padString])
str.padEnd(targetLength【、padString])

「es8'.padStart(2)。          // 'ES8' 
「es8'.padStart(5);          // 'ES8' 
'es8'.padStart(6'ウーフ「);  // 'wooes8' 
「es8'.padStart(14、すごいです)。  // 'wowwowwowwoes8' 
「es8'.padStart(7、0);     // '0000es8'
 
「es8'.padEnd(2);            // 'ES8' 
「es8'.padEnd(5);            // 'ES8' 
'es8'.padEnd(6'ウーフ「);    // 'es8woo' 
「es8'.padEnd(14、すごいです)。    // " 
es8wowwowwowwo ' ' es8'.padEnd(7、6 '')。       // 'es86666'

5. Object.getOwnPropertyDescriptors

CONST OBJ = { 
  ES7(){得る返す 777 }、 
  )(ES8 を取得{ 返す 888 } 
}。
Object.getOwnPropertyDescriptor(OBJ)。
// { 
//    ES7:{ 
//      設定:真、
//      列挙:真、
//      得る:関数ES7(){} //ゲッター関数
//      設定:未定義
//    } 
//    ES8:{ 
//      設定:真、
//      列挙:真、
//      得る:関数ES8(){} //ゲッター機能を
//     セット:未定義
//    } 
// }

6.末尾のカンマ

// パラメータ定義
関数FOO(
    PARAM1、
    PARAM2、
){} 

// 関数呼び出し
FOO(
     'ABC'  'DEF' 
); 

// オブジェクト 
LET OBJ = { 
    まず: 'ジェーン' 
    最後:「ドウ' 
}; // の配列 
LETのARR = [
     '赤' '緑' '青」
]。

ES9の新機能

1.イテレータ非同期:非同期イテレータオブジェクトnext()メソッドは、プロミスを返す解析された定期的なイテレータの同様の値で、。

非同期関数の例(){
   // 普通迭代器: 
  CONST反復子= createNumberIterator()。
  iterator.next(); // オブジェクト{値:1、行わ:偽} 
  (iterator.next)。// オブジェクト{値:2、行わ:偽} 
  (iterator.next)。// オブジェクト{値:3、行わ:偽} 
  (iterator.next)。// オブジェクト{値:未定義、行わ:真} 

  // 异步迭代器: 
  CONST asyncIterator = createAsyncNumberIterator()。
  CONST P = asyncIterator.next()。// 約束は
  待つ pは//オブジェクト{値:1、行わ:偽} 
  (asyncIterator.nextを待ちます)。// オブジェクト{値:2、行わ:偽} 
  asyncIterator.next()を待ちます。// オブジェクト{値:3、行わ:偽} 
  asyncIterator.next()を待ちます。// オブジェクト{値:未定義、行わ:真} 
}

2.休憩/拡がり性

パラメータを休ませ、オペレータを展開し、この機能はES6、ES6にだけに導入された配列ES9にするための目的には、安静および拡張演算パラメータの配列のように設けられています。
CONST OBJ = {  1 
  B: 2 
  C: 3 
} 
CONST {...} PARAM = OBJ。
  console.log(A)      // 1 
  にconsole.log(PARAM)// {B:2、C 3} 

関数FOO({...} PARAM){ 
  にconsole.log(A)。    // 1 
  にconsole.log(PARAM)// {B:2、C 3} 
}

3. Promise.prototype.finally()

最終的にコールバックが必ず実行されます。

約束
  .then(結果 => {...}) キャッチ(エラー=> {...}) 最終的に、(()=> {...})。

4.名前キャプチャグループ

ES9キャプチャグループは名前で識別することができます。

(?<年> [0-9] {4})

前:

CONST RE_DATE = /([0-9] {4}) - ([0-9] {2}) - ([0-9] {2})/ 

CONST matchObj = RE_DATE.exec( '1999-12-31' ); 
constの年 = matchObj [1]; // 1999年 
のconst月= matchObj [2]。// 12 
CONST日= matchObj [3]。// 31

後:

RE_DATE = CONST /(?<年> [0-9] {} 4) - (?<月> [0-9] {2}) - (?<日付> [0-9] {2})/ 

matchObjのCONST = RE_DATE.exec( '1999-12-31' ); 
constの年 = matchObj.groups.year; // 1999年 
のconst =月matchObj.groups.month; // 12がある 
のconst =デイmatchObj.groups.date; / / 31 

// 使用構文容易に解体の 
CONST {グループ:日{、}} = RE_DATE.exec年( '1999-12-31' ); 
にconsole.log(年); // 1999 
にconsole.log(日) ; // 31

 



おすすめ

転載: www.cnblogs.com/ceceliahappycoding/p/11354353.html