JavaScript ECMAScript 6 のすべての新機能の概要

ECMAScript は 2015 年に ES6 を正式リリースしてから 8 年が経過しました。2015 年以降、毎年 6 月にその時点の年をバージョン番号として新しいバージョンがリリースされます。

これらの多くのバージョンには多くの新機能が登場しており、記憶しやすいように、この記事ではすべての新機能を整理しました。

ps: ES2015以降のバージョンをまとめてES6と呼んでいるという情報もあれば、ES6はES2015、ES7はES2016といったように言われている情報もありますが、ここでは触れません。

ES2015 (ES6)

ES2015 は、次の図に示すように、基本的に ES2015 より前のすべての内容が拡張されたバージョンです。

let、const キーワードとブロックレベルのスコープ。ES6

より

前では、変数を宣言する方法はvarキーワードを使用する 1 つだけでした。ES2015 では、変数と定数を宣言するためにletキーワードとconstキーワードが追加されました。

宣言

変数 let v = 100
v = 200
// 定数を宣言 const V = 200
// 定数を変更します // V = 300 //

letおよびconstキーワードを使用して宣言された変数または定数は、ブロック レベルのスコープを持ちます。

サンプル コードは次のとおりです

。
  var v = 100
}
{
  val = 200 とします
}
コンソール.ログ(v)
console.log(val) // エラー val が定義されていません

letまたはconstキーワードを使用して宣言された変数には変数昇格の特性がなく、一時的なデッド ゾーンがあることに注意してください。

関数の拡張により、

ES2015 で関数がデフォルト値を使用できるようになります。サンプルコードは次のとおりです。

// es2015 の前の function foo(v) {
  v = v ? : 100
  リターンv
}
//es2015
関数バー(v = 100) {
  リターンv

複数のパラメーターがある場合は、デフォルトのパラメーターを後ろから前に使用する必要があることに注意してください

。

ES2015 では、関数の短縮形式であるアロー関数が追加されました。サンプル コードは次のとおりです。

function foo(v) {
  return v``
}
// アロー関数を書く const foo = (v) => {
  v
}
//略語1
const foo = v => { // 括弧を省略できるパラメータは 1 つだけです return v
}
// 略語2
const foo = v => v //声明には、

矢印関数のthis thisコンテキストに基づいて決定されていることに注意してください

。

を

使用する場合、内部引数オブジェクトはありませんが、代わりに残りのパラメーターは

次のとおりです

  // console.log(arguments) // ReferenceError: 引数が定義されていません
  console.log(args) // args は配列です}

foo

（1、2、3、4）// [1、2、3、4]

ES2015の関数に追加された属性は

、サンプルコードが次のとおりです

{
  リターンv
}
const bar = v => v
console.log(foo.name) // foo
console.log（bar.name）// bar

値

の拡張は、主にMathとNumberオブジェクトにいくつかの方法を追加します。

ES2015では、 0bまたは0Bがバイナリを表すために使用され、 0oまたは0O OCTALを表すために使用されます。

サンプルコードは次のとおりです。console.log

（0b111111111 === 511）// true
console.log（0o777 === 511）//

属性とメソッドは、項目で拡張された属性とメソッドは次のとおりです。

メソッド

ます

。テンプレート文字列はフォーマットを保持し、変数を使用できます。

サンプル コードは次のとおりです。

// ` を使用してテンプレート文字列を定義します let str = `a Bowl of months`
// テンプレート文字列は形式 let str2 = `週のボウル` を保持できます
// テンプレート文字列には変数 const myName = 'A Bowl of months' を使用できます
let str3 = `著者：$ {myname}` // $ {}を使用してES2015をラップして

に文字列および文字列インスタンスのメソッドも拡張します。

元

。カンマで区切ると

サンプルコードは以下のようになります:

const arr = [1, 2, 3, 4, 5, 6]
const newarr = [... arr] //配列console.log（math.max.call（null、... arr））//配列の各アイテムを

配列と配列

、 Array.from()を

1

つずつ導入します

  return array.from（引数）//引数を配列に変換}

console.log（foo（1、2、3、4、5、6））// [1、2、3、4、5、6]

Array.of() ：さまざまな数の引数を持つ新しい配列を作成しますたとえば、サンプルコードは次のとおりです。Array.of

（1）// [1]
array.of（true、1、 'a bowl of Weeke'）// [true、1、 'a bowl of Weeke']

array.prototype.copywithin（）は、アレイの一部を同じ配列の別の場所に浅くコピーします、そしてそれを返すことは、元の配列の長さを変えません。

サンプルコードは次のとおりです。const

arr = [1、2、3、4]

// インデックス 2 から開始し、最後にコンテンツをインデックス 0 にコピーします arr.copyWithin(0, 2) // [ 3, 4, 3, 4 ]

Array.prototype.find() 、指定されたコールバック関数に従って、最初の一致する要素を見つけ、サンプルコードが次のとおりである場合は未定義です

。
arr.find(item => item === 2) // 2 (要素を示す)、

Array.prototype.findIndex() 、指定されたコールバック関数に従って、最初に一致する要素のインデックスを検索し、見つからない場合は返します - 1 、サンプルコードは次のとおりです。const

arr = [1、2、3、4]
arr.findindex（item => item === 2）// 1（indexを示します）

array.prototype.fill

Array.prototype.fill() 、配列を次のように記入します。

、3、4]
// インデックス 1 ～ 3 に指定された値を入力します
arr.fill（ 'A Bowl of Weeks'、1、3）// [1、 'A Bowl of Weeks'、 'A Bowl of Weeke'、4]

Array.prototype.keys()は、内容のある反復可能なオブジェクトを返します。アレイの鍵です。サンプルコードは次のとおりです。constarr

= [1、true、 'a bowl of Weeke']]
const キー = arr.keys()
for（キーのconst i）{
  console.log(i) // トラバーサル結果 0 1 2
}

Array.prototype.values() 、サンプル

コード

が次のとおりです

const 値 = arr.values()
for (値の定数 i) {
  console.log（i）//トラバーサル結果1 True of Weeke}

Array.prototype.entries() 、コンテンツが元の配列の要素0あり、 1が要素である反復性オブジェクトを返します。元の配列の位置の値。

サンプルコードは次のとおりです

。

const iterator = arr.entries()
console.log（array.from（iterator））// [[0、1]、[1、true]、[2、 'a bowl of Weeke']]

オブジェクトの拡張

により、オブジェクトの属性名と属性値の一貫性を保つには、属性名を記述するだけです。

サンプルコードは次のとおりです。

const myName = 'A Bowl of months'
定数年齢 = 18
const person = { myName, age }
console.log(person) // { myName: 'A Bowl of Zhou', age: 18 }

さらに、オブジェクトを定義するときに、属性名として [] で囲まれた式を使用できます。サンプル コードは次のとおりです。

const myName = 'ボウル週'
定数年齢 = 18
const person = {
  私の名前、
  ['a' + 'g' + 'e']: 年齢、
}
console.log（person）// {myname： 'one bowl zhou'、age：18}

Object.is() ：2つの値が等しいかどうかを比較するために使用され、nan≠= nan、+0を解くために使用されます==== -0問題、

サンプルコードは次のとおりです：

console.log（nan === nan）// false
console.log(+0 === -0) // true

console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(+0, -0)) // false

Object.assign() : 1 つ以上のソース オブジェクトからターゲット オブジェクトにすべての列挙可能なプロパティの値をコピーし、ターゲット オブジェクトを返します。

例コードは次のとおりです：

const person = object.Assign（{}、{name： 'One Bowl Zhou'}、{age：18}）
console.log(person) // { name: 'One Bowl Zhou', age: 18 }

• Object.getPrototypeOf() :プロトタイプ オブジェクトを取得します;
• Object.setPrototypeOf() :プロトタイプ オブジェクトを設定します。

クラスは、

ES2015でクラスの概念を提案し、クラスはサンプルコードの次のとおりです

。
  コンストラクター(年齢) {
    //属性this.myname = '週のボウル' '
    this.age = 年齢
  }
  // staticメソッドstatic print（）{
    console.log()
  }
  // アクセサー get myName() {
    console.log（ 'getter'）
    「数週間のボウル」を返します
  }
  myname（v）を設定{
    console.log('setter' + v)
  }
  setName（v）{
    this.myname = v
  }
}
const person = new Person（18）
perse.setname（ 'Ywanzhou'）//セットアクセサのコンソール（person.myname）//ゲッターアクセサの

トリガー

ES2015で提案されています

仕様

、

モジュールをエクスポートしてインポートしてモジュールを導入することができます。

'm' //モジュールMでデフォルトエクスポートをインポートし、メンバーbを個別にインポートするa、{b}をインポートします
as as as as as as as as as as as as module in the module inport 'm' // moduleエクスポートconst b = 1 //エクスポートデフォルトb //デフォルトエクスポート{b} //エクスポートオンデマンドオンデマンド{b as bb} //モジュールMでメンバーBをインポートし、

破壊的な割り当てのための新しい構文を追加して、

。

アレイまたはオブジェクトから指定された値を抽出し

ます

。

Zhou '、18]
// 2つの変数の値を交換a = 1
b = 2とします
; [a、b] = [b、a]
console.log（a、b）// 2 1

//オブジェクト構造の割り当てlet {name：objname/*破壊割り当ての名前変更*/、sex} = {name： 'a bowl of weeks'、sex：1}

//関数パラメーターの割り当て機能bar（{name、age}）{
  返品名 +年齢
}
bar（{name： 'a bowl of Weeks'、age：18}）//週のボウル18

シンボル

Symbol() 、ES2015で作成され、文字列を渡すことができます。

シンボル（）メソッドを介して作成されたシンボル値

を

記述するために使用されます

 *構文 *シンボル（[説明]）
 * *説明 - >はオプションの説明情報です */
//タイプシンボルの値を作成const mysymbol = symbol（）
console.log(mySymbol) // Symbol()

const myName = Symbol('数週間分のボウル')
console.log（typeof myname）//シンボルシンボルには、

ここには紹介されない一連のプロパティとメソッドもあります。

Promise

Promiseは、ES2015で提供される非同期ソリューションであり、コールバックHellの問題を解決します。

Promise ObjectはPromise()コンストラクターを介して作成できます

• 。
• 解決：操作が正常に完了したことを意味します。
• 拒否：操作が失敗したことを意味します。

• pending→resolved
• pending→resolved

の 2 種類しかありません

。一度状態が変化すると

Promise then Promiseで呼び出しを連鎖させることができます。

、下の図に示すように

then Promiseインスタンスも返されます

サンプルコードは次のとおりです。

新しい約束（（Resolve、拒否）=> {
    console.log（「私は最初の約束のログです」）
    解決する（）
})
    .then(() => {
        console.log（ '私は最初のログのログです'）
    })
    .then(() => {
        console.log（ '私は2番目のログのログですが、例外があります」）
        新しいエラー（「エラー」）を投げる
    })
    .then(() => {
        console.log（ '私は3番目の最初のコールバックのログですが、例外が私の上に発生したために実行しません」）
    }、（）=> {
        console.log（ '私は3番目の2番目のコールバックのログです。それを実行しました」）
    })
    .then(() => {
        console.log（ '私は4番目のログです。そのとき、私は正常に実行できます」）
    })

/*実行結果は次のとおりです。私は最初の約束のログです
私は最初にログです

です

が、3番目のコールバックのログです

Promise のメソッドは次のとおりです。

• Promise.prototype.then() : Promise の成功と失敗のコールバック関数、
Promise.prototype.catch() :
• Promise.all()
• Promise.prototype.catch() then 2 番目のパラメーターと同じです。
• Promise.all() ：複数のインスタンスを新しいインスタンスにパックし、すべてのインスタンスステータスの変更後に結果配列を返します（すべての変更を変更してから戻ります）
• Promise.race() ：複数のインスタンスを新しいインスタンスにパックし、すべてのインスタンスステータスを返します。結果（最初に最初に変更して最初に戻る）
• Promise.resolve() ：オブジェクトを約束のオブジェクトに変換する（ new Promise(resolve => resolve()) ）
• Promise.reject() ：オブジェクトをrejectedの状態に変換しますPromise Object new Promise((resolve, reject) => reject()) ）

Iterator

Iteratorは、さまざまなデータ構造の統一されたアクセスメカニズムを提供するインターフェースです構造は反復インターフェイスを展開し、統一された方法で通過できます。

繰り返し可能なインターフェイスを実装するデータ構造は、一般にそれ自体を実装するか、 Symbol.iterator属性を継承します。これは反復可能なオブジェクトです。 Symbol.iteratorプロパティ自体は関数であり、現在のデータ構造のデフォルトのイテレーター生成関数です。

next()メソッドを含むオブジェクトは、反復可能なオブジェクトと呼ぶことができます。

次のように

next()つの値を含むオブジェクトを返します

• value ：Iteratorによって返されるJavaScript値。 true doneたら省略できます。
• done ：ブール値がfalse trueいる場合、反復value停止していないことを意味します。

JavaScriptによってネイティブに提供されたイテレーターインターフェイスを以下の図に示します。

次に、OBJのイテレーターを実装します。コードは次のとおりです。const

obj = {
    [symbol.iterator]（）{
        戻る {
            次 （） {
                console.log（ 'iterator exected'）;
                戻る {
                    価値： ''、
                    完了：true //フラグが終わったかどうか、真はそれが終わったことを意味します}
            }
        }
    }
}

next()メソッドを追加して、最終的なランニング結果は、

ジェネレーター

非同期

プログラミングソリューションですfunctionキーワードは、関数名と関数名の間に*アスタリスクを使用し、関数内のyieldキーワードを使用して異なる状態を定義します。

サンプルコードは次のとおりです。

関数* testgenerator（）{
  //降伏状態を定義します「数週間のボウル」
  「ESNEW機能」を獲得する
  「ジェネレーター」を返す//ジェネレーターを終了しますが、後で収量キーワードがあっても、無効になります}
const g = testgenerator（）//ジェネレーターオブジェクトを返し、次の（）メソッドg.next（）を介して状態を移動します
/* { 値: '周の一杯'、完了: false } */

g.next（）
/ * {value： 'es new Feature'、done：false} */

g.next（）
/ * {value： 'generator'、done：true} */

プロキシ

があります。

プロキシ

Proxy Proxy使用を示しています。

<html lang="ja">
<頭>
  <meta charset="UTF-8" />
  <Meta http-equiv = "x-ua-compatible" content = "ie = edge" />
  <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" />
  <title> set </title>を介してDOMを自動的に更新します
</head>

<本文>
  <p class = "card" style = "width：300px; margin：100px auto">
    <p class = "card-body">
      <h1 id = "name"> </h1>
      <button id = "btn" class = "btn btn-primary"> modify </button>
    </p>
  </p>
  <スクリプト>
    // get dom node const name = document.getElementbyid（ 'name'）
    const btn = document.getElementById（ 'btn'）
    //値const updatedom =（el、value）=> {を変更する関数を定義します
      el.innerhtml = value
    }
    const person = new Proxy（{
      名前：「おridgeのボウル」、
    }、{
      set（Target、Propkey、Value）{
        //内部の値が変更された場合は、更新に電話してください
        updatedom（名前、値）
        ターゲット[PropKey] =値
        trueを返す
      }、
    })
    name.innerhtml = person.name
    //ボタンをクリックして、変更操作をトリガーbtn.addeventlistener（ 'click'、（）=> {
      person.name === 'Zhouのボウル'？
        （person.name = 'ポリッジのボウル'）：
        （person.name = 'ワンボウルZhou'）
    })
  </script>
</body>
</html>

上記のコードは、データバインディングに設定された方法を使用します。

Reflectは、ECMAScript2015 handlers提供されるオブジェクトです。

反射はコンストラクターではありません。つまり、インスタンス化することはできません。

Proxyオブジェクト（たとえば、 get 、 deleteなど）での各インターセプト操作は、それに応じてReflect法を内部的に呼び出します。

次のように、

それが提供する静的メソッドは、プロキシのhandlersのメソッド名と一致しています。

SET、MAP、WEALDSET、WEALD

Set Map 、 WeakSet 、およびWeakMap

任意

• Set WeakSet Set WeakSet保存できることです

を

次のとおりです。

const set = new set（arr）
//セットオブジェクトを使用できます...すべてのアイテムconsole.log（[... set]））// [1、2、3、4、5]

• MapとWeakMapオブジェクトに似ており、で保存されますキー価値のペアの形式はい、2つの違いは、 Mapのキー価値のペアが任意である可能性があるのに対し、 WeakMapのキーはオブジェクトへの参照であり、値は任意のタイプであることです。

ES2016 (ES7)

ES2016 では、次の図に示すように、比較的少数の新機能がリリースされ、主に 2 つの新機能がリリースされます。

Exponent Operator

には

、

電力演算子とも呼ばれる新しい指数**があります。

（2、10）// true

array.prototype.includes（）メソッドは、

eS2016

の配列プロトタイプにincludes()メソッドを追加します

サンプルコードは次のとおりです:

const arr = [1, 2, 3, 4, 5, NaN]
console.log（arr.indexof（nan））// -1
console.log(arr.includes(NaN)) // true

includes()使用する場合、 NaNとNaN 、 +0と-0が等しいことに注意してください。

ES2017（ES8）

Async/await syntax Sugar

Promiseの出現は、コールバックヘルの問題を解決しますが、チェーンコールが多すぎると、読みやすさがさらに悪化します。

Promise は次のように記述します:

;(function () {
  関数の約束（v）{
    return new Promise((解決、拒否) => {
      解決（v）
    })
  }
  const p = promise（1）
  p.then（res => {
    Return Promise（res）
  }）。それから（res => {
    console.log（res）
  })
}）（）

次の約束が前のものに依存している場合、この呼び出しチェーンは非常に長くなります

。
  関数の約束（v）{
    return new Promise((解決、拒否) => {
      解決（v）
    })
  }
  const r1 =約束を待つ（1）
  const r2 =待望の約束（R1）
  const res =待望の約束（R2）
  console.log（res）
}）（）

ご覧のとおり、Async/Wait syntactic Sugarを使用して、フラットライティング方法に約束を書き直すことができます。

Atomics

、この

newを操作するための一連の静的メソッドを提供し

ます

次のように、ES2017のオブジェクト用に拡張されます

。Object.Values（）
• Object.entries()特定の
• Object.values()自体のすべての列挙可能なプロパティ値の配列を返します。
• オブジェクト自体
• Object.getOwnPropertyDescriptors()

関数拡張により

、この小さな機能の最後にコンマを追加できます。 2行のコードを変更する必要があります。

例コードは次のとおりです

。
  aaaaa、
  bbbbb、
  CCCCC、
）{}

後続のコンマがある場合、最後にラインを追加する必要があります。これにより、バージョン管理の2行は1つではなく変更されます。

文字列拡張は、

• padEnd()
• padStart()

2

つ

の新しいインスタンスメソッドを追加します

= '周のボウル'
console.log（str.padstart（10）） /* Zhouのボウル* /
console.log（str.padend（10）） /* yiwan zhou* /

es2018（es9）

非同期反復

にはfor await...of新しい声明があり

ます

。
  [Symbol.asyncIterator]() {
    戻る {
      I：0、
      次（） {
        if（this.i <3）{
          Return Promise.Resolve（{value：this.i ++、done：false}）
        }

        return Promise.resolve({ 完了: true })
      }、
    }
  }、
}
;（async function（）{
  待っている（非控えめな）{
    console.log（num）
  }
})()

// 0
// 1
//

正規表現拡張機能は

表現の命名

に基づいています。ES2018

の前に、この機能はES2018で紹介できませんでした参照、

サンプルコードは次のとおりです。constRe_date

= /（？<Year>  d {4}） - （？<month>  d {2}） - （？<day>  d {2}） /

const matchobj = re_date.exec（ '2022-02-22'）
const year = matchobj.groups.year // 2022
const month = matchobj.groups.month // 02
const day = matchobj.groups.day // 22

sモディファイs /ドットールモード：新しいSモディファイアは、任意の単一の文字と一致します. 。

逆のアサーション： ES2018より前には前方アサーションのみが存在し、逆アサーションと逆否定的なアサーションがES2018に追加されました。

オブジェクトスプレッド

ES2018では、新しい配列スプレッドオペレーターが追加されました。この機能は次のとおりです

。
const a = {age：18}
const person = {... n、... a}
// Object console.log（person）// {name： 'A bowl of Zhou'、age：18}

prototype.finally（）

finally()メソッドはPromiseの状態を返します変更は、 rejectedたりfulfilledたりするかどうかにかかわらず、 finally()コールバックが実行されます。

サンプルコードは次のとおりです。Fetch

（url）
  .then（res => {
    console.log（res）
  })
  .catch(エラー => {
    console.log（エラー）
  })
  .finally（（）=> {
    console.log（ 'end'）
  }）

ES2019（ES10）

最適化は、

ES2019で次の2つの内容を最適化しています

• Function.prototype.toString() ：returned functionボディにはコメントとスペースが含ま
• try...catch catchい

ます{
  console.log（ '週のボウル'）
} キャッチ {
  console.error（ '週のボウル'）
}

trimstart（）/trimleft（）およびtrimend（）/trimright（）

string.prototype.trimstart
• trimStart String.prototype.trimLeft
• String.prototype.trimStartスペースを削除するために使用されます
• String.prototype.trimEnd : 使用される文字列の右側のスペースを削除します。
• String.prototype.trimRight : これtrimEnd

の

配列メソッドです。

• Array.prototype.flat() : これメソッドは、指定されたアレイを深く再帰的に通過し、すべての要素をトラバースアレイの要素と新しい配列に融合し、単にそれを返します。

const arr = [0、1、2、[3、4]]
console.log（arr.flat（））// [0、1、2、3、4]

• Array.prototype.flatMap() ：このメソッドは配列をマップしてフラット化し、新しい配列を返します（1つのレベルの配列のみができます。拡張）。

object.fromentries（）

（

、

Object.fromEntries() Object.entries()のペアをオブジェクトに変換します

= {
  名前：「Zhouのボウル」、
  年齢： '18'、
}
const e = object.entries（人）

const p = object.fromentries（e）
console.log（p）// {name： 'a bowl of weys'、age： '18'}

symbol.prototype.descrption

description 、シンボルオブジェクトを作成するときにオプションの説明文字列を返す読み取り専用プロパティです。

ES2020（ES11）

モジュール化は、

ES2020

で動的なインポートを追加します。これは、必要なときにモジュールがロードされることを意味します。

次に（モジュール=> {
  //モジュールで何かをします。
}）

Dynamic Importは、約束を返すimport()メソッドを使用します。

ES2020では、 metaオブジェクトもimportに追加され、コンテキスト固有のメタデータ属性のオブジェクトをJavaScriptモジュールに公開します。

BIGINTデータ型

、JavaScriptで許可された最大数がBigInt 2**53-1であるという問題を解決します。

const thebiggestint = 9007199254740991n;
const nogehuge = bigint（9007199254740991）;
//↪9007199254740991N
const ugestring = bigint（ "900719254740991"）;
//↪9007199254740991N
const gagehex = bigint（ "0x1fffffffffffff"）;
//↪9007199254740991N
const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// 9007199254740991N

グローバルなオブジェクトは、

ノードのGlobal globalThisの導入であり、ブラウザ環境がWindowのGlobalThisを示しています

。 var getGlobal = function（）{ 
  if (typeof self !== '未定義') { return self } 
  if (ウィンドウの種類 !== '未定義') { ウィンドウを返す } 
  if（typeof global！== 'undefined'）{return global; 
  新しいエラーをスローします（「グローバルオブジェクトを見つけることができません」）; 
}; 

var globals = getGlobal（）; 

if（typeof globals.settimeout！== 'function'）{ 
  //この環境には入植がありません！ 
}

// affery（typeof globalthis.settimeout！== 'function'）{
  //この環境には入植がありません！
}

null値coulescingオペレーターは

、2つの疑問符で表現されています。計算ルールは、左のオペランドがnullまたはundefinedある限り、右オペランドが返されることです。そうしないと、左オペランドが返されます。論理または演算子は、左のオペランドがbooleanタイプに変換され、 false場合にのみ右オペランドを返します。

サンプルコードは次のとおりです：

console.log（null ?? 10）// 10
console.log（未定義?? 10）// 10
console.log（false ?? 10）//

の

ない変数に値を割り当てるのに役立ちます

コードは次のとおりです：

var値

//値の値がnullまたは未定義でない場合は、10の値を割り当てます
値=値??
console.log（value）// 10itは、

()値の合体オペレーターと論理的かつ論理的なものであるか、同時に使用できないことに注意してください。

オプションのチェーン演算子は、

オブジェクトのチェーンを使用する属性の値を読み取るために使用されます属性Aab 、まずA存在することを確認する必要があります。次に、 Aabにアクセスする前にAa確認する必要があります。

オプションのチェーンオペレーターを使用しても、そのような問題が発生しません。1つが存在しない限り、 undefind返され、エラーは報告されません。

var a = {}

// console.log（aab）//エラーConsole.log（aa？.b）//未定義の

オプションチェーン演算子は、サンプルコードの下のメソッドを呼び出すこともできます

。

// obj.fun（）メソッドが存在する場合、それが存在しない場合、未定義が返されます。
obj.fun?.a（）

promise.allsettled（）

Promise.allSettled()メソッドは、すべてのオブジェクトが対応する約束を表すオブジェクトの配列で、約束が解決または拒否された後、約束を返します。

ES2021（ES12）

string.prototype.ReplaceAll（）

replaceAll()のメソッドは、新しい文字列のコンテンツが次のようになります

。
const newtr = str.replaceall（ 'porridge'、 'week'））
console.log（newtr）//数値セパレーター（_）は

、

その

_を読みやすくします

1_0000_0000

）//シンボル1000000は

WeakRef

読み取り

のためにのみ影響します。

別のオブジェクトへの参照。

promise.any（）

eS2021のPromise.any()メソッドは、 Promise.any() promise.all()と同じパラメーターを受け入れます（つまり、すべての約束が失敗/拒否されます）、失敗した約束、および集計エラータイプのインスタンスが返されます。

論理割り当て演算子

は

• ||=
• &&=
• ??=

されています

。

] = [true、false]
f1 && = '週のボウル' // str = str && 'a bowl of Weeke'に相当
f2 || = '週のボウル' // str = str ||
f3 ?? = '週のボウル' // str = str ?? '

eS2022

クラスの拡張により

、SAMPLEコードは次のとおりconstructor

。
  myname = 'Zhouのボウル'
}
/*両方とも一貫性があります*/
クラスC {
  コンストラクター() {
    myname = 'Zhouのボウル'
  }
}

メンバーが初期化なしで宣言されている場合、そのデフォルト値は未定義です。

サンプルコード

class c {

#使用するという名前の変数を使用できます。

  #myname = '1つのボウルウィーク'
}
const c = new C（）

、ES2022で

await

れたクラスで宣言する必要があります

「モジュール」からのインポート{asyncfun}の

asyncコードを使用せずにトップレベル

waitasyncfun（）
console.log（123）

object.hasown（）object.hasown

Object.hasOwn()メソッドは、サンプルコードが次のとおりであるかどうかを判断するために使用されます

。
  名前：「Zhouのボウル」、
  年齢：18歳、
}
console.log（object.hasown（person、 'name'））// true
console.log（object.hasown（person、 'sex'））// false

array.prototype.at（）

eS2022の新しいat()メソッド、その機能は配列のメンバーを取得することであり、そのパラメーターはインデックスですインデックスを直接使用することとは異なります。これは、サンプルコードが次のようになります

。 6]
console.log（arr.at（-1））// 6
// arr.length -1]

d修飾子

exec()表現は、a /dモディファイアを使用する場合、A /dモディファイアがある場合、結果はより多くのインデックスを返します。属性は、元の文字列で一致する結果の開始インデックス値を示すために使用されます。

サンプルコードは次のとおりです：

const str = 'javascript'
const r = /a /d

const m = r.exec（str）
console.log（m.indices [0] // [1、2]

た

。

マインドマップは次のとおりです。