ES2020 新特性 "拍了拍" 你

BigInt

在 JavaScript 中如今有 8 種基本的數據類型了喔（7 種原始類型和 1 種引用類型）

• number 用於任何類型的數字：整數或浮點數，在 ±2^53 範圍內的整數。
• bigint 用於任意長度的整數。
• string
• boolean
• null 用於未知的值
• undefined 用於未定義的值
• symbol 用於惟一的標識符。
• object 用於更復雜的數據結構。

BigInt 容許開發人員在其 JS 代碼中使用更大的整數表示形式進行數據處理。目前在 js 中存儲爲整數的最大數量爲 pow(2, 53) - 1。可是 BigInt 實際上容許你超越此範圍。

可是，如上所示，你須要在數字的末尾附加一個附錄。這 n 表示這是一個 BigInt，JavaScript 引擎（v8引擎或它正在使用的任何引擎）應將其區別對待。

此改進不向後兼容，由於傳統的數字系統是IEEE754（它不能支持這種大小的數字）。

動態導入

咱們以前使用的靜態導入語法十分簡單嚴格。首先咱們不能動態生成 import 的任何參數。

模塊路徑必須是原始類型字符串，不能是函數調用，下面這樣寫行不通：

import ... from getModule();
複製代碼

其次，咱們沒法根據條件或者在運行時導入：

if() {
	import ...;   
}
複製代碼

{
    import ...
    // 在塊級做用域中使用 import 是會報錯的
}
複製代碼

這是由於 import / export 旨在提供代碼結構的主幹，這樣便於分析代碼結構，便於使用 webpack 根據模塊的依賴關係進行靜態分析並打包，刪除未使用的導出（tree-shaking）。

import(module) 表達式加載模塊並返回一個 promise，該 promise resolve 爲一個包含其全部導出的模塊對象。咱們能夠在代碼中任何位置動態的使用它。

import('/example/path/xxx.js')
	.then(obj => obj.func())
	.catch(err => console.log(err))
複製代碼

或者在異步函數中，咱們可使用 let module = await import(modulePath)

儘管 import() 看起來像一個函數調用，可是它不是函數，只是一種特殊語法，只是剛好使用了括號（相似於 super()）。

實際應用-路由懶加載

Vue 官方文檔

若是將組件都靜態所有導入到路由文件中，那麼在打包的時候代碼體積會很大，會影響代碼首屏加載速度，咱們能夠結合使用 Vue 異步組件和 Webpack 的代碼分割功能，實現路由的懶加載，在訪問到對應 url 的時候才加載相關組件。

const Foo = () => import('./Foo.vue')
const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo }
  ]
})
// 或者
const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import('./Foo.vue')}
  ]
})
複製代碼

空位合併

ES2020 增長了真正檢查空值而不是假值的能力。在 JavaScript 中，不少值都是 falsey，例如 空字符串''，0，undefined，null，false，NaN等。

當咱們查詢某屬性時，常常會給沒有該屬性就設置一個默認的值，好比下面兩種方式：

let c = a ? a : b // 方式1
let c = a || b // 方式2
複製代碼

這兩種方式有個明顯的弊端，它都會覆蓋全部的假值，這些值多是在某些狀況下有效的輸入。

let obj = {
  prop: {
    name: 'zhuzhu',
    age: ''
  }
}
console.log(obj.prop.age || 18) //18
複製代碼

上例中 age 的屬性爲空字符串，卻被等同爲假值，爲了解決這個問題，ES2020 誕生了個新特性--空位合併操做符，用 ?? 表示。若是表達式在 ?? 的左側運算符求值爲 undefined 或 null，就返回其右側默認值。

let c = a ?? b;
// 等價於 let c = a !== undefined && a !== null ? a : b;
複製代碼

可選鏈操做符

可選鏈可讓你直接訪問深層嵌套的對象的某個屬性，而不需進行前置校驗。若是不存在，將直接返回 undefined。

// 舊寫法
let property = res && res.data && res.data.property

// 新寫法
let property = res?.data?.property
// 在訪問的某一層爲 null/undefined 的話，直接短路計算返回 undefined
複製代碼

Promise.allSettled

該 Promise.allSettled 方法接受一個 Promises 數組，而且僅在全部這些 Promises 都已解決（已解決或已拒絕）時返回一個裝滿 Promises 結果的數組。

matchAll

方法 str.matchAll(regexp) 是 str.match 「新改進的」變體。

它主要用來搜索全部組的全部匹配項。

與 match 相比有 3 個區別：

它返回包含匹配項的可迭代對象，而不是數組。咱們能夠用 Array.from 從中獲得一個常規數組。 每一個匹配項均以包含分組的數組形式返回（返回格式與不帶 g 標記的 str.match 相同）。 若是沒有結果，則返回的不是 null，而是一個空的可迭代對象。

let str = '<h1>Hello, world!</h1>';
let regexp = /<(.*?)>/g;
let matchAll = str.matchAll(regexp);
alert(matchAll); // [object RegExp String Iterator]，不是數組，而是一個可迭代對象
matchAll = Array.from(matchAll); // 如今返回的是數組
console.log(matchAll)
複製代碼

參考文獻

10 New JavaScript Features in ES2020 That You Should Know

ES2020新特性

下期預告

使用 axios 作全局異常處理