如何在 ES12 中使用 Nullish Coalescing 和 Optional Chaining-JavaScript中文网-JavaScript教程资源分享门户

在 ES12 中，Nullish Coalescing 和 Optional Chaining 是两个非常实用的操作符，它们可以帮助开发者更加便捷地处理 null 或 undefined 值的情况。本文将详细介绍它们的用法和示例代码，并指导开发者如何在实际项目中应用它们。

Nullish Coalescing

当我们需要判断一个值是否为 null 或 undefined 时，通常会使用 || 运算符，例如：

const foo = null || 'default';
console.log(foo); // 'default'

但是，这种方式有一个问题，就是当值为 falsy 值时（例如 0、''、false），也会被认为是 null 或 undefined，导致错误的结果。这时，Nullish Coalescing 就派上用场了。

Nullish Coalescing 使用 ?? 运算符，只有当值为 null 或 undefined 时才会返回默认值。例如：

const foo = null ?? 'default';
console.log(foo); // 'default'

const bar = 0 ?? 'default';
console.log(bar); // 0

可以看到，Nullish Coalescing 可以更准确地判断值是否为 null 或 undefined，避免了因 falsy 值导致的错误结果。

在处理对象属性时，经常需要判断属性是否存在，例如：

const obj = { foo: { bar: 'baz' } };
if (obj && obj.foo && obj.foo.bar) {
  console.log(obj.foo.bar); // 'baz'
}

这种写法比较繁琐，而 Optional Chaining 可以简化这个过程。Optional Chaining 使用 ?. 运算符，可以在属性不存在时直接返回 undefined，例如：

const obj = { foo: { bar: 'baz' } };
console.log(obj?.foo?.bar); // 'baz'

const obj2 = { foo: null };
console.log(obj2?.foo?.bar); // undefined

可以看到，Optional Chaining 可以大大简化代码，避免了繁琐的判断过程。

以上是 Nullish Coalescing 和 Optional Chaining 的用法和示例，接下来介绍它们在实际项目中的应用。

在处理后端返回的数据时，经常会遇到 null 或 undefined 值，这时可以使用 Nullish Coalescing 来设置默认值，例如：

const data = apiResponse.data ?? [];

这样，如果接口返回的数据为 null 或 undefined，就会使用默认值 []。

在操作对象属性时，经常需要判断属性是否存在，这时可以使用 Optional Chaining 来简化代码，例如：

const name = obj?.user?.name ?? 'default';

这样，如果 obj 或 user 或 name 不存在，就会使用默认值 'default'。

在调用函数时，经常需要判断函数是否存在，这时可以使用 Optional Chaining 来简化代码，例如：

const result = obj?.func?.() ?? 'default';

这样，如果 obj 或 func 不存在，就会使用默认值 'default'。

Nullish Coalescing 和 Optional Chaining 是 ES12 中非常实用的操作符，可以帮助开发者更加便捷地处理 null 或 undefined 值的情况。在实际项目中，我们可以根据具体情况应用它们，提高代码的可读性和简洁性。

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