详解JavaScript中?.、??和??=的用法及使用场景

const obj = {
 foo: {
   bar: {
     baz: 42
   }
 }
};
// 使用可选链操作符
const value = obj?.foo?.bar?.baz; // 如果任何中间属性不存在或为空，value 将为 undefined
// 传统写法
 const value = obj && obj.foo && obj.foo.bar && obj.foo.bar.baz; // 需要手动检查每个属性

const foo = null;
const bar = undefined;
const baz = 0;
const qux = '';
cosnt xyz = false;
const value1 = foo ?? 'default'; // 'default'，因为 foo 是 null
const value2 = bar ?? 'default'; // 'default'，因为 bar 是 undefined
const value3 = baz ?? 'default'; // 0，因为 baz 不是 null 或 undefined
const value4 = qux ?? 'default'; // ''，因为 qux 不是 null 或 undefined
const value5 = xyz ?? 'default'; // false，因为 xyz 不是 null 或 undefined
//可能存在的传统写法，除了null,undefined, 无法兼容0、''、false的情况,使用时要特别小心
const value1 = foo || 'default'; // 'default'
const value2 = bar || 'default'; // 'default'
const value3 = baz || 'default'; // 'default'，因为 0 转布尔类型是 false
const value4 = qux || 'default'; // 'default'，因为 '' 转布尔类型是 false
const value5 = xyz || 'default'; // 'default'

let foo = null;
let bar = undefined;
let baz = 0;
foo ??= 'default'; // 'default'，因为 foo 是 null
bar ??= 'default'; // 'default'，因为 bar 是 undefined
baz ??= 'default'; // 0，因为 baz 的初始值不是 null 或 undefined