# Js中?.、??、??=的用法及使用场景

> 深入了解JavaScript中的可选链操作符(?.)、空值合并操作符(??)和逻辑赋值操作符(??=)的用法及其在实际开发中的应用场景。

**Published by:** [liuziting](https://paragraph.com/@lzt/)
**Published on:** 2023-11-07
**Categories:** javascript
**URL:** https://paragraph.com/@lzt/js%E4%B8%AD%E3%80%81%E3%80%81%3D%E7%9A%84%E7%94%A8%E6%B3%95%E5%8F%8A%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF

## Content

在JavaScript中，我们经常会遇到需要处理可能为空或未定义的变量的情况。这时，如果直接访问对象的属性，往往会导致程序崩溃。为了防止这种情况发生，JavaScript引入了一些新的操作符：可选链操作符(?.)、空值合并操作符(??)和逻辑赋值操作符(??=)。可选链操作符(?.)可选链操作符允许我们安全地读取深层次的属性值，而不必每次都检查中间的对象是否存在。例如：const user = {}; console.log(user?.address?.title); // undefined, 错误未发生 const arr= { foo: { bar: { baz: 42 } }, xyz: [] }; const value1 = obj?.foo?.bar?.baz; // 如果任何中间属性不存在或为空，value 将为 undefined //除了对属性的检查，还可以用于对数组下标及函数的检查 const value2 = obj?.xyz?.[0]?.fn?.(); // 传统写法 const value1 = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz; // 需要手动检查每个属性 const value2 = obj && obj.xyz && obj.xyz[0] && obj.xyz[0].fn && obj.xyz[0].fn();使用场景链式访问对象属性，而不必手动检查每个属性是否存在。调用可能不存在的函数。空值合并操作符(??)空值合并操作符是当左侧的表达式结果为null或undefined时，返回右侧的表达式。例如：const a = null; const b = undefined; const c = 0; const d = ''; cosnt e = false; const value1 = a ?? 'default'; // 'default'，因为 a 是 null const value2 = b ?? 'default'; // 'default'，因为 b 是 undefined const value3 = c ?? 'default'; // 0，因为 c 不是 null 或 undefined const value4 = d ?? 'default'; // ''，因为 d 不是 null 或 undefined const value5 = e ?? 'default'; // false，因为 e 不是 null 或 undefined //可能存在的传统写法，除了null,undefined, 无法兼容0、''、false的情况,使用时要特别小心 const value1 = a || 'default'; // 'default' const value2 = b || 'default'; // 'default' const value3 = c || 'default'; // 'default'，因为 0 转布尔类型是 false const value4 = d || 'default'; // 'default'，因为 '' 转布尔类型是 false const value5 = e || 'default'; // 'default'使用场景提供默认值，而不使用 false 值（如空字符串、0 等）。在处理可能为 null 或 undefined 的变量时，选择性地提供备用值。逻辑赋值操作符(??=)当变量为null或undefined时，使用空值合并赋值操作符可以给变量赋一个默认值。例如：let a = null; let b = undefined; let c = 0; a ??= 'default'; // 'default'，因为 a 是 null b ??= 'default'; // 'default'，因为 b 是 undefined c ??= 'default'; // 0，因为 c 的初始值不是 null 或 undefined 总的来说，这些新的操作符大大增强了JavaScript处理可能为空或未定义的情况的能力，使我们的代码更安全，更易于阅读和维护。使用场景在变量没有被赋值或被赋值为 null 或 undefined 时，将默认值分配给变量这些运算符在处理可能为 null 或 undefined 的值时非常有用，可以简化代码并提高可读性。然而，需要注意的是，它们是在 ECMAScript 2020 标准中引入的，因此在旧版本的 JavaScript 中可能不被支持。

## Publication Information

- [liuziting](https://paragraph.com/@lzt/): Publication homepage
- [All Posts](https://paragraph.com/@lzt/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@lzt): Subscribe to updates

## Optional

- [Collect as NFT](https://paragraph.com/@lzt/js%E4%B8%AD%E3%80%81%E3%80%81%3D%E7%9A%84%E7%94%A8%E6%B3%95%E5%8F%8A%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF): Support the author by collecting this post
- [View Collectors](https://paragraph.com/@lzt/js%E4%B8%AD%E3%80%81%E3%80%81%3D%E7%9A%84%E7%94%A8%E6%B3%95%E5%8F%8A%E4%BD%BF%E7%94%A8%E5%9C%BA%E6%99%AF/collectors): See who has collected this post