介绍
在本文中,您将了解最新升级ES20中发布的新的JavaScript功能。Nullish Coalescing和可选链操作员等功能有助于定义您的JavaScript语法,而动态导入将您的代码保持模块化。
个人类变量
类包含可重复使用的模块中使用的属性. 如果您在各种文件中重复使用这些属性,您可能不想让所有内容在全球范围内可用。
为了解决此问题,私有类变量将属性和方法保留在一个类内使用,属性和方法前面的哈希符号表示私有类变量。
1class Message {
2 #message = "Howdy";
3
4 greet() {
5 console.log(this.#message);
6 };
7};
8
9const greeting = new Message()
10
11greeting.greet() // Howdy
12console.log(greeting.#message) // #message is not defined
请注意,在类之外调用问候方法会返回一个值。
( )
当您使用多个承诺时,特别是当它们相互依赖时,记录每个进程来调试错误可能是有用的。
使用Promise.allSettled(),您可以创建一个新的承诺,当承诺通过时返回,因为参数已经解决了:
1const p1 = new Promise((res, rej) => setTimeout(res, 1000));
2
3const p2 = new Promise((res, rej) => setTimeout(rej, 1000));
4
5Promise.allSettled([p1, p2]).then(data => console.log(data));
这将输出一系列具有每个承诺的状态和值的对象:
1[secondary_label Output]
2[
3 Object { status: "fulfilled", value: undefined},
4 Object { status: "rejected", reason: undefined}
5]
在这里,‘Promise.allSettled()’ 提供了包含‘p1’ 和‘p2’ 承诺的状态和值的数组。
零合并操作员
由于 JavaScript 编写得很宽松,所以在分配变量时要记住真值和假值,如果您有包含数据的对象,则可能需要允许虚假值,如空字符串或0。
Nullish Coalescing 运算符 (??) 识别并返回错误值,如果左运算符不是null或undefined`。
1let person = {
2 profile: {
3 name: "",
4 age: 0
5 }
6};
7
8console.log(person.profile.name || "Anonymous"); // Anonymous
9console.log(person.profile.age || 18); // 18
相比之下,请注意,如果左方是假的,则 OR 操作员(‘ Átha’)会返回右方操作员。
1console.log(person.profile.name ?? "Anonymous"); // ""
2console.log(person.profile.age ?? 18); // 0
相反, Nullish Coalescing Operator 返回错误值,因为名称和年龄属性都不是null或未定义。
可选链运营商
与虚假值进行交互的另一种方法是使用可选链操作器(?.)。如果引用是无效的,该操作器将提供一种方法来访问对象中的未定义属性。
1let person = {};
2
3console.log(person.profile.name ?? "Anonymous"); // person.profile is not defined
4console.log(person?.profile?.name ?? "Anonymous"); // no error
5console.log(person?.profile?.age ?? 18); // no error
相反,可选链操作器允许您与评估为未定义的属性进行交互。
<$>[注] 注: 请参阅 此帖子以了解更多关于可选链接和无效合并的信息。
《BigInt》
JavaScript 可以处理的最大数字是 2^53,您可以使用属性 MAX_SAFE_INTEGER 验证。
1const max = Number.MAX_SAFE_INTEGER;
2
3console.log(max); // 9007199254740991
在max变量中的值以上的任何数字可能无法保持可靠性:
1console.log(max + 1); // 9007199254740992
2console.log(max + 2); // 9007199254740992
3console.log(max + 3); // 9007199254740994
4console.log(Math.pow(2, 53) == Math.pow(2, 53) + 1); // true
使用内置的BigInt对象,为您的计算添加n到每个大整数的末尾。
1const bigNum = 100000000000000000000000000000n;
2
3console.log(bigNum * 2n); // 200000000000000000000000000000n
bigNum 的 BigInt 值以 2n 倍增,产生 200000000000000000000000000000n。
动态进口
如果你有一个实用函数文件,你可能不会使用所有这些函数,而导入他们的依赖可能是一个浪费资源。
以下是「math.js」文件中的一个实用函数的示例:
1[label math.js]
2const add = (num1, num2) => num1 + num2;
3
4export { add };
以下是使用实用函数的 index.js 文件的示例:
1[label index.js]
2const doMath = async (num1, num2) => {
3 if (num1 && num2) {
4 const math = await import('./math.js');
5 console.log(math.add(5, 10));
6 };
7};
8
9doMath(4, 2);
在index.js中,等待表达式现在可以处理math.js的导入,并使用文件中包含的逻辑。
结论
每次升级JavaScript,新功能都会增加动态功能,定义属性,并从开发人员和社区的反馈中获得更大的性能。