ES10 妙用 Optional Chaining 和 Nullish Coalescing 运算符.-JavaScript中文网-JavaScript教程资源分享门户

ES10（ECMAScript 2019）在 JavaScript 语言中引入了两个新的运算符 Optional Chaining 和 Nullish Coalescing。这两个运算符的出现使得开发者的代码更加简洁，同时提高了代码的可读性和可维护性。在前端开发中，我们时常会面对空值或者未定义的情况，Optional Chaining 和 Nullish Coalescing 运算符可谓是解决问题的利器。

Optional Chaining 运算符

Optional Chaining 运算符（?.）会在当前值存在的情况下进行属性或元素的访问。如果当前值为 null 或 undefined，代码会停止执行并返回 undefined。这个运算符在处理深层对象时非常有用，因为深层次的数据结构中，可能出现数字、字符串、对象不存在的情况，这些情况在我们代码中引用对象时就需要通过复杂的判断逻辑来进行处理。而 Optional Chaining 运算符对于这种情况下的代码处理提供了一种非常简洁的方式。

我们来看一下 Optional Chaining 运算符的使用示例。

// javascriptcn.com 代码示例
const user = {
  name: 'Jenny',
  address: {
    street: 'Beijing Street',
    city: 'Beijing',
    country: 'China'
  }
};

const street = user?.address?.street;
console.log(street); // 'Beijing Street'

const phone = user?.phone?.number;
console.log(phone); // undefined

从上面的代码示例可以看到，我们使用 Optional Chaining 运算符来获取 user 对象中嵌套的 address 对象中的 street 属性的值。当我们尝试获取一个不存在的属性 phone.number 时，代码不会报错，而是返回一个 undefined 值。

Nullish Coalescing 运算符

Nullish Coalescing 运算符（??）在检查给定值是否为 null 或 undefined 时非常有用，在一些语言中，例如 Python，我们可以使用‘or’运算符来检查该值是否为 null 或 undefined。JavaScript 中这样的运算符是非常常见的，但并不是很精确。Nullish Coalescing 运算符就是为了解决这个问题而设计的。这个运算符会首先判断相应的值是否为 null 或者 undefined，如果是的话就返回第二个表达式的值，否则返回第一个表达式的值。

我们来看一下 Nullish Coalescing 运算符的使用示例。

const name = '';
const userName = name ?? 'Anonymous';

console.log(userName); // ''

从上面的代码示例可以看到，在处理传递来的参数时，我们使用了 Nullish Coalescing 运算符，将默认值设置为 ‘Anonymous’，如果获得的值不是 null 或 undefined，那么意味着值是有效的，不需要使用默认值，反之才是需要使用默认值。

示范实战

下面我们通过一个示范实战来展示 Optional Chaining 和 Nullish Coalescing 运算符的妙用。

// javascriptcn.com 代码示例
const user = {
  name: 'Jenny',
  address: {
    street: 'Beijing Street',
    city: 'Beijing',
    country: 'China'
  }
};

const user2 = {
  name: 'Mike',
  address: null
};

function getAddress(user) {
  return user.address?.street ?? 'Unknown';
}

console.log(getAddress(user)); // 'Beijing Street'
console.log(getAddress(user2)); // 'Unknown'

上面的代码示例中，我们定义了一个函数 getAddress，这个函数接受一个 user 对象作为参数，并返回嵌套在该对象中的 street 属性的值。如果地址不存在，函数就会返回‘Unknown’。

在调用 getAddress 函数时，我们使用了 Optional Chaining 运算符和 Nullish Coalescing 运算符来避免用复杂的逻辑（例如 if 语句或三元运算符）进行地址是否存在的判断，同时在不存在地址的情况下返回默认的值‘Unknown’。

总结

在 JavaScript 编程的过程中，可能会遇到对象上嵌套对象或者我们无法完全控制代码逻辑开发的情况，这时候，使用 Optional Chaining 运算符和 Nullish Coalescing 运算符可以让代码更加优雅，易于维护。当我们在开发时需要处理复杂的数据结构和变量存在时的情况，Optional Chaining 和 Nullish Coalescing 运算符能够帮助我们更加清晰地写出高质量的代码。

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