JS構文の新機能ES6、ES7、ES8、ES9、ES10、ES11、ES12

新機能

ES6（2015）

1. クラス

class Man { コンストラクタ（名前）{ this.name = '小豪'; } console（）{ console.log（this.name）; } } const man = new Man（ '小豪'）; man.console（） ; // Xiaohao

2. ESモジュール

//モジュールAはメソッドを
エクスポートしますexportconst sub =（a、b）=> a + b;
//モジュールBは
import {sub} from './ A';
console.log（sub（1、2））を使用してインポートされます）; // 3

3. 矢印機能

const func =（a、b）=> a + b;
func（1、2）; // 3

4. 関数パラメーターのデフォルト値

function foo（age = 25、）{//…}

5. テンプレート文字列

const name = '小豪';
const str = Your name is ${name};

6. 破壊的な割り当て

a = 1、b = 2とします。
[a、b] = [b、a]; // a 2 b 1

7. スプレッド演算子

let a = [… 'hello world']; // ["こんにちは世界"]

8. オブジェクトプロパティの省略形

const name = '小豪'、
const obj = {name};

9. 約束する

Promise.resolve（）。then（（）=> {console.log（2）;}）;
console.log（1）;
//最初に1を出力し、次に2を出力します

10. letとconst

名前= '小豪';
const arr = [];

ES7（2016）

1. Array.prototype.includes（）

[1] .includes（1）; // true

2. 指数演算子

2 ** 10; // 1024

ES8（2017

1. 非同期/待機

非同期の究極のソリューション

async getData（）{ const res = await api.getTableData（）; //异0015任务を待つ//何かをする}

2. Object.values（）

Object.values（{a：1、b：2、c：3}）; // [1、2、3]

3. Object.entries（）

Object.entries（{a：1、b：2、c：3}）; // [[“ a”、1]、[“ b”、2]、[“ c”、3]]

4. 文字列のパディング

// padStart'hello
'.padStart（10）; // "hello"
//
padEnd'hello'.padEnd（10） "hello"

5. 関数パラメーターリストの最後でコンマを使用できます

6. Object.getOwnPropertyDescriptors（）

オブジェクト自体の属性のすべての記述子を取得します。独自の属性がない場合は、空のオブジェクトを返します。

7. SharedArrayBuffer

SharedArrayBufferオブジェクトは、ユニバーサルな固定長の生のバイナリデータバッファを表すために使用されます。

/ **
*

• @param {*} length作成された配列バッファーのサイズ（バイト単位）。
• @returns {SharedArrayBuffer}指定されたサイズの新しいSharedArrayBufferオブジェクト。その内容は0に初期化されます。
  * /
  new SharedArrayBuffer（10）

8. アトミックオブジェクト

Atomicsオブジェクトは、SharedArrayBufferオブジェクトに対してアトミック操作を実行するための一連の静的メソッドを提供します。

ES9（2018）

1. 非同期反復

awaitをfor ... ofループとともに使用して、非同期操作をシリアルに実行できます。

async function process（array）{ for await（let i of array）{ // doSomething（i）; } }

2. Promise.finally（）

Promise.resolve（）。then（）。catch（e => e）.finally（）;

3. Rest / Spreadプロパティ

const値= [1、2、3、5、6];
console.log（Math.max（…values））; // 6

4. キャプチャグループという正規表現

const reg = /（？[0-9] {4}）-（？[0-9] {2}）-（？[0-9] {2}）/;
const match = reg.exec（ '2021-02-23'）;

画像

5. 正規表現の逆アサーション

（？= p）、（？<= p）p（位置）の前、p（位置）の後
（？！p）、（？<！p>）p（位置）の前を除いて、p（位置）の後を除く

（？<= w）

画像

（？<！w）

画像

6. 正規表現dotAllモード

正規表現の中点。キャリッジリターンを除く任意の1文字に一致します。マークsはこの動作を変更し、ラインターミネータの出現を許可します。

/hello.world/.test('hello\nworld '）; // false

画像

ES10（2019）

1. Array.flat（）和Array.flatMap（）

平らな（）

[1、2、[3、4]]。flat（Infinity）; // [1、2、3、4]

flatMap（）

[1、2、3、4] .flatMap（a => [a ** 2]）; // [1、4、9、16]

2. String.trimStart（）和String.trimEnd（）

文字列の最初と最後の空白文字を削除します

3. String.prototype.matchAll

matchAll（）は、一致したすべての一致オブジェクトのイテレータを返します

const raw_arr = 'test1 test2 test3'.matchAll（（/ t（e）（st（\ d？））/ g））;
const arr = […raw_arr];

4. Symbol.prototype.description

Symbolオブジェクトのオプションの説明文字列を返す読み取り専用属性。

Symbol（ 'description'）。description; // '説明'

5. Object.fromEntries（）

指定されたオブジェクト自体の列挙可能なプロパティのキーと値のペアの配列を返します

// Object.fromEntriesを使用して、MapをObjectに変換できます。constmap
= new Map（[['foo'、 'bar']、['baz'、42]]）;
console.log（Object.fromEntries（map ））; // {foo：“ bar”、baz：42}

6. オプションのキャッチ

ES11（2020）

1. ヌル合体演算子（ヌル値処理）

式の左側の演算子は、未定義またはnullと評価され、右側を返します。

let user = { u1：0、u2：false、u3 ：null、u4：undefined u5： ''、} let u2 = user.u2 ?? 'ユーザー2' // false let u3 = user.u3 ?? 'ユーザー3 '//ユーザー3let u4 = user.u4 ??'ユーザー4 '//ユーザー4let u5 = user.u5 ??'ユーザー5 '//' '

2. オプションのチェーン

？。ユーザー検出が不確実な中間ノード

let user = {}
let u1 = user.childer.name // TypeError：未定義のプロパティ 'name'を
読み取れませんletu1 = user.childer？.name // undefined

3. Promise.allSettled

指定されたすべてのPromiseが解決または拒否された後に解決されるPromiseを、それぞれが対応するPromiseの結果を表すオブジェクトの配列とともに返します。

const promise1 = Promise.resolve（3）;
const promise2 = 42;
const promise3 = new Promise（（resolve、reject）=> require（ '我是失败的Promise_1'））;
const promise4 = new Promise（（resolve、reject）=> require（ '我是失败的Promise_2'））;
const promiseList = [promise1、promise2、promise3、promise4]
Promise.allSettled（promiseList）
.then（values => { console.log（values）}）;

画像

4. インポート（）

オンデマンドでインポート

5. 新しい基本データ型BigInt

任意精度の整数

6. globalThis

ブラウザ：ウィンドウ
ワーカー：セルフ
ノード：グローバル

ES12（2021）

1. replaceAll

真新しい文字列を返すと、一致ルールを満たすすべての文字が置き換えられます

const str = 'hello world';
str.replaceAll（ 'l'、 ''）; //「ホワード」

2. Promise.any

Promise.any（）は、Promiseの反復可能オブジェクトを受け取ります。promiseの1つが成功する限り、成功したPromiseを返します。反復可能オブジェクトのプロミスのいずれも成功しない場合（つまり、すべてのプロミスが失敗/拒否）、失敗したプロミスを返します

const promise1 = new Promise（（resolve、reject）=>
require （ 'I am a failed Promise_1 '））; const promise2 = new Promise（（resolve、reject）=> require（ 'I am a failed Promise_2'））;
const promiseList = [promise1、promise2];
Promise.any（promiseList）
.then（values => { console.log（values）; }）。catch（e => { console.log（e）; }）;

画像

3. WeakRefs

WeakRefsのClassクラスを使用して、オブジェクトへの弱い参照を作成します（オブジェクトへの弱い参照は、オブジェクトがGCによって収集される必要があるときに、GCの収集動作を妨げないことを意味します）

4. 論理演算子と代入式

論理演算子と代入式、新機能は論理演算子（&&、||、??）と代入式を組み合わせたものです。JavaScriptの既存の複合代入演算子は次のとおりです。

a ||= b
//等价于
a = a || (a = b)

a && = b
//等价応
a = a &&（a = b）

a ??= b
//等价于
a = a ?? (a = b)

5. 数字の区切り文字

数字の区切り文字。数字の間に視覚的な区切り文字を作成し、_underscoresを使用して数字を区切り、数字を読みやすくすることができます。

const money = 1_000_000_000;
//
const money = 1000000000と同等;

1_000_000_000 === 1000000000; // true

写真
❤️爱心