日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
不容錯(cuò)過(guò)！ES2020的七大新特性

【稿件】前言

ES2020 是 ECMAScript 對(duì)應(yīng) 2020 年的版本。這個(gè)版本不像 ES6 (ES2015)那樣包含大量新特性。但也添加了許多有趣且有用的特性。

本文以簡(jiǎn)單的代碼示例來(lái)介紹 ES2020新特性。這樣，你可以很快理解這些新功能，而不需要多么復(fù)雜的解釋。

可選鏈操作符（Optional Chaining）

可選鏈可讓我們?cè)诓樵兙哂卸鄠€(gè)層級(jí)的對(duì)象時(shí)，不再需要進(jìn)行冗余的各種前置校驗(yàn)。

日常開發(fā)中，當(dāng)需要訪問嵌套在對(duì)象內(nèi)部好幾層的屬性時(shí)，可能就會(huì)得到臭名昭著的錯(cuò)誤Uncaught TypeError: Cannot read property...，這種錯(cuò)誤，讓整段程序運(yùn)行中止。

于是，你就要修改你的代碼來(lái)處理屬性鏈中每一個(gè)可能的undefined對(duì)象，比如：

 
 
 
 
    
  
  
  
  
  1. let nestedProp = obj && obj.first && obj.first.second;
    2.

在訪問 obj.first.second 之前，要先確認(rèn) obj 和 obj.first 的值非 null(且不是 undefined)。

有了可選鏈?zhǔn)秸{(diào)用 ，可以大量簡(jiǎn)化類似繁瑣的前置校驗(yàn)操作，而且更安全：

 
 
 
 
    
  
  
  
  
  1. let nestedProp = obj?.first?.second;
    2.

如果obj或obj.first是null/undefined，表達(dá)式將會(huì)短路計(jì)算直接返回undefined。

可選鏈操作符的支持情況：

空位合并操作符（Nullish coalescing Operator）

當(dāng)我們查詢某個(gè)屬性時(shí)，經(jīng)常會(huì)給沒有該屬性就設(shè)置一個(gè)默認(rèn)的值，比如下面兩種方式：

 
 
 
 
    
  
  
  
  
  1. let c = a ? a : b // 方式1
    2. 
  
  
  
  
  2. let c = a || b // 方式2
    3.

這兩種方式有個(gè)明顯的弊端，它都會(huì)覆蓋所有的假值，如(0, '', false)，這些值可能是在某些情況下有效的輸入。

 
 
 
 
    
  
  
  
  
  1. let x = {
    2. 
  
  
  
  
  2. profile: {
    3. 
  
  
  
  
  3.   name: '浪里行舟',
    4. 
  
  
  
  
  4.   age: ''
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. }
    7. 
  
  
  
  
  7. console.log(x.profile.age || 18) //18
    8.

上例中age的屬性為空字符串，卻被等同為假值，為了解決這個(gè)問題，ES2020誕生了個(gè)新特性--空位合并操作符，用 ?? 表示。如果表達(dá)式在??的左側(cè)運(yùn)算符求值為undefined 或 null，就返回其右側(cè)默認(rèn)值。

 
 
 
 
    
  
  
  
  
  1. let c = a ?? b;
    2. 
  
  
  
  
  2. // 等價(jià)于let c = a !== undefined && a !== null ? a : b;
    3.

例如有以下代碼：

 
 
 
 
    
  
  
  
  
  1. const x = null;
    2. 
  
  
  
  
  2. const y = x ?? 500;
    3. 
  
  
  
  
  3. console.log(y); // 500
    4. 
  
  
  
  
  4. const n = 0
    5. 
  
  
  
  
  5. const m = n ?? 9000;
    6. 
  
  
  
  
  6. console.log(m) // 0
    7.

空位合并操作符的支持情況：

Promise.allSettled

我們知道 Promise.all 具有并發(fā)執(zhí)行異步任務(wù)的能力。但它的最大問題就是如果參數(shù)中的任何一個(gè)promise為reject的話，則整個(gè)Promise.all 調(diào)用會(huì)立即終止，并返回一個(gè)reject的新的 Promise 對(duì)象。

 
 
 
 
    
  
  
  
  
  1. const promises = [
    2. 
  
  
  
  
  2. Promise.resolve(1),
    3. 
  
  
  
  
  3. Promise.resolve(2),
    4. 
  
  
  
  
  4. Promise.reject('error')
    5. 
  
  
  
  
  5. ];
    6. 
  
  
  
  
  6. ?
    7. 
  
  
  
  
  7. Promise.all(promises)
    8. 
  
  
  
  
  8. .then(responses => console.log(responses))
    9. 
  
  
  
  
  9. .catch(e => console.log(e)) // "error"
    10.

假如有這樣的場(chǎng)景：一個(gè)頁(yè)面有三個(gè)區(qū)域，分別對(duì)應(yīng)三個(gè)獨(dú)立的接口數(shù)據(jù)，使用 Promise.all 來(lái)并發(fā)請(qǐng)求三個(gè)接口，如果其中任意一個(gè)接口出現(xiàn)異常，狀態(tài)是reject這會(huì)導(dǎo)致頁(yè)面中該三個(gè)區(qū)域數(shù)據(jù)全都無(wú)法出來(lái)，這個(gè)狀況我們是無(wú)法接受，Promise.allSettled的出現(xiàn)就可以解決這個(gè)痛點(diǎn)：

 
 
 
 
    
  
  
  
  
  1. Promise.allSettled([
    2. 
  
  
  
  
  2. Promise.reject({ code: 500, msg: '服務(wù)異常' }),
    3. 
  
  
  
  
  3. Promise.resolve({ code: 200, list: [] }),
    4. 
  
  
  
  
  4. Promise.resolve({ code: 200, list: [] })
    5. 
  
  
  
  
  5. ]).then(res => {
    6. 
  
  
  
  
  6. console.log(res)
    7. 
  
  
  
  
  7. /*
    8. 
  
  
  
  
  8.       0: {status: "rejected", reason: {…}}
    9. 
  
  
  
  
  9.       1: {status: "fulfilled", value: {…}}
    10. 
  
  
  
  
  10.       2: {status: "fulfilled", value: {…}}
    11. 
  
  
  
  
  11.   */
    12. 
  
  
  
  
  12. // 過(guò)濾掉 rejected 狀態(tài)，盡可能多的保證頁(yè)面區(qū)域數(shù)據(jù)渲染
    13. 
  
  
  
  
  13. RenderContent(
    14. 
  
  
  
  
  14.   res.filter(el => {
    15. 
  
  
  
  
  15.     return el.status !== 'rejected'
    16. 
  
  
  
  
  16.   })
    17. 
  
  
  
  
  17. )
    18. 
  
  
  
  
  18. })
    19.

Promise.allSettled跟Promise.all類似，其參數(shù)接受一個(gè)Promise的數(shù)組，返回一個(gè)新的Promise，唯一的不同在于，它不會(huì)進(jìn)行短路，也就是說(shuō)當(dāng)Promise全部處理完成后，我們可以拿到每個(gè)Promise的狀態(tài)，而不管是否處理成功。

Promise.allSettled的支持情況：

String.prototype.matchAll

如果一個(gè)正則表達(dá)式在字符串里面有多個(gè)匹配，現(xiàn)在一般使用g修飾符或y修飾符，在循環(huán)里面逐一取出。

 
 
 
 
    
  
  
  
  
  1. function collectGroup1 (regExp, str) {
    2. 
  
  
  
  
  2. const matches = []
    3. 
  
  
  
  
  3. while (true) {
    4. 
  
  
  
  
  4.   const match = regExp.exec(str)
    5. 
  
  
  
  
  5.   if (match === null) break
    6. 
  
  
  
  
  6.   matches.push(match[1])
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. return matches
    9. 
  
  
  
  
  9. }
    10. 
  
  
  
  
  10. console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
    11. 
  
  
  
  
  11. // [ 'foo', 'bar', 'baz' ] 
    ?
    12.

值得注意的是，如果沒有修飾符 /g, .exec() 只返回第一個(gè)匹配?，F(xiàn)在通過(guò)String.prototype.matchAll方法，可以一次性取出所有匹配。

 
 
 
 
    
  
  
  
  
  1. function collectGroup1 (regExp, str) {
    2. 
  
  
  
  
  2. let results = []
    3. 
  
  
  
  
  3. for (const match of str.matchAll(regExp)) {
    4. 
  
  
  
  
  4.   results.push(match[1])
    5. 
  
  
  
  
  5. }
    6. 
  
  
  
  
  6. return results
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. console.log(collectGroup1(/"([^"]*)"/g, `"foo" and "bar" and "baz"`))
    9. 
  
  
  
  
  9. // ["foo", "bar", "baz"]
    10. 
  
  
  
  
  10. ?
    11.

上面代碼中，由于string.matchAll(regex)返回的是遍歷器，所以可以用for...of循環(huán)取出。

String.prototype.matchAll的支持情況：

Dynamic import

現(xiàn)在前端打包資源越來(lái)越大，前端應(yīng)用初始化時(shí)根本不需要全部加載這些邏輯資源，為了首屏渲染速度更快，很多時(shí)候都是動(dòng)態(tài)導(dǎo)入（按需加載）模塊，比如懶加載圖片等，這樣可以幫助您提高應(yīng)用程序的性能。

其中按需加載這些邏輯資源都一般會(huì)在某一個(gè)事件回調(diào)中去執(zhí)行：

 
 
 
 
    
  
  
  
  
  1. el.onclick = () => {
    2. 
  
  
  
  
  2. import('/modules/my-module.js')
    3. 
  
  
  
  
  3.   .then(module => {
    4. 
  
  
  
  
  4.     // Do something with the module.
    5. 
  
  
  
  
  5.   })
    6. 
  
  
  
  
  6.   .catch(err => {
    7. 
  
  
  
  
  7.     // load error;
    8. 
  
  
  
  
  8.   })
    9. 
  
  
  
  
  9. }
    10.

import()可以用于script腳本中,import(module) 函數(shù)可以在任何地方調(diào)用。它返回一個(gè)解析為模塊對(duì)象的 promise。

這種使用方式也支持 await 關(guān)鍵字。

 
 
 
 
    
  
  
  
  
  1. let module = await import('/modules/my-module.js');
    2.

通過(guò)動(dòng)態(tài)導(dǎo)入代碼，您可以減少應(yīng)用程序加載所需的時(shí)間，并盡可能快地將某些內(nèi)容返回給用戶。

Dynamic import的支持情況：

BigInt

javascript 在 Math 上一直很糟糕的原因之一是只能安全的表示-(2^53-1)至 2^53-1 范圍的值，即Number.MIN_SAFE_INTEGER 至Number.MAX_SAFE_INTEGER，超出這個(gè)范圍的整數(shù)計(jì)算或者表示會(huì)丟失精度。

 
 
 
 
    
  
  
  
  
  1. var num = Number.MAX_SAFE_INTEGER; // -> 9007199254740991
    2. 
  
  
  
  
  2. ?
    3. 
  
  
  
  
  3. num = num + 1; // -> 9007199254740992
    4. 
  
  
  
  
  4. ?
    5. 
  
  
  
  
  5. // 再次加 +1 后無(wú)法正常運(yùn)算
    6. 
  
  
  
  
  6. num = num + 1; // -> 9007199254740992
    7. 
  
  
  
  
  7. ?
    8. 
  
  
  
  
  8. // 兩個(gè)不同的值，卻返回了true
    9. 
  
  
  
  
  9. 9007199254740992 === 9007199254740993 // -> true
    10.

于是 BigInt 應(yīng)運(yùn)而生，它是第7個(gè)原始類型，可安全地進(jìn)行大數(shù)整型計(jì)算。 你可以在BigInt上使用與普通數(shù)字相同的運(yùn)算符，例如 +, -, /, *, %等等。

創(chuàng)建 BigInt 類型的值也非常簡(jiǎn)單，只需要在數(shù)字后面加上 n 即可。例如，123 變?yōu)?123n。也可以使用全局方法 BigInt(value) 轉(zhuǎn)化，入?yún)?value 為數(shù)字或數(shù)字字符串。

 
 
 
 
    
  
  
  
  
  1. const aNumber = 111;
    2. 
  
  
  
  
  2. const aBigInt = BigInt(aNumber);
    3. 
  
  
  
  
  3. aBigInt === 111n // true
    4. 
  
  
  
  
  4. typeof aBigInt === 'bigint' // true
    5. 
  
  
  
  
  5. typeof 111 // "number"
    6. 
  
  
  
  
  6. typeof 111n // "bigint"
    7.

只要在數(shù)字末尾加上 n，就可以正確計(jì)算大數(shù)了：

 
 
 
 
    
  
  
  
  
  1. 1234567890123456789n * 123n;
    2. 
  
  
  
  
  2. // -> 151851850485185185047n
    3.

不過(guò)有一個(gè)問題，在大多數(shù)操作中，不能將 BigInt與Number混合使用。比較Number和 BigInt是可以的，但是不能把它們相加。

 
 
 
 
    
  
  
  
  
  1. 1n < 2 
    2. 
  
  
  
  
  2. // true
    3. 
  
  
  
  
  3. ?
    4. 
  
  
  
  
  4. 1n + 2
    5. 
  
  
  
  
  5. // Uncaught TypeError: Cannot mix BigInt and other types, use explicit conversions
    6.

BigInt的支持情況：

globalThis

globalThis 是一個(gè)全新的標(biāo)準(zhǔn)方法用來(lái)獲取全局 this 。之前開發(fā)者會(huì)通過(guò)如下的一些方法獲?。?/p>

  • 全局變量 window：是一個(gè)經(jīng)典的獲取全局對(duì)象的方法。但是它在 Node.js 和 Web Workers 中并不能使用

  • 全局變量 self：通常只在 Web Workers 和瀏覽器中生效。但是它不支持 Node.js。一些人會(huì)通過(guò)判斷 self 是否存在識(shí)別代碼是否運(yùn)行在 Web Workers 和瀏覽器中

  • 全局變量 global：只在 Node.js 中生效

過(guò)去獲取全局對(duì)象，可通過(guò)一個(gè)全局函數(shù)：

 
 
 
 
    
  
  
  
  
  1. // ES10之前的解決方案
    2. 
  
  
  
  
  2. const getGlobal = function(){
    3. 
  
  
  
  
  3. if(typeof self !== 'undefined') return self
    4. 
  
  
  
  
  4. if(typeof window !== 'undefined') return window
    5. 
  
  
  
  
  5. if(typeof global !== 'undefined') return global
    6. 
  
  
  
  
  6. throw new Error('unable to locate global object')
    7. 
  
  
  
  
  7. }
    8. 
  
  
  
  
  8. ?
    9. 
  
  
  
  
  9. // ES10內(nèi)置
    10. 
  
  
  
  
  10. globalThis.Array(0,1,2) // [0,1,2]
    11. 
  
  
  
  
  11. ?
    12. 
  
  
  
  
  12. // 定義一個(gè)全局對(duì)象v = { value:true } ,ES10用如下方式定義
    13. 
  
  
  
  
  13. globalThis.v = { value:true }
    14.

而globalThis 目的就是提供一種標(biāo)準(zhǔn)化方式訪問全局對(duì)象，有了 globalThis 后，你可以在任意上下文，任意時(shí)刻都能獲取到全局對(duì)象。

如果您在瀏覽器上，globalThis將為window，如果您在Node上，globalThis則將為global。因此，不再需要考慮不同的環(huán)境問題。

 
 
 
 
    
  
  
  
  
  1. // worker.js
    2. 
  
  
  
  
  2. globalThis === self
    3. 
  
  
  
  
  3. // node.js
    4. 
  
  
  
  
  4. globalThis === global
    5. 
  
  
  
  
  5. // browser.js
    6. 
  
  
  
  
  6. globalThis === window
    7.

新提案也規(guī)定了，Object.prototype 必須在全局對(duì)象的原型鏈中。下面的代碼在最新瀏覽器中已經(jīng)會(huì)返回 true 了：

 
 
 
 
    
  
  
  
  
  1. Object.prototype.isPrototypeOf(globalThis); // true
    2.

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

作者簡(jiǎn)介：

浪里行舟：碩士研究生，專注于前端。個(gè)人公眾號(hào)：「前端工匠」，致力于打造適合初中級(jí)工程師能夠快速吸收的一系列優(yōu)質(zhì)文章！

【原創(chuàng)稿件，合作站點(diǎn)轉(zhuǎn)載請(qǐng)注明原文作者和出處為.com】


網(wǎng)站標(biāo)題：不容錯(cuò)過(guò)！ES2020的七大新特性
文章轉(zhuǎn)載：http://www.dlmjj.cn/article/dhjschh.html