如何使用 ECMAScript 2020 中的可选链操作符 nullish-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2020 是 JavaScript 的最新版本，引进了大量有用的新特性和语言功能，其中一个很实用的功能是可选链操作符 nullish。通过这个新操作符，开发者可以轻松地避免图谋多次访问对象属性和调用方法时所经常遇到的 null 或 undefined 问题。在本篇文章中，我们将深入探讨可选链操作符 nullish 的概念、使用方法和实际运用。

什么是可选链操作符 nullish？

在 JavaScript 中，当我们要访问一个对象的属性或者调用它的方法时，如果这个对象为空，则我们经常会遇到空指针异常的问题。以前，为了解决这个问题，开发者通常需要写一些模板式（模板模式）的代码来确保某个属性的存在性，例如：

if (obj && obj.prop1 && obj.prop1.prop2) {
  //做一些事情
}

使用可选链操作符 nullish，我们可以允许属性不存在并且仍然能够顺利地访问和调用方法，避免了空指针异常。

if (obj?.prop1?.prop2) {
  //做一些事情，避免了空指针异常
}

特别的，当属性不存在时，可选链操作符将返回 undefined 而非 null，因此在没有 null 值时，也能避免因 null 运算符而意外出现值。

let a = {
  prop1: null,
  prop2: "value2"
}
console.log(a.prop1 ?? "prop1 doesn't exist.");
console.log(a.prop3 ?? "prop3 doesn't exist.");
//null
//prop3 doesn't exist.

如上所示，当对象的属性值为 null 时，并非将实际值与真正的“空”值混淆。这样就可以避免在应用程序中的不良逻辑中总是使用 null 替代 undefined，并为代码的可读性和一致性构建更好的模板。

如何在自己的项目中使用可选链操作符 nullish?

对于大多数现代浏览器和 Node.js，ECMAScript 2020 的很多新特性已得到支持，例如：可选链操作符 nullish。因此，创建应用程序的开发者们可以在他们的项目中使用这些新特性，前提是还需要考虑淘汰早期或不支持的AWS服务或浏览器的用户。

由于可选链接操作符 nullish 是 ECMAScript 2020引入的新功能，不建议在晚期的发布中使用，以避免出现来自稍低版本父母的竞争。当然，这只是一种（相对）保守的方法，并不排除根据实际情况进行选择。

下面是使用可选链操作符 nullish 的示例代码。

class Person {
  constructor(address) {
    this.address = address;
  }
}

class Address {
  constructor(city) {
    this.city = city;
  }

  getCityName() {
    return this.city.name ?? "unknown";
  }
}

class City {
  constructor(name) {
    this.name = name;
  }
}

let city1 = new City("New York");
let city2 = new City("San Francisco");

let person1 = new Person(new Address(city1));
console.log(person1.address.getCityName()); //"New York"

let person2 = new Person(new Address(null));
console.log(person2.address.getCityName()); //"unknown"

let person3 = new Person(null);
console.log(person3.address?.getCityName()); //undefined

在上述示例中，可选链操作符在获取对象为 null 时返回 undefined，在获取对象的属性值为 null 时仍然能够正常访问。

总结

可选链操作符 nullish 是 JavaScript 的一个实用特性，可以避免空指针异常的问题、提高代码的可读性和一致性。在 ECMAScript 2020 中，这个新操作符提供了一种更加方便的方法来访问和调用对象的属性和方法。在项目中使用可选链操作符 nullish 时需要注意慎重使用，并且适当考虑浏览器或AWS服务的支持程度。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b5af89add4f0e0ffe6f5bb