JavaScript ES2020-您应该知道的功能

2020-09-10 11:30:51 浏览数 (40)

文章来源于公众号：前端人

ES2020 或 ECMAScript 2020 为 JavaScript 带来了令人兴奋的功能。在本文中，我想谈谈我最喜欢的 ES2020 功能。这意味着本文并未涵盖所有新增内容。因此，让我们看看我最喜欢的新功能：

  • 动态导入
  • 空位合并运算符
  • 可选链接运算符
  • 私有类变量Private
  • Promise.allSettled
  • 有关更多信息和所有其他内容，请查看官方的ECMAScript语言规范

动态导入

其中之一是我们可以使用async / await动态导入依赖项。这意味着我们不必先导入所有内容，并且仅在需要它们时才可以导入依赖项。结果，通过在运行时加载模块来提高应用程序的性能。

它如何提高性能？使用常规模块系统，我们在程序开始时静态导入模块。无论我们现在还是以后需要它们，我们都必须先导入它们。另外，在加载时会评估来自导入模块的所有代码。因此，它不必要地减慢了应用程序的速度。为什么？因为它会在执行代码之前下载导入的模块并评估每个模块的代码。

让我们来看一个例子。

if (calculations) {
    const calculator = await import('./calculator.js');
    const result = calculator.add(num1, num2);
    console.log(result);
}

在上面的代码片段中，您可以看到我们仅在要执行计算时才导入计算器模块。因此，我们不会通过在运行时之前加载所有代码来不必要地降低应用程序的速度。因此，动态导入是一个方便的补充。

空位合并运算符

“空值合并运算符（??）是一种逻辑运算符，当其左侧操作数为 null 或未定义时，将返回其右侧操作数，否则将返回其左侧操作数。”

基本上，Nullish合并运算符使我们可以检查值是否为 null 或未定义，并在这种情况下提供回退值。让我们看一个例子：

let score = 0;
let pass = score ?? 60;


console.log(pass);

在上面的代码段中，值为 pass0 。原因是 ?? 运算符不会将零强制为伪造的值。变量 pass 只得到 60 分配如果变量 score 是undefined或null。

但是，双管道“ ||”之间有什么区别？和这个运算符？当使用双管道“ ||”时，它总是返回真实值，这可能会导致某些意外结果。当使用空值合并运算符时，我们可以更加严格，因此仅当该值为 null 或未定义时才允许使用默认值。

例如，假设我们有以下代码：

let score = 0;
let pass = score || 60;


console.log(pass);

在上面的示例中，使用时，值 0 被视为虚假值 || 。在上面的代码片段中，值 pass 是 60 ，这不是我们想要的。因此，双问号允许我们检查变量是否为空，这意味着变量是未定义还是为空。

Promise.allSettled

使用可选的链接运算符，我们可以从对象访问深度嵌套的属性。如果属性存在，则运算符返回其值。如果该属性不存在，则运算符返回 undefined 。

const person = {
 name: "Catalin Pit",
 employer: {
  name: "Catalins Tech",
 }
};


console.log(person?.employer?.name);

上面的代码段说明了访问深度嵌套的对象属性的示例。但是，我们可以在数组和函数调用上使用它。在下面的代码段中，您可以看到我们检查数组是否存在，如果存在，则访问第三个值。此外，您还可以查看检查 API 是否存在某个函数，如果存在，则将其调用。

const allowedValues = [1, 5, 10, 13, 90, 111];
console.log(allowedValues?.[2]);


// functional call
const response = myAPI.getData?.();

总之，可选的链接运算符非常方便，它还有助于我们使代码更具可读性和简短性。

私有类变量

从现在开始，我们也可以在 JavaScript 中的类中创建私有变量。制作私有变量所需要做的就是在变量前面添加哈希符号。例如，#firstName 是一个私有变量，不能在类外部访问。

尝试在类外部调用该变量会导致 SyntaxError 。

class Person {
  #firstName = "Catalin";
  getFirstName() 
  { 
      console.log(this.#firstName) 
   }
}


const person1 = new Person();
person1.getFirstName() // "Catalin"


// Returns "undefined"
console.log(person1.firstName); 
// Returns "Uncaught SyntaxError: Private field '#firstName' must be declared in an enclosing class"
console.log(person1.#firstName);

在上面的代码中，您可以看到一个私有类变量在起作用。尝试 firstName 在类外访问变量，我们收到一个错误。因此，当我们不想在类外公开数据时，添加便很方便。

文章中的补充内容并非唯一。还有更多，我鼓励您查看官方的 ECMAScript 语言规范来查看所有这些内容。

以上就是W3Cschool字节宝关于JavaScript ES2020-您应该知道的功能的相关介绍了，希望对大家有所帮助。

JavaScript

3 人点赞