ECMAScript2020~2021全特性學習寶典

前言

文章字數限制 ES6~ES10 參考 ECMAScript2016~2019全特性學習寶典html

ECMAScript2020(ES11)

String 擴展

String.prototype.matchAll()

matchAll() 方法返回一個包含全部匹配正則表達式及分組捕獲結果的迭代器前端

const str = ` <html> <body> <div>第一個div</div> <p>這是一個p</p> <span>span</span> <div>第二個div</div> <body> </html> `
複製代碼

請找出全部的div元素。node

function selectDiv(regExp, str) {
    let matches = []
    for (let match of str.matchAll(regExp)) {
        matches.push(match[1])
    }
    return matches
}
const res = selectDiv(regExp, str)
console.log(res)
複製代碼

Dynamic Import

按需 import 提案几年前就已提出，現在終於能進入ES正式規範。這裏我的理解成「按需」更爲貼切。現代前端打包資源愈來愈大，打包成幾M的JS資源已成常態，而每每前端應用初始化時根本不須要全量加載邏輯資源，爲了首屏渲染速度更快，不少時候都是按需加載，好比懶加載圖片等。而這些按需執行邏輯資源都體如今某一個事件回調中去加載。webpack

頁面上有一個按鈕，點擊按鈕纔去加載ajax模塊。web

const oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', () => {
    import('./ajax').then(mod => {
        // console.log(mod)
        mod.default('static/a.json', res => {
            console.log(res)
        })
    })
})
複製代碼

固然，webpack目前已很好的支持了該特性。ajax

BigInt

在 ES10 增長了新的原始數據類型：BigInt，表示一個任意精度的整數，能夠表示超長數據，能夠超出2的53次方。正則表達式

Js 中 Number類型只能安全的表示-(2^53-1)至 2^53-1 範的值json

console.log(2 ** 53) // es7 冪運算符
console.log(Number.MAX_SAFE_INTEGER) // 最大值-1
複製代碼

使用 BigInt 有兩種方式：segmentfault

方式一：數字後面增長n

const bigInt = 9007199254740993n
console.log(bigInt)
console.log(typeof bigInt) // bigint

console.log(1n == 1) // true
console.log(1n === 1) // false
複製代碼

方式二：使用 BigInt 函數

const bigIntNum = BigInt(9007199254740993n)
console.log(bigIntNum)
複製代碼

Promise.allSettled()

學習了ES新特性，咱們都知道 Promise.all() 具備併發執行異步任務的能力。但它的最大問題就是若是其中某個任務出現異常(reject)，全部任務都會掛掉，Promise直接進入reject 狀態。而 Promise.allSettled 返回一個在全部給定的promise已被決議或被拒絕後決議的promise，並帶有一個對象數組，每一個對象表示對應的promise結果。數組

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)
    // console.log('成功')
    const data = res.filter(item => item.status === 'fulfilled')
    console.log(data)
}).catch(err => {
    console.log(err)
    console.log('失敗')
})
複製代碼

globalThis

Javascript 在不一樣的環境獲取全局對象有不通的方式：

node 中經過 global
web 中經過 window, self 等.

self：打開任何一個網頁，瀏覽器會首先建立一個窗口，這個窗口就是一個window對象，也是js運行所依附的全局環境對象和全局做用域對象。self 指窗口自己，它返回的對象跟window對象是如出一轍的。也正由於如此，window對象的經常使用方法和函數均可以用self代替window。

globalThis 提供了一個標準的方式來獲取不一樣環境下的全局 this 對象（也就是全局對象自身）。不像 window 或者 self 這些屬性，它確保能夠在有無窗口的各類環境下正常工做。因此，你能夠安心的使用 globalThis，沒必要擔憂它的運行環境。爲便於記憶，你只須要記住，全局做用域中的 this 就是 globalThis。

console.log(globalThis)
複製代碼

可選鏈 Optional chaining

可以讓咱們在查詢具備多層級的對象時，再也不須要進行冗餘的各類前置校驗。

const user = {
    address: {
        street: 'xx街道',
        getNum() {
            return '80號'
        }
    }
}
複製代碼

在以前的語法中，想獲取到深層屬性或方法，不得不作的前置校驗，不然很容易命中 Uncaught TypeError: Cannot read property... 這種錯誤，這極有可能讓你整個應用掛掉。

const street = user && user.address && user.address.street
const num = user && user.address && user.address.getNum && user.address.getNum()
console.log(street, num)
複製代碼

用了 Optional Chaining ，上面代碼會變成

const street2 = user?.address?.street
const num2 = user?.address?.getNum?.()
console.log(street2, num2)
複製代碼

可選鏈中的 ? 表示若是問號左邊表達式有值, 就會繼續查詢問號後面的字段。根據上面能夠看出，用可選鏈能夠大量簡化相似繁瑣的前置校驗操做，並且更安全。

空值合併運算符（Nullish coalescing Operator）

空值合併運算符（??）是一個邏輯運算符。當左側操做數爲 null 或 undefined 時，其返回右側的操做數。不然返回左側的操做數。

當咱們查詢某個屬性時，常常會遇到，若是沒有該屬性就會設置一個默認的值。

const b = 0 // 或者null undefined false
const a = b || 5
console.log(a)
複製代碼

空值合併運算符 ?? 咱們僅在第一項爲 null 或 undefined 時設置默認值

// false 0 無效
const a = b ?? 123
console.log(a)
複製代碼

ECMAScript2021(ES12)

replaceAll

返回一個全新的字符串，全部符合匹配規則的字符都將被替換掉

const str = 'hello world';
str.replaceAll('l', ''); // "heo word"
複製代碼

Promise.any

Promise.any() 接收一個Promise可迭代對象，只要其中的一個 promise 成功，就返回那個已經成功的 promise 。若是可迭代對象中沒有一個 promise 成功（即全部的 promises 都失敗/拒絕），就返回一個失敗的 promise。

const promise1 = new Promise((resolve, reject) => reject('我是失敗的Promise_1'));
const promise2 = new Promise((resolve, reject) => reject('我是失敗的Promise_2'));
const promiseList = [promise1, promise2];
Promise.any(promiseList)
.then(values=>{
  console.log(values);
})
.catch(e=>{
  console.log(e);
});
複製代碼

WeakRefs

WeakRefs的Class類建立對對象的弱引用(對對象的弱引用是指當該對象應該被GC回收時不會阻止GC的回收行爲)

當咱們經過（const、let、var）建立一個變量時，垃圾收集器GC將永遠不會從內存中刪除該變量，只要它的引用仍然存在可訪問。WeakRef對象包含對對象的弱引用。對對象的弱引用是不會阻止垃圾收集器GC恢復該對象的引用，則GC能夠在任什麼時候候刪除它。

WeakRefs在不少狀況下都頗有用，好比使用Map對象來實現具備不少須要大量內存的鍵值緩存，在這種狀況下最方便的就是儘快釋放鍵值對佔用的內存。

目前，能夠經過WeakMap()或者WeakSet()來使用WeakRefs

我想要跟蹤特定的對象調用某一特定方法的次數，超過1000條則作對應提示

let map = new Map()
function doSomething(obj){
	...
}
function useObject(obj){
	doSomething(obj)
  
  let called = map.get(obj) || 0
  called ++ 
  
  if(called>1000){
     console.log('當前調用次數已經超過1000次了，over')
  }
  
  map.set(obj, called)
}
複製代碼

如上雖然能夠實現咱們的功能，可是會發生內存溢出,由於傳遞給doSomething函數的每一個對象都永久保存在map中，而且不會被GC回收，所以咱們可使用WeakMap

let wmap = new WeakMap()
function doSomething(obj){
	...
}
function useObject(obj){
	doSomething(obj)
  
  let called = wmap.get(obj) || 0
  
  called ++
  
  if(called>1000){
     console.log('當前調用次數已經超過1000次了，over')
  }
  
  wmap.set(obj, called)
}
複製代碼

邏輯運算符和賦值表達式

運算符和賦值表達式，新特性結合了邏輯運算符（&&，||，??）和賦值表達式而JavaScript已存在的複合賦值運算符有以下

a ||= b
//等價於
a = a || (a = b)

a &&= b
//等價於
a = a && (a = b)

a ??= b
//等價於
a = a ?? (a = b)
複製代碼

數字分隔符

數字分隔符，能夠在數字之間建立可視化分隔符，經過_下劃線來分割數字，使數字更具可讀性

const money = 1_000_000_000;
//等價於
const money = 1000000000;

1_000_000_000 === 1000000000; // true
複製代碼