前端??和||的区别

const user = { profile: { name: '张三' } };

const userName = user.profile?.name ?? '匿名';

// 结果: userName = '张三'

此代码首先演示了如何使用可选链运算符 (?.) 安全地访问user.profile的name值。如果user.profile是undefined或null，它会短路并返回undefined，从而避免潜在的类型错误TypeError。

然后，使用空值合并运算符 (??) 检查左侧是否为null或undefined，如果是，则使用默认值'匿名'。这可确保后备值不会是其他假值（如''或0）。这对于访问数据结构中可能不存在某些中间属性的深层嵌套属性非常有用。

注意：

在 JavaScript 中，空值合并运算符 (??) 和逻辑或 (||) 都可以用于提供默认值，但它们处理假值的方式有所不同。

在上面的例子中，如果把??改为||，行为会稍微有些不同。||的左侧如果为假值，它将会返回右侧的值。JavaScript 中的假值包括null、undefined、0、NaN、''（空字符串）和false。这意味着||左边的值不仅仅是null或undefined，如果还是其他假值，那么都将返回右侧的值。