ES6～ES12の全機能を1記事でサクッと詳しく解説！

著者：Eve Cole 更新時間：2022-07-25 13:51:38

この記事では ECMAScript の機能を整理して共有します。ES6 ～ ES12 のすべての機能をすぐに理解するには 1 時間かかります。困っている友人が参考になれば幸いです。

手でコードを入力するのが好きな子供の頃、コードは自分でそれをよりよく暗記するために自分で入力する必要があると思いますので、今日はES6〜ES12の機能を紹介します。 ESの使用に盲点がある場合、または新機能についてあまり知らない場合、この記事はあなたを非常によく助けることができるはずです〜

よりよく理解するために、ケースモードで説明します。より良い理解を得ると同時に、ケースは開発者モードでのデバッグもサポートしていることをサポートしていることを願っています

〜ECMascriptEcMascript

は、ECMA International（以前の欧州コンピューターメーカー協会）がECMAを通じて標準化されたスクリプトプログラミング言語であることを

願っています。

-262。

また

、プログラマーの世界ES5 ES6

javascriptの2つのバージョンのみがあると言えます

：ES5とES6は2015年にリリースされたと言われています。

つまり、2015年はES5年と呼ばれES6

ES6の情報については「ES6 Standardsの紹介」と呼ばれます

。

ruan

yifeng

教師

。

変数プロモーション：
VARが宣言される
呼び出す
、およびconstは読み取り変数を宣言し、

さらに、オブジェクトがconstで宣言された場合、 OBJが宣言されているため、オブジェクトのプロパティを変更できます。オブジェクトは、アドレスが変更されていない限り、

割り当て

アレイ
の

破壊は

順番に抽出され、この書き込みに応じて値を割り当てることができます

メソッドはパターンマッチングに属し、
残りのすべての...
undefinedそれを持っていない場合、対応する値をデフォルト値に設定することができます

。 a、b、c] = [1、2、3]
 console.log（a、b、c）// 1 2 3
 
 [a、、c] = [1、2、3]
 console.log（a、、c）// 1 3
 
 [a、b、... c] = [1、2、3、4、5]
 console.log（a、b、c）// 1 2 [3、4、5]
 
 [a、b、... c] = [1]
 console.log（a、b、c）// 1未定義[]
 
 [a = 1、b = a] = []
 const.log（a、b）// 1 1
 
 [a = 1、b = a] = [2]
 const.log（a、b）// 2 2は、

変数とオブジェクトの属性名が繰り返されない場合にのみ、
変数と属性名が必要です

。

:
変数の値はundefined

。
 console.log（a、b）;
 
 let {a} = {b：2};
 console.log（a）;
 
 let {a、b = 2} = {a：1};
 console.log（a、b）;
 
 let {a：b = 2} = {a：1};

console.log（a）; // console.log（

b

）は存在しませ

ん
length 、数字を表す

[a、b、c、d、e] = "hello"
 console.log（a、b、c、d、e）// hello
 
 let {length} = "hello"
 console.log（length）// 5

数とブール値の破壊

オブジェクトまたは配列が死んでいない限り、最初にオブジェクトに変換されるため、数値タイプとブール型もオブジェクトに変換されます

{ toString：s} = 123;
 console.log（s === number.prototype.toString）// true
 
 let {toString：s} = true;
 console.log（s === boolean.prototype.tostring）//

関数

の
パラメーターを解体するか、デフォルト値を
削除する
デフォルト値を指定する2つの方法は、変数を指定することです。もう1つはパラメーターを指定することです

。
 res = arr.map（[a、b] => a + b）
 console.log（res）// [3、7]
 
 arr = [1、未定義、2]
 res = arr.map（（a = 'test'）=> a）
 console.log（res）// [1、 'test'、2]
 
 let func =（{x、y} = {x：0、y：0}）=> {
    return [x、y]
 }
 console.log（func（1、2））// [未定義、未定義]
 console.log（func（））// [0、0]
 console.log（func（{{}））// [未定義、未定義]
 console.log（func（{x：1}））// [1、未定義]
 
 
 let func =（{x = 0、y = 0}）=> {
    return [x、y]
 }
 
 console.log（func（{x：1、y：2}））// [1、2]
 console.log（func（））//エラー
 console.log（func（{{}））// [0、0]]
  console.log（{x：1}）// [1、0]

定期的な

規則性は、誰かがそれを完全に習得できる場合、非常に強力ですまず、

2つのJS分格に分かれていますperl 分格

グリッド：regexp（）

regxp（ 'a'）を見つけます

re

= new regexp

（

'a'、 'i'）;

/a //文字列にあるかどうかを見つけます
 Re =/a/i; // 1つ目は検索するオブジェクトです。2つ目

は

オプション大括号包含

。

大括号包含
String.FromCharCode
に対応する文字に対応するコードポイントを返します
。対応するコードポイントを文字として返します。
文字列内のすべての変数を置き換えてスラッシュを逃がす結果は
、パラメーター文字列が元の文字列のヘッドにあるかどうかを示すブール値を返します。
endswith（） ：パラメーター文字列が元の文字列の最後にあるかどうかを示すブール値を返します。
Repeat（） ：メソッドは新しい文字列を返します。これは、元の文字列n回を繰り返すこと
を
意味します。
trimstart（） ：メソッドは、文字列の先頭からスペースを削除します。 Trimleft（）は、この方法のエイリアスです。
trimend（） ：メソッドは、文字列の端から白人文字を削除します。 TrimRight（）は、この方法のエイリアスです。

// unicode
 console.log（ "a"、 " u0061"）;
 console.log（ "d"、 " u {4e25}"）;
 
 // codePointat（）
 console.log（str.codepointat（0））// 68
 
 //String.FromCharCode（）
 console.log（String.FromCharcode（68））// d
 
 //string.raw（）
 console.log（string.raw`hi  n $ {1 + 2} `）;
 console.log（ `hi  n $ {1 + 2}`）;
 
 let str = 'domesy'
 
 // startswith（）
 console.log（str.startswith（ "d"））// true
 console.log（str.startswith（ "s"））// false

 // endswith（）
 console.log（str.endswith（ "y"））// true
 console.log（str.endswith（ "s"））// false
 
 //繰り返し（）：パスされたパラメーターは自動的に丸められます。
 console.log（str.repeat（2.9））// Domesydomesy
 
 //トラバーサル：for
  for（let of str）{
    console.log（code）// domesyを1回返します
  }
  
  //（）を含む
  console.log（str.includes（ "s"））// true
  console.log（str.includes（ "a"））// false
  
  // トリムスタート()
  const string = "hello world！";
  console.log（string.trimstart（））;
  console.log（string.trimleft（））;
  
  // トリムエンド()
  const string = "hello world！";
  console.log（string.trimend（））;

console.log

（

string.trimright

（

）

）;

    しー
 console.log（str）//は、ラインを自動的にラップします//ドーム
 // sy

ラベルテンプレート：

const str = {
     名前： 'Little dudu'、
     情報：「みなさん、こんにちは
 }

console.log（ `$ {str.info}、i a a a $ {str.name}

`

）引数の数や種類に関係なく、新しい配列を返します。
copyWithin（） ：指定された位置のメンバーを他の位置にコピーし、元の配列
find（）を返します（）：最初の適格値
findindex（）を返します（）：最初の適格なインデックスキー（）を返します
：キー名をトラバースし、トラバーサーオブジェクトを返します
（
）
で使用できます。
ペア
。
fill（） ：指定された要素を入力し、
特定の要素が含まれているかどうかを判断します

。 1、2、3、4、5]

 //Array.of()
 let arr1 = array.of（1、2、3）;
 console.log（arr1）// [1、2、3]
 
 // copywithin（）：3つのパラメーター（ターゲット、start = 0、end = this.length）
 //ターゲット：ターゲットの位置//開始：開始位置は省略でき、負の数になります。
 //終了：終了位置は省略でき、負の数になり、実際の位置は終了です。
 console.log（arr.copywithin（0、3、5））// [4、5、3、4、5]
 
 //探す（）
 console.log（arr.find（（item）=> item> 3））// 4
 
 //findIndex()
 console.log（arr.findindex（（item）=> item> 3））// 3
 
 //キー()
 for（let index of arr.keys（））{
     console.log（index）;
 }
 
 // 値()
 for（let index of ar.values（））{
     console.log（index）;
 }
 
 // エントリ()
 for（ret indexのarr.entries（））{
     console.log（index）; // return [0、1] [2、3] [3、4] [4、5]
 }
 
  arr = [1、2、3、4、5としましょう。
 
 // array.from（）：トラバーサルは、文字列、設定構造、ノードノードlet arr1 = array.fromなどの擬似アレイにすることができます（[1、3、5]、（item）=> {
     返品商品*2;
 })
 console.log（arr1）// [2、6、10] 
 
 // fill（）：3つのパラメーター（ターゲット、start = 0、end = this.length）
 //ターゲット：ターゲットの位置//開始：開始位置は省略でき、負の数になります。
 //終了：終了位置は省略でき、負の数になり、実際の位置は終了です。
 console.log（arr.fill（7））// [7、7、7、7、7]
 console.log（arr.fill（7、1、3））// [1、7、7、4、5]
 
 arr = [1、2、3、4]
 
 //（）を含む
 console.log（arr.includes（3））// true

console.log

（

[1、2、nan] .includes（nan）

）

;

 console.log（... arr）// 3 4 5
 
 ret arr1 = [1、2、... arr]
 console.log（... arr1）// 1 2 3 4 5

オブジェクト拡張

オブジェクト.getPrototypeof（） ：オブジェクトのプロトタイプオブジェクトを返す
Object.setPrototypeof（） ：オブジェクトのプロトタイプオブジェクトを設定します
。オブジェクトのプロトタイプ
オブジェクト.getownPropertynames（）
：
オブジェクト自体の非シンボルプロパティキーを返します。
：オブジェクト
自体のすべてのプロパティキーの配列を返します。
トラバーサル
： for-in
object.keys （
）：属性を返します
今回は、ターゲットオブジェクトも

//object.is（）

を変更します

console.log（object.is（ 'abc'、 'abc'））// true
console.log（object.is（[]、[]））// false 

//トラバース：for-in
let obj = {name： 'domesy'、value： 'React'}

for（objでキーとします）{
    console.log（key）;
    console.log（obj [key]）;
}

//object.keys（）
console.log（object.keys（obj））// ['name'、 'value']

 //object.assign（）
 constターゲット= {a：1、b：2};
 const source = {b：4、c：5};
 
 const result = object.Assign（ターゲット、ソース）
 
 console.log（result）// {a：1、b：4、c：5}
 console.log（ターゲット）// {a：1、b：4、c：5}

その他の

簡潔な式

はa = 1;
  b = 2とします。
  obj = {a、b}
  console.log（obj）// {a：1、b：2}
  
  method = {
      こんにちは（） {
          console.log（ 'hello'）
      }
  }
  console.log（method.hello（））// hello

属性式：変数または式を直接使用してオブジェクトのキーを定義します

let a = "b"
 obj = { にします
     [A]：「C」
 }
 console.log（obj）// {b： "c"}

拡張

演算子...

s9に多くの追加関数を追加します。

、... c} = {a：1、b：2、c：3、d：4};
 console.log（c）// {c：3、d：4}
 
 obj1 = { c: 3 } とします。
 obj = {a：1、b：2、... obj1}
 console.log（obj）// {a：1、b：2、c：3}

数値拡張

バイナリ
： 0bまたは0Bで
00ます0O
値が制限されているかどうかを確認するには、boolean値を返します
。isnan（） ：値がnanであるかどうかを確認するために使用され、boolean値
番号を返します。isinteger（） ：値が整数であるかどうかを確認するために使用します。 Value
number.issafeinteger（） ：値が「安全な整数」であるかどうかを確認するために使用され、boolean value
math.cbrt（）を返し
ます
。） ：Cubeと
32
ビットの整数inmul
（）を返します。
値
の
フローティングポイント形式
。 1 + n（math.log（1 + n））
math.log10（）の1 + n（Math.log（1 + n））math.log10（） ：1 + nの自然対数をbase 2
math.log2（）でnの対数を返します。
Math.trunc（） ：数の小数部分を削除し、整数部品のみを残します
。sign（）负零-0正正零0正数为1负数为-1 、 NaN
math.abrt（） ：cube root
math.sinh（）を返します：双曲線sine
math.cosh（）を返します
：双曲線のコサイン数学を返します
。逆双曲線のサイン
MATH.ACOSH（） ：逆双曲線COSINE
MATH.ATANH（）を返します：逆双曲線
parseInt接線番号を返します
。：値の浮動小数点部分を返します。この方法はparseFloat

// binary console.log（0b101）// 5

に相当します。

 console.log（0o151）// 105
 
 //Number.isfinite（）
 console.log(Number.isFinite(7)); // true
 console.log（number.isfinite（true））;
 
 //Number.isNaN()
 console.log（number.isnan（nan））;
 console.log（number.isnan（ "true" / 0））;
 console.log（number.isnan（true））;
 
 //Number.isInteger()
 console.log（number.isinteger（17））;
 console.log（number.isinteger（17.58））;
 
 //Number.isSafeInteger()
 console.log（number.issafeinteger（3））;
 console.log（number.issafeinteger（3.0））;
 console.log(Number.isSafeInteger("3")); // false
 console.log(Number.isSafeInteger(3.1)); // false
 
  //Math.trunc()
 console.log(Math.trunc(13.71)); // 13
 console.log(Math.trunc(0)); // 0
 console.log(Math.trunc(true)); // 1
 console.log(Math.trunc(false)); // 0 
 
 //Math.sign()
 console.log(Math.sign(3)); // 1
 console.log(Math.sign(-3)); // -1
 console.log(Math.sign(0)); // 0
 console.log(Math.sign(-0)); // -0
 console.log（math.sign（nan））;
 console.log（math.sign（true））;
 console.log（math.sign（false））;
 
 //math.abrt（）
 console.log（math.cbrt（8））;
 
  //number.parseint（）
 console.log（number.parseint（ "6.71"））;
 console.log（parseint（ "6.71"））;
 
 //NUMBER.PARSEFLOAT（）
 console.log(Number.parseFloat("6.71@")); // 6.71
 console.log（parsefloat（ "6.71@"））;

関数トレーリングコンマ：関数の最後のパラメーター
がデフォルトで特定の値を割り当て

ます
 関数 fun(x, y = x){
    console.log（x、y）
 }
 function fun1(c, y = x){
    console.log(c, x, y)
 }
 楽しい(2); //2 2
 fun1（

1

）

;

   console.log（arg）// [1、2、3、4]
 }
 
 楽しみ（1、2、3、4）

矢印関数は

let arrow =（v）=> v + 2

として定義されます

 console.log（矢印（1））//

矢印関数と通常の関数の違いは

異なります、および通常の関数は機能します。
セットには、キーと値のみが同じであると考えることができます
。関数。
箭头函数没有自己的arguments。矢印関数で引数にアクセスすると、実際には、外側のローカル（関数）実行環境で値が得られます。
呼び出し、適用、およびバインドは、この方向に影響しません。
矢印関数はコンテキストを指しますが、通常の関数のこれは、必要に応じてコンテキストを指してい

ます

。ただし、メンバーの値は一意であり、繰り返される値

宣言

は

あり

ませ

ん

const set = new Set()

Set オブジェクトの終わり。セットオブジェクトを返します
delete（） ：この値に等しいセット内の要素を削除します。ある場合はtrueを返し
ます
。
もしそうなら、誤った
keys（） ：属性値を持つiteratorのオブジェクト
値（） ：属性値を持つiteratorのオブジェクト
エントリ（） ：属性値と属性
値
foreach（） ：各要素を反復します

。

特に：

iteratorは挿入の順序で、
[キー、値]の形式のセットに追加されます
「2つの異なる値です
。セット内で、それらは渡されます。つまり、アドレスが異なるため、2つのオブジェクトが同じになることはありません。
唯一の違いはnan

let list = new set（）

です。

 
 //追加（）
 list.add（ "1"）
 list.add（1）
 コンソール（リスト）// set（2）{1、 "1"}
 
 //サイズ
 コンソール（list.size）// 2
 
 //消去（）
 list.delete（ "1"）
 コンソール（リスト）// set（1）{1}
 
 //もっている（）
 list.has（1）// true
 list.has（3）// false
 
 //クリア（）
 list.clear（）
 コンソール（リスト）// set（0）{}
 
 let arr = [{id：1}、{id：2}、{id：3}]
 let list = new set（arr）
 
 // keys（）
 for（let of list.keys（））{
    console.log（key）; //これ：{id：1} {id：2} {id：3}
 }
 
 // values（）
 for（let of list.values（））{
    console.log（key）; //これ：{id：1} {id：2} {id：3}
 }
 
 // entries（）
 for（list.entries（））のデータを
    console.log（data）; //印刷：[{id：1}、{id：2}、{id：2}] 】
 }
 
 // foreach
 list.foreach（（item）=> {
    console.log（item）//これを印刷：{id：1} {id：2} {id：3}

}

）

。

new Set

未定義、null、null、nan、nan、 'nan'、0、0、 'a'、 'a'];
 
 console.log（[... new set（arr）]） 
 //またはconsole.log（array.from（new set（arr）））

// [1、 'true'、true、15、false、undefined

、

null、nan、 'nan'、0、 'a']

a = new set（[1、2、 3]）
 b = new set（[2、3、4]）
 
 // Union Console.log（new set（[... a、... b]））// set（4）{1、2、3、4}
 
 //Intersection console.log(new Set([...a].filter(v => b.has(v)))) // Set(2) {2, 3}
 
 //差分セット new Set([...a].filter(v => !b.has(v))) // Set(1) {1}

マッピングセット

let set = new Set([1,2, 3])
 console.log(new Set([...set].map(v => v * 2))) // Set(3) {2, 4, 6}

WeakSet

定義: Set と同じ構造ですが、メンバー値は

オブジェクトに対してのみ宣言できます： const set = new WeakSet()

メソッド：

add（） ：weaksetオブジェクトの最後に要素を追加します。 Instance
delete（）を返します：この値に等しい弱点の要素を削除します
（）：この値が存在するかどうか、それは真であり、それ以外の場合は

false

です

すべての弱い参照です。つまり、ガベージコレクションメカニズムはオブジェクトの適用を考慮していません。簡単に言えば、
移動できないWebSetオブジェクトは、インスタンスが削除されると、

メモリ

の

推奨インデックスが

あり

ません

キーは任意のタイプの値宣言です

： const map = new Map()

属性：

コンストラクター：コンストラクター、マップ
サイズを返します：マップインスタンスの値の数を返します

方法：

set（） ：key-valueペアを追加します。マップ、instance
）
のキー値を返します
（）：この値に等しいマップ内の要素を削除します。
Map
has（） ：この値が存在するかどうか、それが存在する場合、それは真実であり、それ以外の場合はfalse
keys（） ：属性キー値を持つトラバーサーのオブジェクト
（）：属性値エントリを持つトラバーサーのオブジェクト
（）：属性キーと属性値を持つトラバーサーのオブジェクト
foreach（） ：トラバースの各要素

特別注：

同じオブジェクトへの参照は、
同じキーを持つキーと見なされ、

let map = new Map（）
 
 //セット（）
 map.set（ 'a'、1）
 map.set('b', 2)
 console.log（map）// map（2）{'a' => 1、 'b' => 2}
 
 //得る
 map.get("a") // 1
 
 //サイズ
 console.log（map.size）// 2
 
 //消去（）
 map.delete（ "a"）// true
 console.log（map）// map（1）{'b' => 2}
 
 //もっている（）
 map.has（ 'b'）// true
 map.has（1）// false
 
 //クリア（）
 map.clear（）
 console.log（map）// map（0）{}
 
 let arr = [["a"、1]、["b"、2]、["c"、3]]]
 let map = new Map（arr）
 
 // keys（）
 for
    console.log（key）; //これ：ABC
 }
 
 // values（）
 for（map.values（））の値と
    console.log（value）;
 }
 
 // entries（）
 for（map.entries（））のデータと
    console.log（data）;
 }
 
 // foreach
 map.forEach((項目) => {
    console.log（item）//これを印刷：1 2 3

}

）

const set = new WeakMap()

Value Pairsは
、
キー価値のペアを削除します。

シンボル（オリジナルタイプ）

シンボル

Symbol值、

eS6

独一无二導入されて

い

const sy = Stmbol()

このパラメーターは存在し、元のSymbol值（最初に検索してから作成、グローバル環境に登録され、グローバル環境に登録）を返します
。Keyfor（） ：登録されたSymbol值の説明を返します（ Symbol.for()のkeyのみが返される可能性があります）
object.getownPropertySymbols（） ：オブジェクトのプロパティ名として使用されるすべてのSymbol值の配列を返します

。
 let b = Symbol();
 console.log（a === b）;
 
 //Symbol.for()
 let c = symbol.for（ "domesy"）;
 let d = Symbol.for("domesy");
 console.log（c === d）;
 
 //Symbol.keyFor()
 const e = symbol.for（ "1"）;
 console.log（symbol.keyfor（e））;
 
 //symbol.description
 let symbol = symbol（ "es"）;
 console.log（symbol.description）;
 console.log（symbol（ "es"）=== symbol（ "es"））;
 console.log（symbol ===シンボル）;

console.log（

symbol.description

=== "es"）

;プログラミング "）、つまり、プログラミング言語でのプログラミングは

このように理解できます。プロキシは、ターゲットオブジェクトの前に設定された拦截の層です。外の世界からのアクセスをフィルタリングしてフィルタリングするメカニズムが提供されます。

ここではプロキシは代理器宣言として理解できます

： const proxy = new Proxy(target, handler)

ターゲット：インターセプトされたオブジェクト
ハンドラー：

インターセプトの方法を定義します：

get（） ：オブジェクト属性セットの読み取り値を傍受
：オブジェクト設定プロパティをインターセプトする、ブール値
を返す（） ：プロキシでのプロップキーの操作を傍受し、ブール値を返します
officeプロパティトラバーサルを傍受し、配列
deleteproperty（）を返します：delete proxy [propkey]の操作を傍受し、ブリーンを返します。 value（）
apply（） ：intercept function call、call and apply operations
construct（） ：new commandをインターセプトし、オブジェクトを返します：新しいコマンドを挿入し、オブジェクトを返します

obj = {{{
  名前： 'Domesy'、
  時間： '2022-01-27'、
  値：1
 }
 
 let data = new Proxy（obj、{
     //得る（）
     get(ターゲット, キー){
         ターゲットを返す[key] .replace（ "2022"、 '2015'）
     }、
     
     //セット（）
     セット（ターゲット、キー、値）{
        if（key === "name"）{
           return（target [key] = value）;
        } それ以外 {
           return target[key];
         }
     }、
     
     // もっている（）
    has(ターゲット, キー) {
        if（key === "name"）{
            ターゲットを返す[key];
        } それ以外 {
            false を返します。
        }
    }、
    // deleteproperty（）
    deleteproperty（ターゲット、キー）{
        if（key.indexof（ "_"）> -1）{
            ターゲットを削除[key];
            true を返します。
        } それ以外 {
            ターゲットを返す[key];
        }
    }、
    // ownkeys（）
    ownkeys（ターゲット）{
        return object.keys（ターゲット）.filter（（item）=> item！= "time"）;
    }、
 })
 
 console.log（data.time）// 2015-01-27
 
 data.time = '2020'
 data.name = 'React'
 console.log（data）// proxy {name： 'React'、time： '2022-01-27'、value：1}
 
 // Interceptas has（）
 console.log（ "in data in data）// true
 console.log("time" in data) // false
 
 // deleteproperty（）を削除します
 date.timeを削除します
 
 // traverse ownkeys（）
 console.log（object.keys（data））;

 //適用する（）
 let sum =（... args）=> {
    num = 0とします。
    args.foreach（（item）=> {
        num += item;
    });
    数値を返します。
 };

 sum = new Proxy（sum、{
    apply（ターゲット、ctx、args）{
        ターゲットを返す（... args） * 2;
    }、
 });
 
 console.log（sum（1、2））;
 console.log（sum.call（null、1、2、3））;
 console.log（sum.apply（null、[1、2、3]））;
 
 //コンストラクタ（）
 let user = class {
    コンストラクター（名前）{
        this.name = 名前;
    }
 }
 user = new Proxy（user、{
    construct（ターゲット、args、newtarget）{
        新しいターゲットを返します（... args）;
    }、
  });

console.log（

Object

user（ "domesy"）

）

;言語の内部（オブジェクトなどなど）は、反射オブジェクトに置きます。
この段階では、オブジェクトの両方にいくつかのメソッドが展開され、将来的には、
いくつかのオブジェクトメソッドのリターン結果を変更するために、反射オブジェクトにのみ展開されます。

たとえば、Object.DefineProperty（OBJ、NAME、DESC）は、プロパティ

を

定義できないときにエラーをスローし
ます

また

、

プロキシの方法は

1

つに対応するため、

ここ

では

クラス

クラスを紹介しません。

     constructor（name = 'es6'）{
         this.name = 名前
     }
 }
 let data = new Parent（ 'Domesy'）
 console.log（data）// parent {name： 'domesy'}

拡張

クラスの親{
     constructor（name = 'es6'）{
         this.name = 名前
     }
 }
 
 //普通の相続財産クラスの子は親を拡張します{}
 console.log（new child（））// child {name： 'es6'} 
 
 // passパラメータークラスチャイルドは親を拡張します{
    constructor（name = "child"）{
        super（name）;
        this.type = "child";
    }
 }
 console.log（new Child（ 'domesy'））// child {name： 'domesy'、type： 'child'}

getterとsetterの

2つの方法は

、
apiをカプセル化するためにしばしば使用されます
メソッドクラスの親ではなく属性

{
     constructor（name = 'es6'）{
         this.name = 名前
     }
     // ゲッター
     getName（）{
         'sy' + this.nameを返します
     } 
     // setter
     set setName(value){
         this.name = value
     }
 }
 
 let data = new Parent（）
 console.log（data.getName）// syes6
 
 data.setname = 'domesy'
 console.log（data.getName）// Domesy

Static Static Method

Static Methodは、クラスのインスタンスで呼び出すことはできませんが、クラス自体

の親{を介して呼び出す必要があります{
     static getName =（name）=> {
         `こんにちは！ $ {name} `
     }
 }
 
 console.log（parent.getname（ 'domesy'））// hello！ Domesy

Static Properties

Class Parent {}
 parent.type = "test";
 
 console.log（parent.type

）

Promise

Promise Promise Promise同時リクエストをサポートし、同時リクエストでデータを

取得
でき

ます

。

の成功
： [拒否]操作は

、

状態
が保留されます

状態の移行

は

一方向であり、不可逆的です

。

callback）=> {
     console.log（'≈ '）
     setTimeout(() => {
         callback && callback.call();
     }、1000)
 } 
 ajax（（）=> {
     console.log（ 'timeout'）
 })
 //最初に実行を開始するために印刷され、次にタイムアウトは1秒後に印刷されます。
 
 //約束
 ajax =（）=> {
    console.log（ "実行を開始"）;
    return new Promise((解決、拒否) => {
        setTimeout(() => {
            解決する（）;
        }、1000）;
    });
 };
 ajax（）。then（（）=> {
    console.log（ "Timeout"）; 
 });
 // 最初に実行を開始するために出力され、次に 1 秒後にタイムアウトが出力されます。
 
 //それから（）
 ajax =（）=> {
    console.log("开始执行");
    return new Promise((解決、拒否) => {
        setTimeout(() => {
            解決する（）;
        }、1000）;
    });
 };
 ajax（）
 .then(() => {
     return new Promise((解決、拒否) => {
        setTimeout(() => {
            解決する（）;
        }、2000）;
    });
 })
 .then(() => {
     console.log("タイムアウト")
 })
 //最初に実行を開始するために入力され、次にタイムアウトは3秒（1+2）後に入力されます
 
 // catch（）
 ajax =（num）=> {
    console.log("开始执行");
    return new Promise((解決、拒否) => {
        if（num> 5）{
            解決する（）;
        } それ以外 {
            throw new Error("出错了");
        }
    });
 };
 
 ajax（6）
 .then（function（）{
    console.log("timeout"); // 最初に実行が開始され、1 秒後にタイムアウトが出力されます。
 })
 .catch（function（err）{
    console.log("catch", err);
 });
 
  ajax（3）
 .then（function（）{
    console.log（ "Timeout"）; 
 })
 .catch（function（err）{
    console.log("catch"); // 先会打出开始执行，1s 后打出catch
 }）

all（）batch操作

（arr）は、複数の約束インスタンスをパッケージ化するために使用さ
れ
ます
約束
、
他の値になる可能性があります
約束は失敗し、リターン値は最初の値です

。
     新しい約束を返す（解決、拒否）=> {
        img = document.createelement（ "img"）;
        img.src = src;
        img.onload = function（）{
                Resolve（IMG）;
        };
        img.onerror = function（err）{
                拒否（err）;
        };
    });
 }
 
 const showimgs =（imgs）=> {
     imgs.foreach（（img）=> {
         document.body.AppendChild（IMG）;
     })
 }
 
 Promise.all（[
    loadimg（ "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"）
    loadimg（ "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"）
    loadimg（ "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"）
 ）

{
    新しい約束を返す（解決、拒否）=> {
       img = document.createelement（ "img"）;
       img.src = src;
       img.onload = function（）{
               Resolve（IMG）;
       };
       img.onerror = function（err）{
               拒否（err）;
       };
   });
}

const showimgs =（imgs）=> {
   p = document.createelement（ "p"）;
   P.AppendChild（IMG）;
   document.body.AppendChild（P）;
}

promise.race（[
   loadimg（ "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"）
   loadimg（ "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"）
   loadimg（ "https://ss0.baidu.com/7po3dsag_xi4khgko9wtanf6hhy/zhidao/pic/item/71cf3bc79f3df8dcc6551159cd11728b46102889.jpg"）
]).then(showImgs);

Promise的问题

一旦执行，无法中途取消，链式调用多个then中间不能随便跳出来
错误无法在外部被捕捉到，只能在内部进行预判处理，如果不设置回调函数，Promise内部抛出的错误，不会反应到外部
Promise内部如何执行，监测起来很难，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

Generator

Generator: 是可以用来控制迭代器的函数，也是封装多个内部状态的异步编程解决方案，也叫生成器函数

参数说明

yield 来控制程序内部的执行的"暂停" ，并返回一个对象，这个对象包括两个属性： value和done
其中value代表值， done返回布尔(如果为false，代表后续还有，为true则已完成）
next 来恢复程序执行
Generator函数的定义不能使用箭头函数，否则会触发SyntaxError 错误

 let data = function* (){
     yield "a";
     yield "b";
     return "c"
 }
 
 let generator = data();
 console.log(generator.next()) //{value: 'a', done: false} 
 console.log(generator.next()) //{value: 'b', done: false} 
 console.log(generator.next()) //{value: 'c', done: true} 
 console.log(generator.next()) //{value: undefined, done: true}

Iterator 遍历器

Iterator是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。

Iterator的作用：

一是为各种数据结构，提供一个统一的、简便的访问接口
使得数据结构的成员能够按某种次序排列
ES6创造了一种新的遍历命令for...of循环， Iterator接口主要供for...of消费
for-in遍历顺序：不同的引擎已就如何迭代属性达成一致，从而使行为标准化ES11

注意：

在ES6中，有些数据结构原生具备Iterator接口（比如数组），即不用任何处理，就可以被for...of循环遍历，有些就不行（比如对象）
在ES6中，有三类数据结构原生具备Iterator接口：数组、某些类似数组的对象、 Set和Map结构。
一个为对象添加Iterator接口的例子。

 // 基本使用let arr = ["hello", "world"];
 let map = arr[Symbol.iterator]();
 console.log(map.next()); // {value: 'hello', done: false}
 console.log(map.next()); // {value: 'world', done: false}
 console.log(map.next()); // {value: undefined, done: true}
 
 // for of 循环let arr = ["hello", "world"];
 for (let value of arr) {
    console.log(value); // hello world
 }
 
 // 对象处理let obj = {
     start: [1, 5, 2],
     end: [7, 9, 6],
     [Symbol.iterator](){
         let index = 0;
         let arr = this.start.concat(this.end)
         戻る {
             次（）{
                 if(index < arr.length){
                     戻る {
                         value: arr[index++],
                         done: false
                     }
                 }それ以外{
                     戻る {
                         value: arr[index++],
                         完了: true
                     }
                 }
             }
         }
     }
 }
 for (let key of obj) {
    console.log(key); // 1 5 2 7 9 6
 }

Decorator 装饰器

使用@符号,用来扩展，修改类的行为
使用的时候需要引入第三方库如： core-decorators

 const name = (target) => {
     target.name = "domesy"
 }
 
 @名前
 class Test{}
 
 console.log(Test.name) //domesy

模块化

在早期，使用立即执行函数实现模块化是常见的手段，通过函数作用域解决了命名冲突、污染全局作用域的问题

使用模块化的好处：

解决命名冲突
提供复用性
提高代码可维护性

方案：

CommonJS ：用于服务器(动态化依赖)
AMD ：用于浏览器(动态化依赖，使用的很少)
CMD ：用于浏览器(动态化依赖，使用的很少)
UMD ：用于浏览器和服务器(动态化依赖)
ESM ：用于浏览器和服务器(静态化依赖)

export 导出模块

默认导出： export default Index
单独导出： `export const name = 'domesy'
按需导出（推荐）： `export { name, value, id }'
改名导出： export { name as newName }

import 导入模块

默认导入（推荐）： import Index from './Index'
整体导入： import * as Index from './Index'
按需导入（推荐）： import { name, value, id } from './Index'
改名导入： import { name as newName } from './Index'
自执导入： import './Index'
符合导入（推荐）： import Index, { name, value, id } from './Index'

复合模式

export命令和import命令结合在一起写成一行，变量实质没有被导入当前模块，相当于对外转发接口，导致当前模块无法直接使用其导入变量，适用于全部子模块导出

默认导入导出： `export { default } from './Index'
整体导入导出： `export * from './Index'
按需导入导出： `export { name, value, id } from './Index'
默认改具名导入导出： `export { default as name } from './Index'

ES7

数组扩展

includes() : 在ES6 的基础上增加了一个索引，代表是从哪寻找ES7

 let arr = [1, 2, 3, 4]
 
 //includes() ES6
 console.log(arr.includes(3)) // true
 console.log([1, 2, NaN].includes(NaN)); // true
 
 // includes() ES7
 console.log(arr.includes(1, 0)) // true
 console.log(arr.includes(1, 1)) // false

数值扩展

幂运算符：用**代表Math.pow()

 // 幂运算符ES7
 console.log(Math.pow(2, 3)) // 8
 console.log(2 ** 8) // 256

ES8

字符传扩展

padStart() ：用于头部补全
padEnd() ：用于尾部补全。

 let str = 'Domesy'
 
 //padStart(): 会以空格的形式补位吗，这里用0代替，第二个参数会定义一个模板形式，会以模板进行替换console.log("1".padStart(2, "0")); // 01
 console.log("8-27".padStart(10, "YYYY-0M-0D")); // YYYY-08-27
  
 // padEnd()：与padStart()用法相同console.log("1".padEnd(2, "0")); // 10

对象扩展

Object.values()：返回属性值
Object.entries()：返回属性名和属性值的数组

let obj = { name: 'Domesy', value: 'React' }

//Object.values()
console.log(Object.values(obj)) // ['React', 'React']

//Object.entries()
console.log(Object.entries(obj)) // [['name', 'value'], ['React', 'React']]

async await

作用：将异步函数改为同步函数，（Generator的语法糖）

 const func = async () => {
    let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
          resolve("执行");
        }, 1000);
    });
     
      console.log(await promise);
      console.log(await 0);
      console.log(await Promise.resolve(1));
      コンソール.ログ(2);
      return Promise.resolve(3);
 }
 
 func().then(val => {
      console.log(val); // 依次执行： 执行0 1 2 3
 });

特别注意：

Async 函数返回Promise对象，因此可以使用then
awit 命令，只能用在async 函数下，否则会报错
数组的forEach()执行async/await会失效，可以使用for-of和Promise.all()代替
无法处理promise 返回的reject对象，需要使用try catch来捕捉

awiait 等到了之后做了什么？

这里分为两种情况：是否为promise 对象

如果不是promise , await会阻塞后面的代码，先执行async外面的同步代码，同步代码执行完，再回到async内部，把这个非promise的东西，作为await表达式的结果。

如果它等到的是一个promise 对象，await 也会暂停async后面的代码，先执行async外面的同步代码，等着Promise 对象fulfilled，然后把resolve 的参数作为await 表达式的运算结果。

async await 与promise 的优缺点

优点：

它做到了真正的串行的同步写法，代码阅读相对容易
对于条件语句和其他流程语句比较友好，可以直接写到判断条件里面
处理复杂流程时，在代码清晰度方面有优势

缺点：

用await 可能会导致性能问题，因为await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。

ES9

字符传扩展

放松对标签模板里字符串转义的限制：遇到不合法的字符串转义返回undefined ,并且从raw上可获取原字符串。

 // 放松字符串的限制const test = (value) => {
     console.log(value)
 }
 test `domesy` // ['domesy', raw: ["domesy"]]

Promise

Promise.finally()

不管最后状态如何都会执行的回调函数

 let func = time => {
     return new Promise((res, rej) => {
         setTimeout(() => {
             if(time < 500){
                 res(time)
             }それ以外{
                 rej(time)
             }
         }、 時間）
     })
 }
 
 func(300)
 .then((val) => console.log('res', val))
 .catch((erro) => console.log('rej', erro))
 .finally(() => console.log('完成'))
 // 执行结果： res 300 完成func(700)
 .then((val) => console.log('res', val))
 .catch((erro) => console.log('rej', erro))
 .finally(() => console.log('完成'))
 // 执行结果： rej 700 完成

for-await-of

for-await-of：异步迭代器，循环等待每个Promise对象变为resolved状态才进入下一步

 let getTime = (seconds) => {
     return new Promise(res => {
         setTimeout(() => {
             res(seconds)
         }, seconds)
     })
 }
 
async function test(){
    let arr = [getTime(2000),getTime(500),getTime(1000)]
    for await (let x of arr){
        console.log(x); 
    }
}

test() //以此执行2000 500 1000

ES10

字符传扩展

JSON.stringify() : 可返回不符合UTF-8标准的字符串(直接输入U+2028和U+2029可输入)

 //JSON.stringify() 升级console.log(JSON.stringify("uD83DuDE0E")); 
 console.log(JSON.stringify("u{D800}")); // ud800

数组扩展

flatMap() : 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。(注：它与map 连着深度值为1的flat 几乎相同，但flatMap 通常在合并成一种方法的效率稍微高一些。)
flat : 方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。默认为1.(应用：数组扁平化(当输入Infinity自动解到最底层))

 let arr = [1, 2, 3, 4]
 
 // flatMap()
 console.log(arr.map((x) => [x * 2])); // [ [ 2 ], [ 4 ], [ 6 ], [ 8 ] ]
 console.log(arr.flatMap((x) => [x * 2])); // [ 2, 4, 6, 8 ]
 console.log(arr.flatMap((x) => [[x * 2]])); // [ [ 2 ], [ 4 ], [ 6 ], [ 8 ] ]
 
 const arr1 = [0, 1, 2, [3, 4]];
 const arr2 = [0, 1, 2, [[[3, 4]]]];

 console.log(arr1.flat()); // [ 0, 1, 2, 3, 4 ]
 console.log(arr2.flat(2)); // [ 0, 1, 2, [ 3, 4 ] ]
 console.log(arr2.flat(Infinity)); // [ 0, 1, 2, 3, 4 ]

对象扩展

Object.fromEntries()

返回键和值组成的对象，相当于Object.entries()的逆操作
可以做一些数据类型的转化

Map 转化为Object

 let map = new Map([
    ["a", 1],
    ["b", 2],
 ]);
 
 let obj = Object.fromEntries(map);
 console.log(obj); // {a: 1, b: 2}

Array 转化为Object

// 注意数组的形式let arr = [
    ["a", 1],
    ["b", 2],
 】
 let obj = Object.fromEntries(arr);
 console.log(obj); // {a: 1, b: 2}

对象转换

 let obj = {
    A：1、
    B：2、
    c: 3
 }
 
 let res = Object.fromEntries(
     Object.entries(obj).filter(([key, val]) => value !== 3)
 )
 
 console.log(res) //{a: 1, b: 2}

数值扩展

toString()改造：返回函数原始代码(与编码一致)

 //toString()
 function test () {
     consople.log('domesy')
 }
 console.log(test.toString());
 // function test () {
 // consople.log('domesy')
 // }

可选的Catch参数

在ES10 中，try catch 可忽略catch的参数

 let func = (name) => {
      試す {
         return JSON.parse(name)
      } キャッチ {
         falseを返す
      }
  }
  
  console.log(func(1)) // 1
  console.log(func({a: '1'})) // false

ES11

BigInt(原始类型)

新的原始数据类型：BigInt，表示一个任意精度的整数，可以表示超长数据，可以超出2的53次方
js 中Number类型只能安全的表示-(2^53-1)至2^53-1 范的值

特别注意：

Number类型的数字有精度限制，数值的精度只能到53 个二进制位（相当于16 个十进制位, 正负9007199254740992），大于这个范围的整数，就无法精确表示了。
Bigint没有位数的限制，任何位数的整数都可以精确表示。但是其只能用于表示整数，且为了与Number进行区分，BigInt 类型的数据必须添加后缀n。
BigInt 可以使用负号，但是不能使用正号
number类型的数字和Bigint类型的数字不能混合计算

 // Number
 console.log(2 ** 53) // 9007199254740992
 console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991
 
 //BigInt
 const bigInt = 9007199254740993n
 console.log(bigInt) // 9007199254740993n
 console.log(typeof bigInt) // bigint
 console.log(1n == 1) // true
 console.log(1n === 1) // false
 const bigIntNum = BigInt(9007199254740993n)
 console.log(bigIntNum) // 9007199254740993n

基本数据类型

在ES6中一共有7种，分别是： srting 、 number 、 boolean 、 object 、 null 、 undefined 、 symbol

其中object包含： Array 、 Function 、 Date 、 RegExp

而在ES11后新增一中，为8中分别是： srting 、 number 、 boolean 、 object 、 null 、 undefined 、 symbol 、 BigInt

Promise

Promise.allSettled():

将多个实例包装成一个新实例，返回全部实例状态变更后的状态数组(齐变更再返回)
无论结果是fulfilled 还是rejected, 无需catch
相当于增强了Promise.all()

 Promise.allSettled([
    Promise.reject({
      code: 500,
      msg: "服务异常",
    }）、
    Promise.resolve({
      code: 200,
      data: ["1", "2", "3"],
    }）、
    Promise.resolve({
      code: 200,
      data: ["4", "5", "6"],
    }）、
  ]).then((res) =>{
      console.log(res) // [{ reason: {code: 500, msg: '服务异常'}, status: "rejected" },
                      // { reason: {code: 200, data: ["1", "2", "3"]}, status: "rejected" },
                      // { reason: {code: 200, data: ["4", "5", "6"]}, status: "rejected" }]
      const data = res.filter((item) => item.status === "fulfilled");
      console.log(data); // [{ reason: {code: 200, data: ["1", "2", "3"]}, status: "rejected" },
                          // { reason: {code: 200, data: ["4", "5", "6"]}, status: "rejected" }]
  })

import(): 动态导入

按需获取的动态import. 该类函数格式（并非继承Function.prototype）返回promise 函数
与require的区别是： require()是同步加载， import()是异步加载

 // then()
 let modulePage = "index.js";
 import(modulePage).then((module) => {
    module.init();
 });
 
 // 结合async await
 (async () => {
  const modulePage = 'index.js'
  const module = await import(modulePage);
  console.log(module)
 })

globalThis

全局this，无论是什么环境（浏览器，node等），始终指向全局对象

// 浏览器环境console.log(globalThis) // window

//ノード
console.log(globalThis) // global

可选链

符号？代表是否存在
TypeScript 在3.7 版本已实现了此功能

 const user = { name: 'domesy' }
 //ES11之前let a = user && user.name
 
 //Now let b = user?.name

Null value coalescing operator

Convenience operator for handling default values
Compared with ||, the null value coalescing operator?? will only work when the value on the left is strictly equal to null or undefined 。

"" || "default value"; // default value
  "" ?? "default value"; // ""
  
 const b = 0;
 const a = b || 5;
 console.log(a); // 5
 
 const b = null // undefined
 const a = b ?? 123;
 console.log(a); // 123

ES12

字符传扩展

replaceAll()

replace()方法仅替换一个字符串中某模式（pattern）的首个实例
replaceAll()会返回一个新字符串，该字符串中用一个替换项替换了原字符串中所有匹配了某模式的部分。
模式可以是一个字符串或一个正则表达式，而替换项可以是一个字符串或一个应用于每个匹配项的函数。
replaceAll()相当于增强了replace() 的特性，全量替换

 let str = "Hi！，这是ES6~ES12的新特性，目前为ES12"
 
 console.log(str.replace("ES", "SY")); // Hi！，这是SY6~ES12的新特性，目前为ES12
 console.log(str.replace(/ES/g, "Sy")); // Hi！，这是Sy6~Sy12的新特性，目前为Sy12
 
 console.log(str.replaceAll("ES", "Sy")); // Hi！，这是Sy6~Sy12的新特性，目前为Sy12
 console.log(str.replaceAll(/ES/g, "Sy")); // Hi！，这是Sy6~Sy12的新特性，目前为Sy12

Promise

Promise.any()

其区别于Promise.race(), 尽管某个promise 的reject 早于另一个promise 的resolve，Promise.any() 仍将返回那个首先resolve 的promise。

 Promise.any([
    Promise.reject("Third"),
    Promise.resolve("Second"),
    Promise.resolve("First"),
 ])
 .then((res) => console.log(res)) // Second
 .catch((err) => console.error(err)); 
 
 Promise.any([
    Promise.reject("Error 1"),
    Promise.reject("Error 2"),
    Promise.reject("Error 3"),
 ])
 .then((res) => console.log(res))
 .catch((err) => console.error(err));
 // AggregateError: All promises were rejected
 
 Promise.any([
    Promise.resolve("Third"),
    Promise.resolve("Second"),
    Promise.resolve("First"),
 ])
 .then((res) => console.log(res)) // Third
 .catch((err) => console.error(err));

WeakRefs

允许创建对象的弱引用。这样就能够在跟踪现有对象时不会阻止对其进行垃圾回收。 Very useful for caching and object mapping.
You must use the new keyword to create a new WeakRef
deref() to read the referenced object.
The correct use of the WeakRef object requires careful consideration, and it is best to avoid using it as much as可能。避免依赖于规范没有保证的任何特定行为也是十分重要的。何时、如何以及是否发生垃圾回收取决于任何给定JavaScript 引擎的实现。

let weakref = new WeakRef({name: 'domesy', year: 24})
 
 weakref.deref() // {name: 'domesy', year: 24}
 weakref.deref().year // 24

逻辑操作符和赋值表达

&&=

let num1 = 5;
let num2 = 10;
num1 &&= num2;
console.log(num1); // 10

// 等价于num1 && (num1 = num2);
if (num1) {
    num1 = num2;
 }

||=

let num1;
let num2 = 10;
num1 ||= num2;
console.log(num1); // 10

// 等价于num1 || (num1 = num2);
if (!num1) {
   num1 = num2;
}

??=

空值合并运算符?? 只会在左边的值严格等于null 或undefined 时起作用

let num1;
let num2 = 10;
let num3 = null; // undefined

num1 ??= num2;
console.log(num1); // 10

num1 = false;
num1 ??= num2;
console.log(num1); // false

num3 ??= 123;
console.log(num3); // 123

// 等价于// num1 ?? (num1 = num2);

数值分隔符

let num1 = 100000;
let num2 = 100_000;

console.log(num1); // 100000
console.log(num2); // 100000

const num3 = 10.12_34_56
console.log(num3); // 10.123456

ES6～ES12の全機能を1記事でサクッと詳しく解説！

〜ECMascriptEcMascript

ruan

yifeng

。

破壊は

。

b

数とブール値の破壊

関数

定期的な

は

（

）

ラベルテンプレート：

`

）

;

オブジェクト拡張

その他の

簡潔な式

属性式：変数または式を直接使用してオブジェクトのキーを定義します

演算子...

数値拡張

1

;

矢印関数は

ます

}

、

マッピング セット

WeakSet

メモリ

}

シンボル（オリジナルタイプ）

symbol.description

）

1

クラス

拡張

getterとsetterの

Static Static Method

Static Properties

）

。

all（）batch操作

​

Promise的问题

Generator

Iterator 遍历器

Decorator 装饰器

模块化

export 导出模块

import 导入模块

复合模式

ES7

数组扩展

数值扩展

ES8

字符传扩展

对象扩展

async await

awiait 等到了之后做了什么？

async await 与promise 的优缺点

ES9

字符传扩展

Promise

for-await-of

ES10

字符传扩展

数组扩展

对象扩展

Object.fromEntries()

Map 转化为Object

Array 转化为Object

对象转换

数值扩展

可选的Catch参数

ES11

BigInt(原始类型)

マッピングセット