ES2020 已定稿,真實場景案例分析
近年來，JavaScript 的發(fā)展非常迅速。 尤其是在2015 年 ES6 發(fā)布之后，情況變得更好。
現(xiàn)在 許多新的特性被提議包括在 ES2020版本中。好消息是這些已經(jīng)已經(jīng)敲定。 現(xiàn)在，我們獲得了最終定稿的功能清單，它們將在被批準發(fā)布之后出現(xiàn)在備受期待的 ES2020 中。 其中一些功能使我非常興奮，因為在它們存在之前編寫代碼時遇到將會遇到很多麻煩。 讓我們看看它們是什么吧！
可選鏈操作符（Optional Chaining Operator）
對我個人來說，這是 ES2020最令人興奮的特點之一。 我已經(jīng)編寫了很多程序，這些程序將會從這個新特性中獲益匪淺。
可選鏈操作符允許您安全地訪問對象的深嵌套屬性，而不必檢查每個屬性是否存在。 讓我們看看這個特性對我們有什么幫助。
擁有可選鏈操作符之前
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
正如您在上面看到的，您必須檢查每個級別中是否存在該屬性，以避免出現(xiàn)無法讀取未定義屬性“ po”的錯誤。 隨著嵌套級別的增加，手動檢查的屬性數(shù)量也會增加。 這意味著我們必須檢查每個級別，以確保它不會在遇到未定義或空對象時崩潰。
擁有可選鏈式操作符之后
隨著可選鏈式操作符 (Optional Chaining) 的引入，我們前端的工作變得容易多了。 通過簡單地使用可選鏈式操作符?.我們可以訪問深嵌套的對象，而不必檢查未定義或空對象。
讓我們看看它是如何運作的。
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 成功地通過引入一個單獨的代碼操作符?.來減少了如此多的代碼行數(shù)！
空值合并操作符（Nullish coalescing operator）
這是另一個令我興奮的功能，當我第一次在proposal stage， 了解到的時候，我由衷的喜歡這個特性，因為我已經(jīng)歷了編寫單獨的函數(shù)來手動檢查這個特性的麻煩。
空值合并操作符允許您檢查nullish值而不是 falsey值。 Nullish 值是指 null或undefined的值。 而 falsey 值是諸如空字符串、數(shù)字0、 undefined、 null、 false、 NaN等等的值。 這對你來說可能聽起來沒什么不同，但是在現(xiàn)實中，這意味著很多。
讓我們看看這是怎么回事。
在有空值合并操作符之前
我最近做了一個項目，我需要允許黑暗模式（Dark Mode）切換功能。 我必須檢查輸入是true還是 false。 如果用戶沒有設置任何值，則默認為 true。 下面就是我如何在有空值合并操作符之前實現(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 包含一個nullish值，那么將值 true 賦給它。 簡單，簡短，易于理解。
動態(tài) import（Dynamic Imports）
這個特性將幫助您的應用程序更加高效的執(zhí)行， 動態(tài) import 允許您將 JS 文件作為原生應用用程序中的模塊動態(tài)導入。 在 ES2020之前，不管是否使用模塊，都應該導入模塊。
例如，假設我們需要添加一個功能來下載 pdf 格式的文件。
讓我們看看如何在 動態(tài) import 之前和之后實現(xiàn)這一點。
在 動態(tài) import 之前
實際上，不會所有的頁面訪問者使用下載 pdf 的選項。 但是，無論我們的訪客是否使用它，它仍然需要被導入。 這意味著這個 pdf 模塊也可以在頁面加載期間被下載。
import { exportAsPdf } from "./export-as-pdf.js";
const exportPdfButton = document.querySelector(".exportPdfBtn");
exportPdfButton.addEventListener("click", exportAsPdf);
這種開銷可以通過使用延遲加載模塊（lazy loaded modules）來減少。 可以通過稱為代碼分割 （code-splitting）的方法來實現(xiàn)，這在 Webpack 或其他模塊打包工具已經(jīng)可以使用了。但是對于 ES2020，我們可以直接使用它了，而不需要模塊打包工具，如 Webpack。
在動態(tài)導入（動態(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)在只有在需要模塊時才延遲加載模塊。 從而減少開銷和頁面加載時間。
Promise.allSettled
如果你有一個場景，在所有 Promise 都完成之后必須執(zhí)行一個任務，那么你可能使用Promise.all()方法。 但是這個方法有一個缺點。 當你的任何一個 Promise 被 Rejected 時，Promise 方法就會拋出一個錯誤。 這意味著您的代碼不會等到所有的 Promise 都完成。
這可能不是你想要的。 如果你想要這樣的東西: “我不在乎他們的結果。 只需全部運行” ，那么你可以使用新的Promise.allSettled()方法。 這種方法只有在你的所有 Promise 都 settledーー 要么 Resolved，要么 Rejectedーー 時才會 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
如上所述，當其中一個 Promise 被rejected時， Promise 就會拋出錯誤。
在擁有 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 的結果。
globalThis
globalThis包含對全局對象的引用，與環(huán)境無關。 在瀏覽器中，全局對象是 window對象。 在 Node 環(huán)境中，全局對象是 global或者 Web workers 中的 self。
在擁有 globalThis 之前
我們在工作中會有需要編寫一份同時運行在 Node 和瀏覽器中的通用代碼，當我們要取得全局對象時，通常需要做很多工作和邏輯判斷：
beforeGlobalThis = (typeof window !== "undefined" ? window : (typeof process === 'object' && typeof require === 'function' && typeof global === 'object') ? global : this); beforeGlobalThis.tuture = '小若燕雀，亦可一展宏圖';
在擁有 globalThis 之后
我們可以直接使用globalThis去引用全局對象，而不用去擔心環(huán)境的問題：
globalThis.tuture = '小若燕雀，亦可一展宏圖';
上面的代碼在瀏覽器或者 Node 環(huán)境中都是通用的，你可以放心使用！
BigInt
允許您使用大于 Javascript 中允許的最大值的數(shù)字。 這個數(shù)字是pow(2,53)-1。 盡管這不能向后兼容，因為傳統(tǒng)的數(shù)字系統(tǒng)(IEEE 754)不能支持這種大小的數(shù)字。
String.matchall
matchAll()是一個與正則表達式相關的方法。 此方法返回與正則表達式匹配的字符串的所有結果的迭代器，包括捕獲組。 這個方法已經(jīng)被添加到 String 原型中。
參考資源
ECMA
InfoQ
Article by Tyler Hawkins
總結
到此這篇關于ES2020 已定稿,真實場景案例分析的文章就介紹到這了,更多相關ES2020 已定稿內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
下面小編就為大家?guī)硪黄猨s 獲取當前web應用的上下文路徑實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
（兼容ff/ie）td點擊背景變色特效...2007-08-08
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標移入移出卡片切換內容，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要為大家詳細介紹了javascript開發(fā)實現(xiàn)貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
最近在做Web 頁面，雖然不是很喜歡，不過既然公司安排了，就好好做吧，還是學了不少東西。2009-06-06
在寫項目時,難免遇到需要上傳表單,圖片等文件,且表單內容需進行驗證及必填項提示,圖片需要和信息一起傳遞且圖片載入后需可預覽,這篇文章給大家介紹el-form實現(xiàn)表單和圖片手動上傳和校驗功能,感興趣的朋友一起看看吧2024-01-01
將input框中輸入內容顯示在相應的div中【三種方法可選】
本篇文章主要介紹了在input框中輸入內容，會相應的顯示在下面的div中的不同做法：js方法；jQuery方法；AngularJs方法，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
js數(shù)據(jù)驗證、js email驗證、js url驗證、js長度驗證、js數(shù)字驗證等2009-06-06
這篇文章主要介紹了JavaScript中的函數(shù)的相關資料，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-09-09
HTML+JavaScript模擬實現(xiàn)簡單的時鐘效果
在這篇文章中，主要將向大家展示如何使用?HTML、CSS?和?JavaScript代碼制作模擬時鐘，文中的示例代碼講解詳細，感興趣的可以了解一下2022-08-08