JavaScript中??、、||、?.运算的区别

在 JavaScript 中，??、&&、||、?. 是不同的运算符，用途和行为差异较大，具体区别如下：

1. ??（空值合并运算符）

作用：判断左侧操作数是否为 null 或 undefined，如果是则返回右侧操作数，否则返回左侧操作数。

特点：仅对 null/undefined 生效，对其他 “假值”（如 0、''、false）不生效。

console.log(null ?? '默认值'); // '默认值'（左侧为null）
console.log(undefined ?? '默认值'); // '默认值'（左侧为undefined）
console.log(0 ?? '默认值'); // 0（左侧是0，非null/undefined）
console.log('' ?? '默认值'); // ''（左侧是空字符串，非null/undefined）

2. &&（逻辑与运算符）

作用：对操作数进行 “逻辑与” 判断，返回第一个 “假值”（如果有），否则返回最后一个 “真值”。

特点：短路逻辑 —— 如果左侧为 “假值”，则直接返回左侧，不再执行右侧；只有左侧为 “真值” 时，才返回右侧。

“假值” 范围：false、0、''、null、undefined、NaN。

console.log(true && '右侧值'); // '右侧值'（左侧为真，返回右侧）
console.log(0 && '右侧值'); // 0（左侧为假，返回左侧）
console.log('a' && 'b' && 'c'); // 'c'（所有为真，返回最后一个）

3. ||（逻辑或运算符）

作用：对操作数进行 “逻辑或” 判断，返回第一个 “真值”（如果有），否则返回最后一个 “假值”。

特点：短路逻辑 —— 如果左侧为 “真值”，则直接返回左侧，不再执行右侧；只有左侧为 “假值” 时，才返回右侧。

console.log(false || '右侧值'); // '右侧值'（左侧为假，返回右侧）
console.log('左侧值' || '右侧值'); // '左侧值'（左侧为真，返回左侧）
console.log(0 || '' || null || '最后一个'); // '最后一个'（前面都是假，返回最后一个真）

4. ?.（可选链运算符）

作用：安全地访问嵌套对象的属性，避免因中间属性为 null/undefined 而抛出 Cannot read property 'x' of undefined 错误。

特点：如果左侧操作数为 null/undefined，则表达式直接返回 undefined，不再继续访问后续属性。

const obj = { a: { b: 10 } };console.log(obj?.a?.b); // 10（正常访问）
console.log(obj?.c?.d); // undefined（obj.c 不存在，返回undefined，不报错）
console.log(null?.a); // undefined（左侧为null，直接返回undefined）

核心区别总结

运算符	作用	关键特点	适用场景
??	处理 null/undefined	仅对 null/undefined 生效	设置默认值（排除 0/'' 等）
&&	逻辑与，取第一个假值或最后真值	短路逻辑，左侧假则返回左侧	条件执行（如 flag && doSomething()）
`		`	逻辑或，取第一个真值或最后假值	短路逻辑，左侧真则返回左侧	设置默认值（包含 0/'' 等）
?.	安全访问嵌套属性	避免中间属性不存在导致的错误	访问可能不存在的嵌套对象属性