ECMAScript
2020 是 ECMAScript
語言規範的第11版。自1997年出版第一版以來,ECMAScript
已發展成爲世界上使用最廣泛的通用編程語言之一。
ES2020
(ES11) 引入了以下新特性:
String
的matchAll
方法動態導入語句
import()
import.meta
export * as ns from 'module'
Promise.allSettled
一種新的數據類型:
BigInt
GlobalThis
Nullish coalescing Operator
Optional Chaining
matchAll
matchAll()
方法返回一個包含所有匹配正則表達式的結果的迭代器。使用 for...of
遍歷或者使用 操作符 ...
Array.from
將其轉換成數組。
const reg = /[0-3]/g;
const data = '2020';
console.log(data.matchAll(reg));//data.matchAll 的返回值是一個迭代器
console.log([...data.matchAll(reg)]);
/**
* 0: ["2", index: 0, input: "2020", groups: undefined]
* 1: ["0", index: 1, input: "2020", groups: undefined]
* 2: ["2", index: 2, input: "2020", groups: undefined]
* 3: ["0", index: 3, input: "2020", groups: undefined]
*/
Dynamic import
標準用法的 import
導入的模塊是靜態的,會使所有被導入的模塊,在加載時就被編譯(無法做到按需編譯,降低首頁加載速度)。有些場景中,你可能希望根據條件導入模塊或者按需導入模塊,這時你可以使用動態導入代替靜態導入。
在 import()
之前,當我們需要根據條件導入模塊時,不得不使用 require()
。
如:
if(XXX) {
const menu = require('./menu');
}
如今可以替換爲:
if(XXX) {
const menu = import('./menu');
}
@babel/preset-env
已經包含了 @babel/plugin-syntax-dynamic-import
,因此如果要使用 import()
語法,只需要配置 @babel/preset-env
即可。
提示: 請不要濫用動態導入(只有在必要情況下采用)。靜態框架能更好的初始化依賴,而且更有利於靜態分析工具和 tree shaking
發揮作用。
另外,import()
返回的是一個 promise
對象。例如:
//menu.js
export default {
menu: 'menu'
}
//index.js
if(true) {
let menu = import('./menu');
console.log(menu); //Promise {<pending>
menu.then(data => console.log(data));//Module {default: {menu: "menu"}, __esModule: true, Symbol(Symbol.toStringTag): "Module"}
} else {
}
import.meta
import.meta
會返回一個對象,有一個 url
屬性,返回當前模塊的url路徑,只能在模塊內部使用。
<script src='./main.js' type="module"></script>
//main.js
console.log(import.meta); //{url: "http://localhost:8080/main.js"} PS:使用了 http-server 啓動
因爲 import.meta
必須要在模塊內部使用,如果不加 type="module"
,控制檯會報錯:Cannot use 'import.meta' outside a module
。
最開始測試時,我是在 React
的項目中測試的,僅配置了 @babel/preset-env
和 @babel/preset-react
預設,使用 import.meta
時,會報錯如下:
安裝 @open-wc/webpack-import-meta-loader
,修改 webpack
的配置,可以正常運行。
module: {
rules: [
{
test: /\.js$/,
use: [
require.resolve('@open-wc/webpack-import-meta-loader'),
{
loader: 'babel-loader',
options: {
presets: [
"@babel/preset-env",
"@babel/preset-react"
]
},
}
]
}
]
}
效果如下:
//src/index.js
import React from 'react';
console.log(import.meta);//{index.js:38 {url: "http://127.0.0.1:3000/src/index.js"}}
export * as ns from 'module'
ES2020新增了 export * as XX from 'module'
,和 import * as XX from 'module'
//menu.js
export * as ns from './info';
可以理解爲是將下面兩條語句合併爲一句:
import * as ns from './info';
export { ns };
不過需要注意的是 export * as ns from './info'
並不會真的將導入模塊,因此在該模塊(menu.js
)中,我們是獲取不到 ns
的。
Promise.allSettled
Promise.all
或者 Promise.race
有的時候並不能滿足我們的需求。比如,我們需要在所有的 promise
都結束的時候做一些操作,而並不在乎它們是成功還是失敗。在沒有 Promise.allSettled
之前,我們需要自己去寫實現。
Promise.allSettled()
方法返回一個在所有給定的 promise
都已經 fulfilled
或 rejected
後的 promise
,並帶有一個對象數組,每個對象表示對應的 promise
結果。
const promise1 = Promise.resolve(100);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'info'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'name'))
Promise.allSettled([promise1, promise2, promise3]).
then((results) => console.log(result));
/*
[
{ status: 'fulfilled', value: 100 },
{ status: 'rejected', reason: 'info' },
{ status: 'fulfilled', value: 'name' }
]
*/
可以看到,Promise.allSettled()
的成功的結果是一個數組,該數組的每一項是一個對象,每個對象都有一個 status
屬性,值爲 fulfilled
或 rejected
,如果status
的值是 fulfilled
,那麼該對象還有一個 value
屬性,其屬性值是對應的 promise
成功的結果;如果 status
的值是 rejected
,那麼該對象有一個 reason
屬性,其屬性值是對應的 promise
失敗的原因。
BigInt
BigInt
是一種數字類型的數據,它可以表示任意精度格式的整數。在此之前,JS 中安全的最大數字是 9009199254740991,即2^53-1,在控制檯中輸入 Number.MAX_SAFE_INTEGER
即可查看。超過這個值,JS 沒有辦法精確表示。另外,大於或等於2的1024次方的數值,JS 無法表示,會返回 Infinity
。
BigInt
即解決了這兩個問題。BigInt
只用來表示整數,沒有位數的限制,任何位數的整數都可以精確表示。爲了和 Number
類型進行區分,BigInt
類型的數據必須添加後綴 n
.
//Number類型在超過9009199254740991後,計算結果即出現問題
const num1 = 90091992547409910;
console.log(num1 + 1); //90091992547409900
//BigInt 計算結果爭取
const num2 = 90091992547409910n;
console.log(num2 + 1n); //90091992547409911n
//Number 類型不能表示大於 2 的 1024 次方的數值
let num3 = 9999;
for(let i = 0; i < 10; i++) {
num3 = num3 * num3;
}
console.log(num3); //Infinity
//BigInt 類型可以表示任意位數的整數
let num4 = 9999n;
for(let i = 0n; i < 10n; i++) {
num4 = num4 * num4;
}
console.log(num4); //一串超級長的數字,這裏就不貼了
我們還可以使用 BigInt
對象來初始化 BigInt
實例:
console.log(BigInt(999)); // 999n 注意:沒有 new 關鍵字!!!
需要說明的是,BigInt
和 Number
是兩種數據類型,不能直接進行四則運算,不過可以進行比較操作。
console.log(99n == 99); //true
console.log(99n === 99); //false
console.log(99n + 1);//TypeError: Cannot mix BigInt and other types, use explicit conversionss
GlobalThis
JS 中存在一個頂層對象,但是,頂層對象在各種實現裏是不統一的。
從不同的 JavaScript
環境中獲取全局對象需要不同的語句。在 Web
中,可以通過 window
、self
取到全局對象,但是在 Web Workers
中,只有 self
可以。在 Node.js
中,它們都無法獲取,必須使用 global
。
在 globalThis
之前,我們這樣去獲取全局對象:
var getGlobal = function () {
if (typeof self !== 'undefined') { return self; }
if (typeof window !== 'undefined') { return window; }
if (typeof global !== 'undefined') { return global; }
throw new Error('unable to locate global object');
};
ES2020
中引入 globalThis
作爲頂層對象,在任何環境下,都可以簡單的通過 globalThis
拿到頂層對象。
Nullish coalescing Operator
ES2020
新增了一個運算符 ??
。當左側的操作數爲 null
或者 undefined
時,返回其右側操作數,否則返回左側操作數。
使用 ||
操作符,當左側的操作數爲 0
、 null
、 undefined
、 NaN
、 false
、 ''
時,都會使用右側的操作數。如果使用 ||
來爲某些變量設置默認值,可能會遇到意料之外的行爲。
例如:
const defaultValue = 100;
let value = someValue || defaultValue;
//當 someValue 轉成 boolean 值爲 false 時,value 的值都是 defaultValue
當 someValue
的值爲 0 時 ,我們其實期望 value
值爲 0, 但是它卻被錯誤的分配成了 100.
??
操作符可以規避以上問題,它只有在左操作數是 null
或者是 undefined
時,纔會返回右側操作數。
const defaultValue = 100;
let value = someValue || defaultValue;//someValue 爲 0 ,value 的值是 0
Optional Chaining
可選鏈操作符 ?.
允許讀取位於連接對象鏈深處的屬性的值,而不必明確驗證鏈中的每個引用是否有效。?.
操作符的功能類似於 .
鏈式操作符,不同之處在於,在引用爲空(nullish
, 即 null
或者 undefined
) 的情況下不會引起錯誤,該表達式短路返回值是 undefined
。
例如,我們要訪問 info
對象的 animal
的 reptile
的 tortoise
。但是我們不確定 animal
, reptile
是否存在,因此我們需要這樣寫:
const tortoise = info.animal && info.animal.reptile && info.animal.reptile.tortoise;
因爲 null.reptile
或 undefined.reptile
會拋出錯誤:TypeError: Cannot read property 'reptile' of undefined
或 TypeError: Cannot read property 'reptile' of null
,爲了避免報錯,如果我們需要訪問的屬性更深,那麼這個這句代碼會越來越長。
而有了可選鏈操作符 ?.
,我們在訪問 reptile
之前,不再需要校驗 info.animal
的值。同樣,在訪問 info.animal.reptile.tortoise
之前,也不需要校驗 info.animal.reptile
的值。
上面的代碼簡化爲:
const tortoise = info.animal?.reptile?.tortoise;
JS在嘗試訪問 info.animal.reptile
之前,會隱式檢查並確定 info.animal
的值不是 null
或 undefined
,如果其值是 null
或 undefined
,那麼表達式短路計算直接返回 undefined
。
可以看到可選鏈操作符 ?.
和空位合併操作符一樣,都是針對的 null
和 undefined
這兩個值。
至此,ES2020
的新特性就都介紹完畢了,總得來講,新增內容並不多,一杯咖啡的時間就可以掌握個大概,不過還是要經常回顧,不然會很容易遺忘。
參考資料
ecma-262
A Super Hacky Alternative to import.meta.url
import
export 與 import 的複合寫法
BigInt 數據類型
globalThis
globalThis對象
推薦閱讀
Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 項目配置最佳實踐
“在看和轉發”
就是最大的支持
本文分享自微信公衆號 - 全棧修煉(QuanZhanXiuLian)。
如有侵權,請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。