了解ES2020中的新JavaScript功能

来自菜鸟教程
跳转至:导航、​搜索

介绍

在本文中,您将了解最新升级 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() 提供了一个数组,其中包含 p1p2 承诺的状态和值。

空值合并运算符

由于 JavaScript 是松散类型的,因此在分配变量时请记住真值和假值。 如果您有一个包含数据的对象,您可能希望允许虚假值,例如空字符串或数字 0。

当左操作数不是 nullundefined 时,空值合并运算符 (??) 识别并返回假值。

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 返回虚假值,因为 nameage 属性都不是 nullundefined

可选的链接运算符

与虚假值交互的另一种方法是使用可选链接运算符 (?.)。 如果引用为空,则操作员将提供一种访问对象内未定义属性的方法。

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

bigNumBigInt 值与 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 升级,新功能都会根据开发人员和社区的反馈添加动态功能、定义的属性和更高的性能。