一、ECMAScript簡(jiǎn)介

ECMAScript是一種由Ecma國(guó)際（前身為歐洲計(jì)算機(jī)制造商協(xié)會(huì)，European Computer Manufacturers Association）通過ECMA-262標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語(yǔ)言。這種語(yǔ)言在萬(wàn)維網(wǎng)上應(yīng)用廣泛，它往往被稱為JavaScript或JScript，所以它可以理解為是JavaScript的一個(gè)標(biāo)準(zhǔn)，但實(shí)際上后兩者是ECMA-262標(biāo)準(zhǔn)的實(shí)現(xiàn)和擴(kuò)展。

二、ES6 (ES2015)

1. Class

2. 模塊化語(yǔ)法（import、export）

3. 箭頭函數(shù) () => {…}，是函數(shù)的縮寫。

4. 函數(shù)參數(shù)默認(rèn)值

function fn(x,y='World') {
   console.log(x, y);
}

5. 模板字面量
   之前實(shí)現(xiàn)中，長(zhǎng)字符串的組合是通過 + 號(hào)來連接的。
   它的可讀性很差，使用模板字符串，它更容易閱讀。

6. 解構(gòu)賦值
   允許 JavaScript 輕松地從數(shù)組和對(duì)象中獲取內(nèi)容。

7. 擴(kuò)展運(yùn)算符
   它是用三點(diǎn)（...)表示，Array是可以擴(kuò)展的，如果是Object，會(huì)按照key-value進(jìn)行擴(kuò)展。

8. 對(duì)象屬性簡(jiǎn)寫
   如果構(gòu)成對(duì)象的字段名稱與前面段落中的變量相同，則可以省略該值，看起來更流線型。

9. Promise
Promise 是一種異步（非同步）寫法的解決方案，比原來的回調(diào)寫法更加優(yōu)雅。ES8（ES2017）發(fā)布了更完美的async，await，直接讓異步寫得像同步一樣。缺點(diǎn)是當(dāng)思路落到復(fù)雜的業(yè)務(wù)邏輯上時(shí)，有時(shí)會(huì)錯(cuò)過await，在運(yùn)行時(shí)發(fā)生錯(cuò)誤。

10. let, const 替換 var

• let：通用變量，可以被覆蓋。
• const：一旦聲明，其內(nèi)容不可修改。因?yàn)閿?shù)組和對(duì)象都是指針，所以它們的內(nèi)容可以增加或減少, 但不改變其指針。

早期，JavaScript的var作用域是全局的。也就是說，var變量是在使用后聲明的，執(zhí)行的時(shí)候會(huì)自動(dòng)提到頂層，后面會(huì)賦值。
更容易受到污染。

三、ES7 (ES2016)

1. Array.prototype.includes()
   用于判斷數(shù)組是否包含指定值，如果是，則返回true；否則，返回假。和之前indexOf的用法一樣，可以認(rèn)為是返回一個(gè)布爾值，語(yǔ)義上更加清晰。
2. 冪運(yùn)算符 console.log(2**10); // 1024

四、ES8 (ES2017)

1. async, await
   異步函數(shù)是使用 async 關(guān)鍵字聲明的函數(shù)，并且允許在其中使用 await 關(guān)鍵字。async 和 await 關(guān)鍵字使異步的、基于 Promise 的行為能夠以更簡(jiǎn)潔的方式編寫，避免了顯式配置 Promise 鏈的需要。

2. Object.values()
   返回對(duì)象自身屬性的所有值，不包括繼承的值。

3. Object.entries()
   返回可枚舉鍵，即傳入對(duì)象本身的值。

4. 字符串 padStart() & padEnd()
   你可以在字符串的開頭或結(jié)尾添加其他內(nèi)容，并將其填充到指定的長(zhǎng)度。
   過去，這些功能通常是通過通用的輔助工具包（如 lodash）引入的，并將它們放在一起。

5. 尾隨逗號(hào)
   允許在函數(shù)參數(shù)列表末尾使用逗號(hào)。

6. Object.getOwnPropertyDescriptors()
   獲取你自己的描述符，一般的開發(fā)業(yè)務(wù)需求通常不會(huì)用到。

7. 共享數(shù)組緩沖區(qū)
   SharedArrayBuffer 是一個(gè)固定長(zhǎng)度的原始二進(jìn)制數(shù)據(jù)緩沖區(qū)，類似于 ArrayBuffer。
   可用于在共享內(nèi)存上創(chuàng)建數(shù)據(jù)。與 ArrayBuffer 不同，SharedArrayBuffer 不能分離。

8. Atomics object
   Atomics 對(duì)象，它提供了一組靜態(tài)方法來對(duì) SharedArrayBuffer 執(zhí)行原子操作。原子的所有屬性和函數(shù)都是靜態(tài)的。

如果一個(gè)多線程同時(shí)在同一個(gè)位置讀寫數(shù)據(jù)，原子操作保證了正在操作的數(shù)據(jù)如預(yù)期的那樣：即在上一個(gè)子操作結(jié)束后執(zhí)行下一個(gè)，操作不中斷?？梢哉f是針對(duì)Node.Js中多線程Server的開發(fā)而加強(qiáng)的功能，在前端開發(fā)中使用的機(jī)會(huì)相當(dāng)?shù)?。chrome 已經(jīng)提供了支持。

五、ES9 (ES2018)

1. 循環(huán)等待
   在異步函數(shù)中，有時(shí)需要在同步 for 循環(huán)中使用異步（非同步）函數(shù)。

async function process(array) {
  for (const i of array) {
    await doSomething(i);
  }
}

async function process(array) {
  array.forEach(async i => {
    await doSomething(i);
  });
}

上面的代碼不會(huì)像預(yù)期的那樣輸出期望的結(jié)果。

for循環(huán)本身還是同步的，會(huì)在循環(huán)中的異步函數(shù)完成之前執(zhí)行整個(gè)for循環(huán)，然后將里面的異步函數(shù)逐一執(zhí)行。

ES9 增加了異步迭代器，允許 await 與 for 循環(huán)一起使用，逐步執(zhí)行異步操作。

async function process(array) {
  for await (const i of array) {
    doSomething(i);
  }
}

2. promise.finally()
   無論是成功（.then()）還是失?。?code>.catch()），Promise 后面都會(huì)執(zhí)行的部分。

3. Rest, Spread
   在 ES2015 中，Rest 不定長(zhǎng)度參數(shù)…，可以轉(zhuǎn)換成數(shù)組傳入。

4. 正則表達(dá)式組
   RegExp 可以返回匹配的數(shù)據(jù)包

const regExpDate = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match      = regExpDate.exec('2020-06-25');
const year       = match[1]; // 2020
const month      = match[2]; // 06
const day        = match[3]; // 25

5. 正則表達(dá)式 dotAll
   . 表示匹配除輸入以外的任何符號(hào)，添加這些標(biāo)志后，允許匹配輸入。

/hello.world/.test('hello\nworld');  // false
/hello.world/s.test('hello\nworld'); // true

六、ES10 (ES2019)

1. 更友好的 JSON.stringify
   如果輸入是 Unicode 但超出范圍，則 JSON.stringify 最初會(huì)返回格式錯(cuò)誤的 Unicode 字符串。

現(xiàn)在是第 3 階段的提案，使其成為有效的 Unicode 并以 UTF-8 呈現(xiàn)。

2. Array.prototype.flat() & Array.prototype.flatMap()
   展平陣列

3. String.prototype.trimStart() & String.prototype.trimEnd()
trimStart() 方法從字符串的開頭刪除空格，trimLeft() 是此方法的別名。

4. Object.fromEntries()
Object.fromEntries() 方法將鍵值對(duì)列表轉(zhuǎn)換為對(duì)象。

5. String.prototype.matchAll
matchAll() 方法返回將字符串與正則表達(dá)式匹配的所有結(jié)果的迭代器，包括捕獲組。

6. fixed catch 綁定
   在使用catch之前，不管有用與否，一定要傳入一個(gè)eparameter來表示接收到的錯(cuò)誤。
   如果現(xiàn)在不用，可以省略。

7. BigInt（新數(shù)字類型）（重要）
   BigInt 值，有時(shí)也稱為 BigInt，是一個(gè) bigint 原語(yǔ)，通過將 n 附加到整數(shù)文字的末尾，或通過調(diào)用 BigInt() 函數(shù)（沒有 new 運(yùn)算符）并給它一個(gè)整數(shù)值或字符串來創(chuàng)建值。

• ES5：String, Number, Boolean, Null, Undefined
• ES6 新增：Symbol，到ES6就一共有6 種類型
• ES10 新增：BigInt，就達(dá)到 7 種類型

七、ES11 (ES2020)

1. Promise.allSettled()
Promise.allSettled() 方法返回一個(gè)在所有給定的 Promise 都已實(shí)現(xiàn)或拒絕后實(shí)現(xiàn)的 Promise，并帶有一組對(duì)象，每個(gè)對(duì)象都描述了每個(gè) Promise 的結(jié)果。

它通常用于當(dāng)有多個(gè)不依賴于彼此成功完成的異步任務(wù)，或者總是想知道每個(gè) Promise 的結(jié)果時(shí)。

相比之下，Promise.all() 返回的 Promise 可能更合適，如果任務(wù)相互依賴/如果想立即拒絕其中任何一個(gè)拒絕。

2. 可選鏈操作符?.

在開發(fā)中，很容易遇到先判斷數(shù)據(jù)是否存在，判斷是否寫入。

const isUserExist = user && user.info;
if (isUserExist) { 
    username = user.info.name; 
}

如果返回的數(shù)據(jù)為null或者用戶對(duì)象下沒有相應(yīng)屬性，則會(huì)拋出Uncaught TypeError: Cannot read property...。

導(dǎo)致程序無法繼續(xù)執(zhí)行

使用 ?.，語(yǔ)法更簡(jiǎn)單

const username = user?.info?.name;

如果存在，獲取name的值，如果不存在，賦值undefined

與 || 一起使用，只需一行！

const username = user?.name || 'guest';

3. Nullish 合并運(yùn)算符 ??
   在JavaScript中，遇到0、null、undefined時(shí)會(huì)自動(dòng)轉(zhuǎn)為false。
   但有時(shí)0其實(shí)是一個(gè)正常的值，只能容錯(cuò)undefined和null，但是使用??，可以保持簡(jiǎn)潔。

4. Dynamic-import
   從字面上看，應(yīng)該很容易理解，就是在需要的時(shí)候加載相關(guān)的邏輯。

5. GlobalThis
   全局 globalThis 屬性包含全局 this 值，類似于全局對(duì)象。

八、ES12 (ES2021)

1. Promise.any()
Promise.any() 接受一個(gè)可迭代的 Promise 對(duì)象。它返回一個(gè)單一的 Promise，只要 iterable 中的任何一個(gè) Promise 完成，就會(huì)返回一個(gè) Promise，并帶有已完成的 Promise 的值。

如果可迭代的實(shí)現(xiàn)中沒有任何承諾（如果所有給定的承諾都被拒絕），則返回的承諾會(huì)被 AggregateError 拒絕，AggregateError 是 Error 的一個(gè)新子類，它將單個(gè)錯(cuò)誤組合在一起。

2. 邏輯賦值運(yùn)算符
   在開發(fā)過程中，可以使用 ES2020 中提出的邏輯運(yùn)算符 ||、&& 和 `??（Nullish coalescing operator）來解決一些問題。

而 ES2021 會(huì)提出 ||= , &&= , ??= ，概念類似于 += ：

let b = 2
b += 1 
// equal to b = b + 1
let a = null
a ||= 'some random text'  // a become to'some random text'
// equal a = a || 'some random text'
let c = 'some random texts'
c &&= null  // c become to null
// equal to c = c && null
let d = null
d ??= false  // d become to false
// equal to d = d ?? false

3. WeakRef
WeakRef 對(duì)象包含對(duì)對(duì)象的弱引用，該對(duì)象稱為其目標(biāo)或引用對(duì)象。對(duì)對(duì)象的弱引用是不會(huì)阻止對(duì)象被垃圾收集器回收的引用。相反，普通（或強(qiáng)）引用將對(duì)象保存在內(nèi)存中，當(dāng)一個(gè)對(duì)象不再有任何強(qiáng)引用時(shí)，JavaScript 引擎的垃圾收集器可能會(huì)銷毀該對(duì)象并回收其內(nèi)存。如果發(fā)生這種情況，將無法再?gòu)娜跻弥蝎@取對(duì)象。

九、ES13 (ES2022)

ES13 帶來了 6 個(gè)新特性：

• 模塊頂層作用域支持 await 表達(dá)式。
• 新增私有類元素（#）、靜態(tài)塊；in 操作符支持私有類元素。
• 正則新增 d 標(biāo)志和其對(duì)應(yīng)的 hasIndices 屬性，提供了獲取捕獲組開始索引和結(jié)束索引的方法。
• Error 實(shí)例增加 cause 屬性，可攜帶更多錯(cuò)誤信息。
• Strings、Arrays、TypedArrays 新增 at 方法，支持關(guān)聯(lián)訪問。
• Object.hasOwn 代替 Object.prototype.hasOwnProperty，判斷對(duì)象是否含有屬性。

9.1 Strings、Arrays、TypedArrays 的 at 方法

利用下標(biāo)訪問數(shù)組元素時(shí)，下標(biāo)會(huì)被轉(zhuǎn)換為字符串，負(fù)數(shù)下標(biāo)也對(duì)應(yīng)著一個(gè)獨(dú)立的數(shù)組元素，所以 Js 的數(shù)組是不支持關(guān)聯(lián)訪問的。ES13 新增了 at 方法，可以利用負(fù)數(shù)索引進(jìn)行關(guān)聯(lián)訪問，例如以下示例，可以利用 at 方法和負(fù)數(shù)索引 -2 來訪問倒數(shù)第二個(gè)元素。

const array = [5, 12, 8, 130, 44];

array.at(-2); // 130

9.2 私有類元素

在類的定義中，以 “#” 開頭的標(biāo)識(shí)符為私有標(biāo)識(shí)符，由私有標(biāo)識(shí)符定義的類元素被稱為私有類元素，私有類元素只能在類中才能被訪問到。類的屬性、靜態(tài)屬性、方法、靜態(tài)方法、訪問器、靜態(tài)訪問器都可以被定義為私有類元素。示例代碼如下：

class ClassA {
    // 私有屬性
    #privateProperty;

    // 靜態(tài)私有屬性
    static #privateStaticProperty;

    // 靜態(tài)私有 Getter
    static get #privateStaticGet() {
        return 'private-static-get';
    }

    // 靜態(tài)私有 Setter
    static set #privateStaticSet(val) {
    }

    // 靜態(tài)私有方法
    static #privateStaticMethod() {
        return 'private-static-method'
    }

    constructor(propertyValue) {
        // 初始化私有屬性
        this.#privateProperty = propertyValue;
    }

    // 私有 Get
    get #privateGet() {
        return 'private-get'
    }

    // 私有 Set
    set #privateSet() {
    }

    // 私有方法
    #privateMethod() {
        return 'private-method'
    }
}

在類的內(nèi)部可以正常訪問私有類元素，在類的外部訪問私有類元素會(huì)拋出句法錯(cuò)誤。

class ClassA {
    // 私有屬性
    #privateProperty;

    constructor(property, privateProperty) {
        this.property = property;
        this.#privateProperty = privateProperty;
    }

    // 在方法中訪問私有屬性
    getPrivateProperty() {
        return this.#privateProperty;
    }
}

const instance = new ClassA('property', 'private-property');

instance.property; // 'property'
instance.#privateProperty; // Uncaught SyntaxError: Private field '#privateProperty' must be declared in an enclosing class
instance.getPrivateProperty(); // 'private-property'

以上就是私有類元素的用法，它有效隔離了類內(nèi)外的數(shù)據(jù)和邏輯，進(jìn)一步增強(qiáng)了封裝的效果，使程序更加健壯。

9.3 靜態(tài)塊

靜態(tài)塊提供了更加靈活的靜態(tài)類元素初始化渠道，可以在靜態(tài)塊中使用一系列的語(yǔ)句來完成靜態(tài)類元素的初始化?？梢岳?this 在靜態(tài)塊中訪問類的其他靜態(tài)屬性（包括私有屬性）。

class ClassA {
    // 靜態(tài)屬性
    static staticProperty;

    // 靜態(tài)塊初始化靜態(tài)屬性，捕捉錯(cuò)誤
    static {
        try {
            this.staticProperty = getStaticProperty();
        } catch {
            console.log('Error');
        }
    }
}

當(dāng)一個(gè)類具有多個(gè)靜態(tài)塊時(shí)，它們會(huì)按照定義的順序進(jìn)行執(zhí)行。

class ClassA {
    // 靜態(tài)屬性 A
    static staticPropertyA;

    // 靜態(tài)塊 A
    static {
        this.staticPropertyA = 'static-block-a';
        console.log('static-block-a');
    }

    // 靜態(tài)屬性 B
    static staticPropertyB;

    // 靜態(tài)塊 B
    static {
        this.staticPropertyB - 'static-block-b';
        console.log('static-block-b');
    }
}

// 輸出
// static-block-a
// static-block-b

當(dāng)一個(gè)類具有父類時(shí)，會(huì)先執(zhí)行父類的靜態(tài)塊，再執(zhí)行子類的靜態(tài)塊?？梢岳?super 在子類的靜態(tài)塊中訪問父類的屬性。

// 父類
class ParentClass {
    // 父類屬性
    static parentProperty;

    // 父類靜態(tài)塊
    static {
        this.parentProperty = 'parent-property';
        console.log('parent-static-block');
    }
}

// 子類
class ChildClass extends ParentClass {
    // 子類靜態(tài)塊
    static {
        console.log(super.parentProperty);
        console.log('child-static-block');
    }
}

// 輸出
// parent-static-block
// parent-property
// child-static-block

9.4 私有 in 操作符

in 操作符可以判斷實(shí)例中是否存在屬性，當(dāng)新增了私有化類元素后，也可以和下面例子一樣，在類定義內(nèi)使用 in 操作符判斷私有化類元素存在與否。

class ClassA {
    // 私有屬性
    #privateProperty;

    // 利用 in 操作符判斷私有屬性是否存在
    static hasPrivateProperty(instance) {
        return #privateProperty in instance
    }

    constructor(privateProperty) {
        this.#privateProperty = privateProperty;
    }
}

const instance = new ClassA('private-property');
ClassA.hasPrivateProperty(instance);

// 輸出
// true

9.5 正則 /d 標(biāo)志

正則表達(dá)式通常用來處理字符串，正則表達(dá)式有很多標(biāo)志，它決定了正則狀態(tài)機(jī)的行為和輸出結(jié)果。ES13 新增的 d 標(biāo)志對(duì)應(yīng)正則實(shí)例的 hasIndices 屬性，當(dāng)設(shè)置 d 標(biāo)志時(shí)，hasIndices 為 true 。使用 d 標(biāo)志后，正則表達(dá)式的匹配結(jié)果將包含每個(gè)捕獲組捕獲子字符串的開始和結(jié)束游標(biāo)。

// 字符串
const str = "today is saturday";

// 正則表達(dá)式
const reg = /saturday/d;

// 匹配結(jié)果輸出游標(biāo)
const [start, end] = reg.exec(str).indices[0];

console.log([start, end]); // [9, 17]

9.6 Error 對(duì)象的 cause 屬性

在以往 Error 對(duì)象只能傳遞消息信息，現(xiàn)在 ES13 為 Error 增添了 cause 屬性，它可以是任意數(shù)據(jù)類型，方便獲取更多地錯(cuò)誤信息。

try {
    // 拋出帶 cause 屬性的 Error實(shí)例
    throw new Error('faied message', { cause: 'cause' });
} catch (error) {
    // 捕獲 error 并輸出 cause
    console.log(error.cause)
}

// 輸出
// cause

9.7 Object.hasOwn

ES13 新增了 Object.hasOwn 方法判斷這個(gè)實(shí)例上是否有屬性，以代替之前的 Object.prototype.hasOwnProperty 方法。文章來源地址http://www.zghlxwxcb.cn/news/detail-724229.html

const object = {
    count: 1
};

Object.hasOwn(object, 'count'); // true
Object.hasOwn(object, 'toString'); // false
Object.hasOwn(object, 'property'); // false

十、拓展閱讀

• 《JavaScript進(jìn)階（十四）：詳解 ES6 中的 export 和 import》
• 《JavaScript進(jìn)階（十三）：JavaScript 空值合并運(yùn)算符、可選鏈操作符、空值賦值運(yùn)算符講解》
• 《JavaScript進(jìn)階（十二）：JS 模塊化編程規(guī)范-CommonJS、AMD、CMD、ES6》
• 《JavaScript進(jìn)階（十八）：ES6 Symbol 用法》
• 《JavaScript進(jìn)階（二十）：精解 ES6 Promise 用法》
• 《JavaScript進(jìn)階（二十四）：ES8 中 async 與 await 使用方法詳解》
• 《JavaScript進(jìn)階（二十五）：Promise 詳解》

到了這里，關(guān)于JavaScript進(jìn)階（二十六）：ES各版本特性詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！