介绍

在本文中，您将了解最新升级 ES2020 中推出的新 JavaScript 功能。Nullish Coalescing 和 Optional Chain Operators 等功能有助于定义您的 JavaScript 语法，而 Dynamic Import 使您的代码保持模块化。

私有类变量

类包含可用于可重用模块的属性。如果您在各种文件中重用这些属性，您可能不希望所有内容都全局可用。

为了解决这个问题，私有类变量保留了在类中使用的属性和方法。属性和方法前面的哈希符号表示私有类变量。

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将属性设为私有的A 会返回错误。

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。

??当左操作数不是nullor时，Nullish Coalescing Operator( ) 识别并返回假值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 合并运算符返回假值，因为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。

注意：请参阅此帖子以了解有关 Optional Chaining 和 Nullish Coalescing 的更多信息。

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

的BigInt值bigNum乘以2n产生200000000000000000000000000000n。

动态导入

如果您有一个实用程序函数文件，您可能不会使用所有这些函数，并且导入它们的依赖项可能会浪费资源。现在async/await带有附加功能，可以在必要时导入您的依赖项。

以下是math.js文件中实用程序函数的示例：

const add = (num1, num2) => num1 + num2;

export { add };

以下是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 的每次升级，新功能都会从开发人员和社区的反馈中添加动态功能、定义的属性和更高的性能。