ECMAScript 2020 新特性之可空链操作符解析-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2020 是 JavaScript 的最新标准，其中包含了一些新的语言特性和语法糖，其中一个被广泛关注的特性就是可空链操作符。

在 JavaScript 中，我们经常会遇到需要检查对象或变量是否为空或 null 的情况。通常我们会使用短路运算符或三元运算符来进行判断，但这些方法都不够简洁和优雅。可空链操作符的出现就是为了解决这个问题。

可空链操作符是什么？

可空链操作符（nullish coalescing operator）是一种新的运算符，用于处理变量或对象为空或 null 的情况。它的语法为 ??，它可以在变量或对象为空或 null 时返回一个默认值。

下面是一个使用可空链操作符的示例：

const foo = null;
const bar = foo ?? 'default';

console.log(bar); // 输出 'default'

在上面的示例中，变量 foo 是 null，所以 bar 的值被设置为 'default'。

与其他运算符的比较

可空链操作符与其他运算符的行为有所不同。下面是一些常见的运算符和它们的行为：

逻辑或运算符

逻辑或运算符 || 在判断变量或对象为空或 null 时会返回一个 falsy 值。例如：

const foo = null;
const bar = foo || 'default';

console.log(bar); // 输出 'default'

在上面的示例中，变量 foo 是 null，所以 bar 的值被设置为 'default'。

但是，当变量或对象的值为 falsy 值时，逻辑或运算符会返回该值本身而不是默认值。例如：

const foo = '';
const bar = foo || 'default';

console.log(bar); // 输出 ''

在上面的示例中，变量 foo 的值为 ''，这是一个 falsy 值，所以 bar 的值被设置为 '' 而不是 'default'。

三元运算符

三元运算符 ?: 也可以用于处理变量或对象为空或 null 的情况。例如：

const foo = null;
const bar = foo !== null ? foo : 'default';

console.log(bar); // 输出 'default'

在上面的示例中，变量 foo 是 null，所以 bar 的值被设置为 'default'。

但是，三元运算符的语法比较冗长，不够简洁。而且当需要判断多个变量或对象时，代码会变得更加冗长。

可空链操作符

可空链操作符 ?? 是一种更加简洁和优雅的处理变量或对象为空或 null 的方法。例如：

const foo = null;
const bar = foo ?? 'default';

console.log(bar); // 输出 'default'

在上面的示例中，变量 foo 是 null，所以 bar 的值被设置为 'default'。

深度使用可空链操作符

可空链操作符不仅可以用于处理单个变量或对象，还可以用于处理深层次的嵌套结构。

例如，假设我们有一个对象 user，其中包含一个 address 对象，address 对象中包含一个 city 属性。我们可以使用可空链操作符来获取 user 对象的 city 属性，如果 user 对象或 address 对象为空或 null，就返回一个默认值：

// javascriptcn.com 代码示例
const user = {
  name: 'Alice',
  address: {
    city: 'New York'
  }
};

const city = user?.address?.city ?? 'unknown';

console.log(city); // 输出 'New York'

在上面的示例中，我们使用了可空链操作符 ?. 来获取 user 对象的 address 对象和 address 对象的 city 属性。如果 user 对象或 address 对象为空或 null，就会返回 undefined。然后我们使用可空链操作符 ?? 来设置一个默认值 'unknown'。

总结

可空链操作符是 ECMAScript 2020 中一个非常实用的特性，它可以简化我们处理变量或对象为空或 null 的情况。它的语法简洁，易于理解和使用。我们可以使用可空链操作符来代替短路运算符和三元运算符，从而使代码更加优雅和易于维护。

在实际开发中，我们应该尽可能地使用可空链操作符来处理变量或对象为空或 null 的情况，以提高代码的可读性和可维护性。

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