(资料图片仅供参考)

在前端开发过程中，我们在设置默认值的时候，会经常用到 || 和 ?? , 但是这两者有什么区别呢？分别在什么场景下面使用呢，会有哪些坑呢，今天我们来梳理下呢。

|| 的语法作用

console.log(null || 1)                //输出 1console.log(undefined || 1)       //输出1     console.log(0 || 1)                   //输出1 console.log("" || 1)                   //输出1 console.log(1 || null)               //输出1 console.log(undefined || "")      //输出""console.log(undefined || 0)      //输出0console.log(undefined || null)   //输出nullconsole.log(null || undefined)   //输出undefinedconsole.log("" || undefined)   //输出undefinedconsole.log(0 || undefined)   //输出undefined

在这里可以看出，使用 || 的时候，当第一个值为非0非null非""非undefined的时候，优先取第一个值，而当第一个值是0或""或null或undefined的时候，则优先取第二个参数的值。

?? 的语法作用

console.log(null ?? 1)                //输出 1console.log(undefined ?? 1)       //输出1     console.log(0 ?? 1)                   //输出0 console.log("" ?? 1)                   //输出"" console.log(1 ?? null)               //输出1 console.log(undefined ?? "")      //输出""console.log(undefined ?? 0)      //输出0console.log(undefined ?? null)   //输出nullconsole.log(null ?? undefined)   //输出undefinedconsole.log("" ?? undefined)   //输出""console.log(0 ?? undefined)   //输出0

在这里可以看出，使用 ?? 的时候，当第一个值为非null非undefined的时候，优先取第一个值，而当第一个值是null或undefined的时候，则优先取第二个参数的值。

|| 和 ?? 的对比总结

对比 || 和 ??后，发现 || 的处理是针对于0或空或null或undefined都去获取后面的默认值，而??则是针对于null或undefined的时候，去获取后面的默认值，则对应的场景如下：

1. 当一个变量值可能为空0或者""的时候，希望最后展示的是默认值的时候，则只能使用 || 来处理
2. 当一个变量值可能为null或undefined的时候，希望最后展示的是默认值的时候，则优先使用 ?? 来处理