介绍
在本文中,您将了解最新升级 ES2020 中推出的新 JavaScript 功能。 Nullish Coalescing 和 Optional Chain Operators 等功能有助于定义您的 JavaScript 语法,而动态导入使您的代码保持模块化。
私有类变量
类包含您可以在可重用模块中使用的属性。 如果您在各种文件中重用这些属性,您可能不希望所有内容都在全局范围内可用。
为了解决这个问题,私有类变量保留了在类中使用的属性和方法。 属性和方法前面的井号表示私有类变量。
class Message {
#message = "Howdy";
greet() {
console.log(this.#message);
};
};
const greeting = new Message()
greeting.greet() // Howdy
console.log(greeting.#message) // #message is not defined
请注意,在类外部调用 greet 方法会返回一个值。 私有属性上的 console.log 返回错误。
Promise.allSettled()
当您使用多个 Promise 时,尤其是当它们相互依赖时,记录每个进程以调试错误可能很有用。
使用 Promise.allSettled(),您可以创建一个新的 Promise,它在作为参数传入的 Promise 已解析时返回:
const p1 = new Promise((res, rej) => setTimeout(res, 1000)); const p2 = new Promise((res, rej) => setTimeout(rej, 1000)); Promise.allSettled([p1, p2]).then(data => console.log(data));
这将输出一个对象数组,其中包含每个 promise 的状态和值:
Output[
Object { status: "fulfilled", value: undefined},
Object { status: "rejected", reason: undefined}
]
在这里,Promise.allSettled() 提供了一个数组,其中包含 p1 和 p2 承诺的状态和值。
空值合并运算符
由于 JavaScript 是松散类型的,因此在分配变量时请记住真值和假值。 如果您有一个包含数据的对象,您可能希望允许虚假值,例如空字符串或数字 0。
当左操作数不是 null 或 undefined 时,空值合并运算符 (??) 识别并返回假值。
let person = {
profile: {
name: "",
age: 0
}
};
console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18
相反,请注意 OR 运算符 (||) 如果左边是假的,则返回右边的操作数。
console.log(person.profile.name ?? "Anonymous"); // "" console.log(person.profile.age ?? 18); // 0
相反,Nullish Coalescing Operator 返回虚假值,因为 name 和 age 属性都不是 null 或 undefined。
可选的链接运算符
与虚假值交互的另一种方法是使用可选链接运算符 (?.)。 如果引用为空,则操作员将提供一种访问对象内未定义属性的方法。
let person = {};
console.log(person.profile.name ?? "Anonymous"); // person.profile is not defined
console.log(person?.profile?.name ?? "Anonymous"); // no error
console.log(person?.profile?.age ?? 18); // no error
Optional Chaining Operator 不会引发错误,而是允许您与评估为 undefined 的属性进行交互。
注意:参考这篇文章了解更多关于可选链和空值合并。
BigInt
JavaScript 可以处理的最大数字是 2^53,您可以使用属性 MAX_SAFE_INTEGER 来验证。
const max = Number.MAX_SAFE_INTEGER; console.log(max); // 9007199254740991
任何高于 max 变量值的数字都可能不可靠:
console.log(max + 1); // 9007199254740992 console.log(max + 2); // 9007199254740992 console.log(max + 3); // 9007199254740994 console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true
使用内置的 BigInt 对象,将 n 附加到每个大整数的末尾以进行计算。 BigInt 数字只能与其他 BigInt 数字一起计算。
const bigNum = 100000000000000000000000000000n; console.log(bigNum * 2n); // 200000000000000000000000000000n
bigNum 的 BigInt 值与 2n 相乘得到 200000000000000000000000000000n。
动态导入
如果你有一个实用函数文件,你可能不会全部使用它们,并且导入它们的依赖项可能会浪费资源。 现在 async/await 带有附加功能,可以在必要时导入您的依赖项。
以下是 math.js 文件中的实用函数示例:
数学.js
const add = (num1, num2) => num1 + num2;
export { add };
下面是一个使用实用函数的 index.js 文件示例:
index.js
const doMath = async (num1, num2) => {
if (num1 && num2) {
const math = await import('./math.js');
console.log(math.add(5, 10));
};
};
doMath(4, 2);
在 index.js 中,await 表达式现在可以处理 math.js 的导入并使用文件中包含的逻辑。
结论
随着每次 JavaScript 升级,新功能都会根据开发人员和社区的反馈添加动态功能、定义的属性和更高的性能。