?? 、 || 、&&=、||=、??=这些运算符你用对了吗?

在日常开发中，你是不是也常用||来给变量设置默认值？比如

const title = props.title || '默认标题';

看起来好像没什么大问题，但是当title是0,false或者""的时候，或者思考比较全面的同学可能会额外加上关于0，false，''的判断，但其实有更简单的方法，就是使用??

?? 和 || 的区别

运算符	规则
||	如果左边是 null 或 undefined，返回右边
??	如果左边是"假值"（false、0、''、null、undefined），返回右边

??运算符是ES2020 引入的，除了引入了??，自从ES2020以来，还引入了其他几个运算符

可选链?.

用于安全访问多层嵌套对象属性，避免手动判断每一级是否存在

const city = user?.address?.city;

• 如果 user 或 user.address 为 null未定义，不会抛错，而是直接返回 undefined
• 支持属性访问: obj?.prop
• 支持数组规线访问: arr?.[0]
• 支持函数调用: fn?.()

逻辑与赋值&&=

其实等价于x &&= y → x = x && y

当值为 true 时才赋值

逻辑或赋值||=

等价于x ||= y → x = x || y

当值为 false 时才赋值

空值合并赋值??=

等价于x ??= y → x = x ?? y

保留 0/空字符/假值，当值为 null 或 undefined 时才赋值

let username = null;
username ??= 'Guest'; // 结果: 'Guest'

我看还有一些人介绍!!运算符，其实这个不算新加入的，甚至不是一个整体的运算符，他一直存在，只不过是利用了!的特性，做的一种常用写法