前言

最初学会使用两个问号(??)的时候，是从师父那学来的。我也解释不清它是啥意思，只知道师父在电脑那头秀这段代码的时候，我大脑宕机了，心想：不愧是大佬，真会玩。于是我默默记住了这两“问号”，从此以后，在我项目中运用到飞起，尤其是在处理接口请求回来的数据方面，屡试不爽。直到某一天，我知道总会有那么一天，闲来无事，看到一篇文章，涉及到关于这俩“问号”与逻辑或的区别，我想：是时候揭盖它的面目了......

一、合并运算符 ??

“??” 是ES2020引入的新运算符；
“??” 是严格的空值合并运算符，只有在左侧操作数为 null 或 undefined 时才会返回右侧的操作数，否则返回左侧操作数；
“??” 不会将假值（false、0、''等）视为 null 或 undefined，他们仍然会被视为有效值。

代码示例：

    // 模拟接口返回的数据
    const res = {
      data: {
        name: '',
        age: 18,
        legend: 0,
        isShow: false,
        type: undefined,
        hobby: null,
      },
      status: 200,
    }
    // 获取接口返回的数据，并使用 ?? 分别定义默认值
    const name = res?.data?.name ?? '一二'
    const legend = res?.data?.legend ?? 1
    const isShow = res?.data?.isShow ?? true
    const type = res?.data?.type ?? '类型1'
    const hobby = res?.data?.hobby ?? '吃饭、睡觉、写代码'

    // 打印结果
    console.log(name, 'name') // ''
    console.log(legend, 'legend') // 0
    console.log(isShow, 'isShow') // false
    console.log(type, 'type') // '类型1'
    console.log(hobby, 'hobby') // '吃饭、睡觉、写代码'

二、逻辑运算符 ||

“||” 是 javascript 早期就有的逻辑运算符；
“||” 是一种逻辑或运算符，左侧的操作数为真时返回左侧操作数，否则返回右侧操作数；
“||” 会将假值视为 false。

代码示例：

    // 模拟接口返回的数据
    const res = {
      data: {
        name: '',
        age: 18,
        legend: 0,
        isShow: false,
        type: undefined,
        hobby: null,
      },
      status: 200,
    }
    // 获取接口返回的数据，并使用 || 分别定义默认值
    const name = res?.data?.name || '一二'
    const legend = res?.data?.legend || 1
    const isShow = res?.data?.isShow || true
    const type = res?.data?.type || '类型1'
    const hobby = res?.data?.hobby || '吃饭、睡觉、写代码'

    // 打印结果
    console.log(name, 'name') // '一二'
    console.log(legend, 'legend') // 1
    console.log(isShow, 'isShow') // true
    console.log(type, 'type') // '类型1'
    console.log(hobby, 'hobby') // '吃饭、睡觉、写代码'

结语

通过以上对比，就显而易见了。总结下来一句话：使用 “??” 时只有 null 或 undefined 才会返回默认值，而使用 “||” 时假值也会返回默认值，所以 “??” 较于 “||” 更精确。可算弄明白两者之间的区别，可不敢瞎用了，害！。

我一直把 ?? 当成 || 来使用了......

前言

一、合并运算符 ??

二、逻辑运算符 ||

结语