介绍
在本文中,您将了解最新升级 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 升级,新功能都会根据开发人员和社区的反馈添加动态功能、定义的属性和更高的性能。