悠悠楠杉
网站页面
JavaScript 中问号的三种用法 ??和?.以及?:
06/03
简介
?? 被称为空值合并运算符，它用于从左到右的两个表达式中返回第一个“非假值”（falsy）的结果。假值包括false、0、""（空字符串）、null、undefined和NaN。
应用场景
- 当你想给一个变量一个默认值，而这个变量可能是未定义或为假值时。
- 在解构赋值时，如果右边的值不存在或为假值，可以提供一个默认值。
示例代码
```javascript
let a;
console.log(a ?? '默认值'); // 输出 "默认值"
const config = { limit: 5 };
const { limit = 10 } = config ?? {}; // 如果config不存在或为假值，则使用空对象作为默认值
console.log(limit); // 输出 5
```
2. ?. 可选链操作符
简介
?. 是可选链操作符，它允许你安全地访问深层次的对象属性而不必显式地逐层验证每个引用是否有效。如果任何一环为null或undefined，表达式短路返回undefined，否则返回该值。
应用场景
- 在处理不确定是否存在的嵌套对象属性时。
- 减少嵌套对象访问时的错误。
示例代码
javascript
const user = { profile: { name: '张三' } };
console.log(user?.profile?.name); // 输出 "张三"
console.log(user?.address?.city); // 输出 undefined，因为user.address是undefined
3. :? 在条件运算符中的应用（虽非ES标准）
尽管这不是JavaScript ES标准中的直接用法，但为了完整性提及，:?通常在伪代码或某些特定框架的语法中表示条件运算符的另一种写法，其作用与?:（三元运算符）相似，用于基于条件执行不同的操作。然而，在标准的JavaScript中，我们使用的是简单的三元运算符形式：条件 ? 表达式1 : 表达式2。
应用场景及示例（使用标准三元运算符）
- 当需要根据条件选择执行不同的代码块时。
- 在函数或方法中根据返回值进行逻辑分支。
示例代码（使用标准三元运算符）
javascript
const score = 85;
const grade = score >= 60 ? '及格' : '不及格'; // 如果分数大于等于60分，则为'及格'；否则为'不及格'。
console.log(grade); // 输出 "及格"
小结与最佳实践
- 使用空值合并运算符（
??）为变量提供默认值时，确保你的默认值是合理且期望的。这可以减少因未定义或空值导致的错误。 - 可选链操作符（
?.）是处理深层嵌套对象时的一个强大工具，可以有效避免因层级中的null或undefined而导致的错误。然而，过度使用可能导致代码可读性下降，需谨慎。 - 对于条件判断和选择执行不同逻辑，使用标准的三元运算符（
:?虽不是JS标准用法），它简单且直观。注意保持代码的清晰和简洁性。 - 在实际开发中，结合以上技巧，可以有效地提升代码的健壮性和可读性，减少因数据不确定性导致的错误。
