JavaScript中 ? ?、??=、?.和 ||的区别浅析

在JavaScript中，存在 ? ?、??=、?.和 ||四种运算符，他们都有着不同的用途。本文将会对这些运算符的使用场景进行详细的说明并配有示例。

1. ? ?运算符

? ?运算符称为Nullish coalescing operator，它的作用是当左侧操作数为 undefined 或 null 时，返回右侧操作数，否则返回左侧操作数。

示例1：

const foo = null;
const bar = 'hello';
const result = foo ?? bar;
console.log(result); // 'hello'

上面的代码中，由于 foo 的值为 null，所以当执行 foo ?? bar 时，返回的值为 bar。

示例2：

const foo = false;
const bar = 'hello';
const result = foo ?? bar;
console.log(result); // false

上面的代码中，由于 foo 的值为 false，所以当执行 foo ?? bar 时，返回的值为 false。

2. ??=运算符

??=运算符称为nullish coalescing assignment operator，它的作用是只有当变量的值为undefined或null时，才会给变量赋予指定的默认值，否则不会赋值。

示例：

let foo;
foo ||= 'default';
console.log(foo); // 'default'

foo = 'value';
foo ||= 'default';
console.log(foo); // 'value'

上面的代码中，第一个 foo ||= 'default' 执行时，foo 的值为 undefined，因此将 'default' 赋值给 foo，输出结果为 'default'。第二个 foo ||= 'default' 执行时，由于 foo 的值为 'value'，因此不会执行赋值操作，输出结果为 'value'。

3. ?.运算符

?.运算符称为Optional Chaining Operator，它的作用是简化多层嵌套对象的属性访问。如果使用 ?. 运算符时，前面的属性值存在，那么就返回该属性值，否则返回 undefined。

示例：

const obj = {
  prop1: {
    prop2: {
      prop3: 'hello'
    }
  }
};

console.log(obj?.prop1?.prop2?.prop3); // 'hello'
console.log(obj?.prop1?.prop2?.prop4); // undefined

上面的代码中，第一个 console.log 输出 obj.prop1.prop2.prop3 的值，结果为 'hello'；第二个 console.log 输出 obj.prop1.prop2.prop4 的值，由于该属性不存在，不会报错并返回 undefined。

4. ||运算符

||运算符称为Logical OR Operator，它的作用是返回第一个真值或最后一个假值。

示例1：

const foo = '';
const bar = 'hello';
const baz = null;
const result = foo || bar || baz;
console.log(result); // 'hello'

上面的代码中，由于 foo 的值为 ''，不是真值，因此继续判断 bar，由于 bar 的值为 'hello'，是真值，因此返回 'hello'。

示例2：

const foo = false;
const bar = '';
const result = foo || bar;
console.log(result); // ''

上面的代码中，由于 foo 的值为 false，是假值，因此继续判断 bar，由于 bar 的值为 ''，也是假值，因此返回 ''。

总结

以上就是JavaScript中 ? ?、??=、?.和 ||的区别浅析的详细讲解。需要注意的是，这些运算符在不同的场景下具有不同的作用，合理运用才能发挥其最大的功效。