js 可选链?.，逻辑与&&，逻辑或||，空值合并??

空值合并操作符"??“，我第一次看到它，就和它的表示符号一样，满脸问号？。在实际开发中我会经常用到&&和||，但不得不承认，我确实没有用到过”??“。原因是”??"操作符是ES2020定义的。哈哈，总算是给自己找了个借口！接下来我们就一起来了解下这个新的操作符吧。先回顾下我们熟悉的&&和||吧。

可选链 ?.

可选链运算符（?.）允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah',
  },
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// Expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// Expected output: undefined

连用可选链运算符

let customer = {
  name: "Carl",
  details: {
    age: 82,
    location: "Paradise Falls", // details 的 address 属性未有定义
  },
};
let customerCity = customer.details?.address?.city;

// … 可选链也可以和函数调用一起使用
let duration = vacations.trip?.getTime?.();

逻辑与&&

先问大家一个问题：使用逻辑&&连接两边表达式，返回值总是true或false吗？
请看下面代码：

const o = { x:1, y:1 };
const { x, y } = o;
console.log(x === 0 && y === 1); // false
console.log(o && o.x); // 1
console.log(o && o.z); // undefined

因此&&不一定返回true或false。
如果左侧为假值，则返回左侧值；如果左侧为真值，则返回右侧值。

其实这是我的一个误区，我一直以为使用&&，返回值一定是Boolean值。

逻辑或（||）

和&&类似，我们直接通过代码看：

// 我们经常使用||来赋值操作
let num = oneNumber || 10;// 如果oneNumber是假值，那么num就是10

但这里会有一个问题，如果oneNumber的值是0（假值¹），也会取右侧的值10。可以通过下面空值合并运算符??解决。

空值合并运算符??

??操作符是ES2020定义的。
?? 和 ||是非常类似的，唯一的却别即使假值的判断，比如上面使用||暴露来的问题。

// 我们经常使用||来赋值操作
let num = oneNumber || 10;// 如果oneNumber是假值，那么num就是10
// 使用??就可以解决，oneNumber是0的问题
let num = oneNumber ?? 10;// 如果oneNumber是0，就会给num赋值0

总结：?? 与 || 的区别

相同点

用法相同，都是前后是值，中间用符号连接。根据前面的值来判断最终返回前面的值还是后面的值。
值1 ?? 值2
值1 || 值2

不同点

判断方式不同：
使用 ?? 时，只有当值1为null或undefined时才返回值2；
使用 || 时，值1会转换为布尔值判断，为true返回值1，false 返回值2

// ??
undefined ?? 2// 2
null ?? 2// 2
0 ?? 2// 0
"" ?? 2// ""
true ?? 2// true
false ?? 2// false

// ||
undefined || 2// 2
null || 2// 2
0 || 2// 2
"" || 2// 2
true || 2// true
false || 2// 2

总的来说，??更加适合在不知道变量是否有值时使用。

---

1. 假值包括：false, null, undefined, 0, -0, NaN和""，所有其他值，包括所有对象都是真值。 ↩︎