程序员小明的"崩溃瞬间"
某天，程序员小明在调试一个接口时，遇到了这样的代码：
const data = res.data.list;
然而，当res为null时，页面直接崩溃了！小明抓狂地写下一连串if判断：
if (res && res.data && res.data.list) { ... }
同事老张路过，神秘一笑："试试这个符号——?.，保证你代码少一半！"
从此，小明打开了JavaScript操作符的"魔法世界"……
那些看似古怪却超实用的操作符
1. 可选链操作符 ?. —— 防止"连环爆炸"的救星
场景：访问深层嵌套对象属性时，避免因中间值为null/undefined而报错。
// 传统写法：层层判断
const data = res && res.data && res.data.list;
// 魔法写法！
const data = res?.data?.list; // 若任一环节为null/undefined，返回undefined
解释：?.像安全探针一样逐层探测，遇到无效链直接返回undefined，而非崩溃。
2. 空值合并操作符 ?? —— 比||更聪明的默认值
场景：设置默认值，但需区分0、''等有效值与null/undefined。
// 传统写法：0会被误判为无效
const price = inputPrice || 100;
// 魔法写法！
const price = inputPrice ?? 100; // 仅在inputPrice为null/undefined时启用默认值
解释：||会将0、''、false视为无效，而??只认null/undefined。
3. 逻辑与&&和逻辑或|| —— 短路的"双面间谍"
场景：条件执行或快速返回有效值。
// 利用短路特性执行函数
isLoaded && fetchData(); // 仅当isLoaded为true时执行
// 获取第一个有效值
const username = user.nickname || user.id || '匿名用户';
陷阱：&&返回第一个假值，||返回第一个真值，灵活但需谨慎。
4. 双感叹号!! —— 布尔值的"强制转换器"
场景：将任意值快速转换为true/false。
const hasToken = !!localStorage.getItem('token'); // 转为明确的布尔值
原理：相当于连续两次取反，将"真值"（如对象、非空字符串）转为true，"假值"（如0、null）转为false。
5. 空值赋值??=和逻辑或赋值||= —— 懒人赋值法
场景：仅在变量为空时赋予默认值。
// 传统写法
if (user.avatar === null) user.avatar = 'default.png';
// 魔法写法！
user.avatar ??= 'default.png'; // 仅当avatar为null/undefined时赋值
config.timeout ||= 5000; // 传统写法：config.timeout = config.timeout || 5000;
区别：??=避开0和''的误判，||=兼容旧逻辑
附赠彩蛋：冷门但有趣的符号
1. 逗号操作符 ,：执行多个表达式，返回最后一个值
let x = (console.log('hi'), 100); // 输出"hi"，x=100
2. 位运算符~~和|0：快速取整（比Math.floor更快）
~~3.14; // 3
3.14 | 0; // 3
总结：让代码更优雅的"符号哲学"
这些操作符的初衷是减少冗余代码，同时提升可读性和安全性。但需注意：
- 避免过度使用：如嵌套过多的
?.可能掩盖潜在的数据结构问题。 - 理解底层逻辑：比如
||与??的区别，避免误用。 - 兼容性检查：
?.和??需ES2020+环境支持。
动手试试这些符号，让你的代码从此告别"臃肿"！ ✨
🔥 关注我的公众号「哈希茶馆」一起交流更多开发技巧
