ES2020 學(xué)習(xí)筆記
1. babel 環(huán)境配置
babel 版本在7.8以上眯牧，babel-cli 8以上均支持es2020中的語法，具體可參照本項目的webpack配置
2. es2020 中值得關(guān)注的點
對象定義中的私有變量
當(dāng)我們創(chuàng)建一個類的時候赖草，該類會在各個場景下被使用学少，可能我們并不希望每一個內(nèi)部的參數(shù)都被全局共享，因此在方法或者變量前添加#秧骑，使得該方法或者類名只在類內(nèi)部可用
class Person {
#type = "man";
constructor(name) {
this.name = name;
}
showType() {
console.log(`${this.name} is ${this.#type}`);
}
}
const jack = new Person("Jack");
jack.showType(); // Jack is man
jack.#type // Error: #type is private value
在外部調(diào)用私有變量的話就會報錯
使用方法：在類內(nèi)部屬性或者變量前加入#號版确，使得變量變?yōu)樗接凶兞?/strong>
Promise.allSettled
當(dāng)我們使用多 promise 的時候扣囊，特別是當(dāng)每個 promise 之間存在以來關(guān)系的時候，記錄每個 Promise 的返回值對錯誤調(diào)試而言是很重要的绒疗。使用 Promise.allSettled侵歇，創(chuàng)造了一種新的 promise，通過該 promise 所有傳入的 promise 全部完成后會返回一個數(shù)組吓蘑，該數(shù)組中包含了每一個 promise 的返回值和狀態(tài)
const promise1 = new Promise((resolve, reject) =>
setTimeout(() => {
resolve({ type: "success", msg: "Yes" });
}, 1000)
);
const promise2 = new Promise((resolve, reject) =>
setTimeout(() => {
reject({ type: "fail", msg: "No" });
}, 2000)
);
Promise.all([promise1, promise2])
.then(data => {
console.log("success=");
console.log(data);
})
.catch(data => {
console.log("fail=");
console.log(data);
});
// 過了兩秒會顯示 { type: "fail", msg: "No" }
// 使用Promise.all只會返回錯誤的promise返回的信息
// 而正確的Promise返回的信息并不會被得到
Promise.allSettled([promise1, promise2]).then(data => {
console.log("allSettled");
console.log(data);
});
/*
[
{
status: 'fullfilled',
value: { type: "success", msg: "Yes" }
}, {
status: 'rejected',
value: { type: "fail", msg: "No" }
}
]
*/
Nullish Coalescing Operator(不知道怎么翻譯 QAQ)
由于 JavaScript 具有動態(tài)類型的特點惕虑，因此在變量賦值的時候需要記住一個變量在 JavaScript 中的真假值。比如：當(dāng)一個對象中含有某些之士修，我們希望給他一個“假”的初始值枷遂，之后通過判斷來改寫他，我們會賦值給他例如數(shù)字 0, 空字符串等等棋嘲。但是如果０和空字符串本身是有意義的酒唉，這樣做就會存在問題。
通常情況下使用 || 來進行默認(rèn)值的賦值
let person = {
profile: {
name: "",
age: 0
}
};
console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18
而在對象當(dāng)中沸移，我們想要賦值的情況是痪伦，如果為 null 或者 undefined 的時候,賦予默認(rèn)值雹锣，其他時候保持原樣网沾，因此提出了??運算符
可選鏈?zhǔn)秸{(diào)用
類似于??操作符，JavaScript 現(xiàn)在是能夠處理值為 undefined 和 null 的情況蕊爵，但是如果對象或者數(shù)組調(diào)用的路徑是 undefined 會怎么樣?
為了能夠通過繼續(xù)訪問該變量辉哥，在.操作符之前增加一個?符號，用于模擬出一個可選的路徑攒射。
如果不存在該值醋旦，則返回 undefined
const a = {};
console.log(a.b.c); // 這里會報Err， 無法從undefined中得到c
console.log(person?.profile?.name); // ""
console.log(person?.hobby?.work); // undefined
console.log(person?.hobby?.work ?? "no Work"); // no Work
可選鏈?zhǔn)秸{(diào)用在函數(shù)和數(shù)組上的調(diào)用方法
依然是?和.操作符
BigInt
目前 JavaScript 能夠處理的最大的數(shù)為 2^53,即最大安全整數(shù) Number.MAX_SAFE_INTEGER
根據(jù)你不知道的 JavaScript 中卷中描述会放，在處理的超過安全范圍的數(shù)的時候會出現(xiàn)問題
另外饲齐，對于非安全最大數(shù) MAX_VALUE,由于采取的是向接近數(shù)取整的原則，更是有各種問題
如：
Math.pow(2, 53) === Math.pow(2, 53) + 1; // true
Number.MAX_VALUE + Number.MAX_VALUE === Infinity; // true
Number.MAX_VALUE + 1 === Number.MAX_VALUE; // true
我們可以通過 BigInt 來解決這個問題咧最。通過在數(shù)字末尾添加字母 n捂人，來實現(xiàn)一個 BigInt 類型。
但是我們不能混用 BigInt 和 number 類型矢沿，因此在使用運算的時候我們都需要通過 BigInt 類型進行計算
// BigInt
a = 1000000000000000000000000000000000000000000000n;
b = 2n;
c = 2;
console.log(a * b); // 2000000000000000000000000000000000000000000000n
console.log(a * c); // Cannot mix BigInt and other types, use explicit conversions
動態(tài)加載
如果你需要在代碼中的部分場景中滥搭，使用一個工具類中的部分極少的函數(shù)，但是我們直接引入依賴可能會造成資源的浪費咨察，現(xiàn)在可以通過 async/await 異步的方式论熙，在我們需要依賴的時候動態(tài)加載依賴項
// add.js
export const add = (a, b) => a + b;
// index.js
let math;
const useAdd = async (num1, num2) => {
const _math = math ?? (await import("./add.js"));
math = _math ?? add;
const value = math?.add?.(num1, num2);
console.log(value);
};
useAdd(1, 2); // 3
useAdd(4, 5); // 9
