ES2020 已定稿,真實(shí)場(chǎng)景案例分析
近年來,JavaScript 的發(fā)展非常迅速。 尤其是在2015 年 ES6 發(fā)布之后,情況變得更好。
現(xiàn)在 許多新的特性被提議包括在 ES2020版本中。好消息是這些已經(jīng)已經(jīng)敲定。 現(xiàn)在,我們獲得了最終定稿的功能清單,它們將在被批準(zhǔn)發(fā)布之后出現(xiàn)在備受期待的 ES2020 中。 其中一些功能使我非常興奮,因?yàn)樵谒鼈兇嬖谥熬帉懘a時(shí)遇到將會(huì)遇到很多麻煩。 讓我們看看它們是什么吧!
可選鏈操作符(Optional Chaining Operator)
對(duì)我個(gè)人來說,這是 ES2020最令人興奮的特點(diǎn)之一。 我已經(jīng)編寫了很多程序,這些程序?qū)?huì)從這個(gè)新特性中獲益匪淺。
可選鏈操作符允許您安全地訪問對(duì)象的深嵌套屬性,而不必檢查每個(gè)屬性是否存在。 讓我們看看這個(gè)特性對(duì)我們有什么幫助。
擁有可選鏈操作符之前
const user = { firstName: "Joseph", lastName: "Kuruvilla", age: 38, address: { number: "239", street: "Ludwig Lane", city: "Chennai", zip: "600028", prop1: { prop2: { prop3: { prop4: { value: "sample", }, }, }, }, }, }; if (user && user.address) { console.log(user.address.zip); //600028 } if ( user && user.address && user.address.prop1 && user.address.prop1.prop2 && user.address.prop1.prop2.prop3 && user.address.prop1.prop2.prop3.prop4 ) { console.log(user.address.prop1.prop2.prop3.prop4.value); //sample } //Accessing unexisting property console.log(user.address.prop102.po); //Error
正如您在上面看到的,您必須檢查每個(gè)級(jí)別中是否存在該屬性,以避免出現(xiàn)無法讀取未定義屬性“ po”的錯(cuò)誤。 隨著嵌套級(jí)別的增加,手動(dòng)檢查的屬性數(shù)量也會(huì)增加。 這意味著我們必須檢查每個(gè)級(jí)別,以確保它不會(huì)在遇到未定義或空對(duì)象時(shí)崩潰。
擁有可選鏈?zhǔn)讲僮鞣?/strong>
隨著可選鏈?zhǔn)讲僮鞣?(Optional Chaining) 的引入,我們前端的工作變得容易多了。 通過簡(jiǎn)單地使用可選鏈?zhǔn)讲僮鞣?code>?.我們可以訪問深嵌套的對(duì)象,而不必檢查未定義或空對(duì)象。
讓我們看看它是如何運(yùn)作的。
const user = { firstName: "Joseph", lastName: "Kuruvilla", age: 38, address: { number: "239", street: "Ludwig Lane", city: "Chennai", zip: "600028", prop1: { prop2: { prop3: { prop4: { value: "sample", }, }, }, }, }, }; console.log(user?.address?.zip); // 600028 console.log(user?.address?.prop1?.prop2?.prop3?.prop4?.value); // sample //Accessing unexisting property console.log(user?.address?.prop102?.po); //undefined
太神奇了! ES2020 成功地通過引入一個(gè)單獨(dú)的代碼操作符?.
來減少了如此多的代碼行數(shù)!
空值合并操作符(Nullish coalescing operator)
這是另一個(gè)令我興奮的功能,當(dāng)我第一次在proposal stage, 了解到的時(shí)候,我由衷的喜歡這個(gè)特性,因?yàn)槲乙呀?jīng)歷了編寫單獨(dú)的函數(shù)來手動(dòng)檢查這個(gè)特性的麻煩。
空值合并操作符允許您檢查nullish
值而不是 falsey
值。 Nullish 值是指 null
或undefined
的值。 而 falsey 值是諸如空字符串、數(shù)字0、 undefined
、 null
、 false
、 NaN
等等的值。 這對(duì)你來說可能聽起來沒什么不同,但是在現(xiàn)實(shí)中,這意味著很多。
讓我們看看這是怎么回事。
在有空值合并操作符之前
我最近做了一個(gè)項(xiàng)目,我需要允許黑暗模式(Dark Mode)切換功能。 我必須檢查輸入是true
還是 false
。 如果用戶沒有設(shè)置任何值,則默認(rèn)為 true
。 下面就是我如何在有空值合并操作符之前實(shí)現(xiàn)它的:
const darkModePreference1 = true; const darkModePreference2 = false; const darkModePreference3 = undefined; const darkModePreference4 = null; const getUserDarkModePreference = (darkModePreference) => { if (darkModePreference || darkModePreference === false) { return darkModePreference; } return true; }; getUserDarkModePreference(darkModePreference1); // true getUserDarkModePreference(darkModePreference2); // false getUserDarkModePreference(darkModePreference3); // true getUserDarkModePreference(darkModePreference4); // true
在有空值合并操作符之后
在有空值合并操作符之后,您所要做的就是使用??
操作符。不需要 if
語句:
const darkModePreference1 = true; const darkModePreference2 = false; const darkModePreference3 = undefined; const darkModePreference4 = null; const getUserDarkModePreference = (darkModePreference) => { return darkModePreference ?? true; }; getUserDarkModePreference(darkModePreference1); // true getUserDarkModePreference(darkModePreference2); // false getUserDarkModePreference(darkModePreference3); // true getUserDarkModePreference(darkModePreference4); // true
這里基本上發(fā)生的情況是,如果變量 darkModePreference 包含一個(gè)nullish
值,那么將值 true 賦給它。 簡(jiǎn)單,簡(jiǎn)短,易于理解。
動(dòng)態(tài) import(Dynamic Imports)
這個(gè)特性將幫助您的應(yīng)用程序更加高效的執(zhí)行, 動(dòng)態(tài) import 允許您將 JS 文件作為原生應(yīng)用用程序中的模塊動(dòng)態(tài)導(dǎo)入。 在 ES2020之前,不管是否使用模塊,都應(yīng)該導(dǎo)入模塊。
例如,假設(shè)我們需要添加一個(gè)功能來下載 pdf 格式的文件。
讓我們看看如何在 動(dòng)態(tài) import 之前和之后實(shí)現(xiàn)這一點(diǎn)。
在 動(dòng)態(tài) import 之前
實(shí)際上,不會(huì)所有的頁面訪問者使用下載 pdf 的選項(xiàng)。 但是,無論我們的訪客是否使用它,它仍然需要被導(dǎo)入。 這意味著這個(gè) pdf 模塊也可以在頁面加載期間被下載。
import { exportAsPdf } from "./export-as-pdf.js"; const exportPdfButton = document.querySelector(".exportPdfBtn"); exportPdfButton.addEventListener("click", exportAsPdf);
這種開銷可以通過使用延遲加載模塊(lazy loaded modules)來減少。 可以通過稱為代碼分割 (code-splitting)的方法來實(shí)現(xiàn),這在 Webpack 或其他模塊打包工具已經(jīng)可以使用了。但是對(duì)于 ES2020,我們可以直接使用它了,而不需要模塊打包工具,如 Webpack。
在動(dòng)態(tài)導(dǎo)入(動(dòng)態(tài) import)之后
const exportPdfButton = document.querySelector('.exportPdfBtn'); exportPdfButton.addEventListener('click', () => { import('./export-as-pdf.js') .then(module => { module.exportAsPdf() }) .catch(err => { // handle the error if the module fails to load }) })
正如您在上面的代碼中看到的,現(xiàn)在只有在需要模塊時(shí)才延遲加載模塊。 從而減少開銷和頁面加載時(shí)間。
Promise.allSettled
如果你有一個(gè)場(chǎng)景,在所有 Promise 都完成之后必須執(zhí)行一個(gè)任務(wù),那么你可能使用Promise.all()
方法。 但是這個(gè)方法有一個(gè)缺點(diǎn)。 當(dāng)你的任何一個(gè) Promise 被 Rejected 時(shí),Promise 方法就會(huì)拋出一個(gè)錯(cuò)誤。 這意味著您的代碼不會(huì)等到所有的 Promise 都完成。
這可能不是你想要的。 如果你想要這樣的東西: “我不在乎他們的結(jié)果。 只需全部運(yùn)行” ,那么你可以使用新的Promise.allSettled()
方法。 這種方法只有在你的所有 Promise 都 settled
ーー 要么 Resolved
,要么 Rejected
ーー 時(shí)才會(huì) Resolved
。
在擁有 Promise.allSettled 之前
const PromiseArray = [ Promise.resolve(100), Promise.reject(null), Promise.resolve("Data release"), Promise.reject(new Error("Something went wrong")), ]; Promise.all(PromiseArray) .then((data) => console.log("all resolved! here are the resolve values:", data) ) .catch((err) => console.log("got rejected! reason:", err)); //got rejected! reason: null
如上所述,當(dāng)其中一個(gè) Promise 被rejected
時(shí), Promise 就會(huì)拋出錯(cuò)誤。
在擁有 Promise.allSettled 之后
const PromiseArray = [ Promise.resolve(100), Promise.reject(null), Promise.resolve("Data release"), Promise.reject(new Error("Something went wrong")), ]; Promise.allSettled(PromiseArray) .then((res) => { console.log(res); }) .catch((err) => console.log(err)); //[ // {status: "fulfilled", value: 100}, // {status: "rejected", reason: null}, // {status: "fulfilled", value: "Data release"}, // {status: "rejected", reason: Error: Something went wrong ...} //]
盡管有些 Promise 被rejected
了,Promise.allSettled 返回了所有的 Promise 的結(jié)果。
globalThis
globalThis
包含對(duì)全局對(duì)象的引用,與環(huán)境無關(guān)。 在瀏覽器中,全局對(duì)象是 window
對(duì)象。 在 Node 環(huán)境中,全局對(duì)象是 global
或者 Web workers 中的 self
。
在擁有 globalThis 之前
我們?cè)诠ぷ髦袝?huì)有需要編寫一份同時(shí)運(yùn)行在 Node 和瀏覽器中的通用代碼,當(dāng)我們要取得全局對(duì)象時(shí),通常需要做很多工作和邏輯判斷:
beforeGlobalThis = (typeof window !== "undefined" ? window : (typeof process === 'object' && typeof require === 'function' && typeof global === 'object') ? global : this); beforeGlobalThis.tuture = '小若燕雀,亦可一展宏圖';
在擁有 globalThis 之后
我們可以直接使用globalThis
去引用全局對(duì)象,而不用去擔(dān)心環(huán)境的問題:
globalThis.tuture = '小若燕雀,亦可一展宏圖';
上面的代碼在瀏覽器或者 Node 環(huán)境中都是通用的,你可以放心使用!
BigInt
允許您使用大于 Javascript 中允許的最大值的數(shù)字。 這個(gè)數(shù)字是pow(2,53)-1
。 盡管這不能向后兼容,因?yàn)閭鹘y(tǒng)的數(shù)字系統(tǒng)(IEEE 754)不能支持這種大小的數(shù)字。
String.matchall
matchAll()
是一個(gè)與正則表達(dá)式相關(guān)的方法。 此方法返回與正則表達(dá)式匹配的字符串的所有結(jié)果的迭代器,包括捕獲組。 這個(gè)方法已經(jīng)被添加到 String 原型中。
參考資源
ECMA
InfoQ
Article by Tyler Hawkins
總結(jié)
到此這篇關(guān)于ES2020 已定稿,真實(shí)場(chǎng)景案例分析的文章就介紹到這了,更多相關(guān)ES2020 已定稿內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
js 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 獲取當(dāng)前web應(yīng)用的上下文路徑實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-08-08js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10javascript開發(fā)實(shí)現(xiàn)貪吃蛇游戲
這篇文章主要為大家詳細(xì)介紹了javascript開發(fā)實(shí)現(xiàn)貪吃蛇游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能
在寫項(xiàng)目時(shí),難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進(jìn)行驗(yàn)證及必填項(xiàng)提示,圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽,這篇文章給大家介紹el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能,感興趣的朋友一起看看吧2024-01-01將input框中輸入內(nèi)容顯示在相應(yīng)的div中【三種方法可選】
本篇文章主要介紹了在input框中輸入內(nèi)容,會(huì)相應(yīng)的顯示在下面的div中的不同做法:js方法;jQuery方法;AngularJs方法,具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05js form 驗(yàn)證函數(shù) 當(dāng)前比較流行的錯(cuò)誤提示
js數(shù)據(jù)驗(yàn)證、js email驗(yàn)證、js url驗(yàn)證、js長度驗(yàn)證、js數(shù)字驗(yàn)證等2009-06-06HTML+JavaScript模擬實(shí)現(xiàn)簡(jiǎn)單的時(shí)鐘效果
在這篇文章中,主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時(shí)鐘,文中的示例代碼講解詳細(xì),感興趣的可以了解一下2022-08-08