十分鐘教你上手ES2020新特性
前言
ES2020 是 ECMAScript 對應 2020 年的版本。這個版本不像 ES6 (ES2015)那樣包含大量新特性。但也添加了許多有趣且有用的特性。想閱讀更多優質文章,請點選我的部落格
本文以簡單的程式碼示例來介紹 ES2020新特性。這樣,你可以很快理解這些新功能,而不需要多麼複雜的解釋。
可選鏈操作符(Optional Chaining)
可選鏈 可讓我們在查詢具有多個層級的物件時,不再需要進行冗餘的各種前置校驗。
日常開發中,當需要訪問巢狀在物件內部好幾層的屬性時,可能就會得到臭名昭著的錯誤Uncaught TypeError: Cannot read property...
,這種錯誤,讓整段程式執行中止。
於是,你就要修改你的程式碼來處理來處理屬性鏈中每一個可能的undefined物件,比如:
let nestedProp = obj && obj.first && obj.first.second;
在訪問 obj.first.second 之前,要先確認 obj 和 obj.first 的值非 null(且不是 undefined)。
有了可選鏈式呼叫 ,可以大量簡化類似繁瑣的前置校驗操作,而且更安全:
let nestedProp = obj?.first?.second;
如果obj或obj.first是null/undefined,表示式將會短路計算直接返回undefined。
可選鏈操作符的支援情況:
空位合併操作符(Nullish coalescing Operator)
當我們查詢某個屬性時,經常會給沒有該屬性就設定一個預設的值,比如下面兩種方式:
let c = a ? a : b // 方式1 let c = a || b // 方式2
這兩種方式有個明顯的弊端,它都會覆蓋所有的假值,如(0,'',false),這些值可能是在某些情況下有效的輸入。
let x = { profile: { name: '浪裡行舟',age: '' } } console.log(x.profile.age || 18) //18
上例中age的屬性為空字串,卻被等同為假值,為了解決這個問題,ES2020誕生了個新特性--空位合併操作符,用 ?? 表示。如果表示式在??的左側運算子求值為 undefined 或 null,就返回其右側預設值。
let c = a ?? b; // 等價於let c = a !== undefined && a !== null ? a : b;
例如有以下程式碼:
const x = null; const y = x ?? 500; console.log(y); // 500 const n = 0 const m = n ?? 9000; console.log(m) // 0
空位合併操作符的支援情況:
Promise.allSettled
我們知道 Promise.all 具有併發執行非同步任務的能力。但它的最大問題就是如果引數中的任何一個promise為reject的話,則整個Promise.all 呼叫會立即終止,並返回一個reject的新的 Promise 物件。
const promises = [ Promise.resolve(1),Promise.resolve(2),Promise.reject('error') ]; Promise.all(promises) .then(responses => console.log(responses)) .catch(e => console.log(e)) // "error"
假如有這樣的場景:一個頁面有三個區域,分別對應三個獨立的介面資料,使用 Promise.all 來併發請求三個介面,如果其中任意一個接口出現異常,狀態是reject,這會導致頁面中該三個區域資料全都無法出來,這個狀況我們是無法接受,Promise.allSettled的出現就可以解決這個痛點:
Promise.allSettled([ Promise.reject({ code: 500,msg: '服務異常' }),Promise.resolve({ code: 200,list: [] }),list: [] }) ]).then(res => { console.log(res) /* 0: {status: "rejected",reason: {…}} 1: {status: "fulfilled",value: {…}} 2: {status: "fulfilled",value: {…}} */ // 過濾掉 rejected 狀態,儘可能多的保證頁面區域資料渲染 RenderContent( res.filter(el => { return el.status !== 'rejected' }) ) })
Promise.allSettled跟Promise.all類似,其引數接受一個Promise的陣列,返回一個新的Promise,唯一的不同在於,它不會進行短路,也就是說當Promise全部處理完成後,我們可以拿到每個Promise的狀態,而不管是否處理成功。
Promise.allSettled的支援情況:
String.prototype.matchAll
如果一個正則表示式在字串裡面有多個匹配,現在一般使用g修飾符或y修飾符,在迴圈裡面逐一取出。
function collectGroup1 (regExp,str) { const matches = [] while (true) { const match = regExp.exec(str) if (match === null) break matches.push(match[1]) } return matches } console.log(collectGroup1(/"([^"]*)"/g,`"foo" and "bar" and "baz"`)) // [ 'foo','bar','baz' ]
值得注意的是,如果沒有修飾符 /g,.exec() 只返回第一個匹配。現在通過String.prototype.matchAll方法,可以一次性取出所有匹配。
function collectGroup1 (regExp,str) { let results = [] for (const match of str.matchAll(regExp)) { results.push(match[1]) } return results } console.log(collectGroup1(/"([^"]*)"/g,`"foo" and "bar" and "baz"`)) // ["foo","bar","baz"]
上面程式碼中,由於string.matchAll(regex)返回的是遍歷器,所以可以用for...of迴圈取出。
String.prototype.matchAll的支援情況:
Dynamic import
現在前端打包資源越來越大,前端應用初始化時根本不需要全部載入這些邏輯資源,為了首屏渲染速度更快,很多時候都是動態匯入(按需載入)模組,比如懶載入圖片等,這樣可以幫助您提高應用程式的效能。
其中按需載入這些邏輯資源都一般會在某一個事件回撥中去執行:
el.onclick = () => { import('/modules/my-module.js') .then(module => { // Do something with the module. }) .catch(err => { // load error; }) }
import()可以用於script指令碼中,import(module) 函式可以在任何地方呼叫。它返回一個解析為模組物件的 promise。
這種使用方式也支援 await 關鍵字。
let module = await import('/modules/my-module.js');
通過動態匯入程式碼,您可以減少應用程式載入所需的時間,並儘可能快地將某些內容返回給使用者。
Dynamic import的支援情況:
BigInt
javascript 在 Math 上一直很糟糕的原因之一是隻能安全的表示-(2^53-1)
至 2^53-1
範的值,即Number.MIN_SAFE_INTEGER
至Number.MAX_SAFE_INTEGER
,超出這個範圍的整數計算或者表示會丟失精度。
var num = Number.MAX_SAFE_INTEGER; // -> 9007199254740991 num = num + 1; // -> 9007199254740992 // 再次加 +1 後無法正常運算 num = num + 1; // -> 9007199254740992 // 兩個不同的值,卻返回了true 9007199254740992 === 9007199254740993 // -> true
於是 BigInt 應運而生,它是第7個原始型別,可安全地進行大數整型計算。你可以在BigInt上使用與普通數字相同的運算子,例如 +,-,/,*,%等等。
建立 BigInt 型別的值也非常簡單,只需要在數字後面加上 n 即可。例如,123 變為 123n。也可以使用全域性方法 BigInt(value) 轉化,入參 value 為數字或數字字串。
const aNumber = 111; const aBigInt = BigInt(aNumber); aBigInt === 111n // true typeof aBigInt === 'bigint' // true typeof 111 // "number" typeof 111n // "bigint"
只要在數字末尾加上 n,就可以正確計算大數了:
1234567890123456789n * 123n; // -> 151851850485185185047n
不過有一個問題,在大多數操作中,不能將 BigInt與Number混合使用。比較Number和 BigInt是可以的,但是不能把它們相加。
1n < 2 // true 1n + 2 // Uncaught TypeError: Cannot mix BigInt and other types,use explicit conversions
BigInt的支援情況:
globalThis
globalThis 是一個全新的標準方法用來獲取全域性 this 。之前開發者會通過如下的一些方法獲取:
- 全域性變數 window:是一個經典的獲取全域性物件的方法。但是它在 Node.js 和 Web Workers 中並不能使用
- 全域性變數 self:通常只在 Web Workers 和瀏覽器中生效。但是它不支援 Node.js。一些人會通過判斷 self 是否存在識別程式碼是否執行在 Web Workers 和瀏覽器中
- 全域性變數 global:只在 Node.js 中生效
過去獲取全域性物件,可通過一個全域性函式:
// ES10之前的解決方案 const 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') } // ES10內建 globalThis.Array(0,1,2) // [0,2] // 定義一個全域性物件v = { value:true },ES10用如下方式定義 globalThis.v = { value:true }
而 globalThis 目的就是提供一種標準化方式訪問全域性物件,有了 globalThis 後,你可以在任意上下文,任意時刻都能獲取到全域性物件。
如果您在瀏覽器上,globalThis將為window,如果您在Node上,globalThis則將為global。因此,不再需要考慮不同的環境問題。
// worker.js globalThis === self // node.js globalThis === global // browser.js globalThis === window
新提案也規定了,Object.prototype 必須在全域性物件的原型鏈中。下面的程式碼在最新瀏覽器中已經會返回 true 了:
Object.prototype.isPrototypeOf(globalThis); // true
globalThis的支援情況:
參考文章
TC39 Proposals
MDN文件
種草 ES2020 新特性
ES2020 Features in simple examples
New Features In ES2020 You Should Check
5 ECMAScript Proposals To Look Out For In ES2020
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。