在 JavaScript 开发中，经常会遇到需要判断对象或属性是否存在的情况，以及需要给变量设置默认值的情况。在 ES10 中，新增了可选链操作符（Optional Chaining Operator）和 nullish 合并运算符（Nullish Coalescing Operator），它们的联合使用可以让我们更方便地处理这些情况。
可选链操作符
可选链操作符 ?. 可以在不确定对象或属性是否存在的情况下，避免出现 undefined 或 null 的情况。如果对象或属性存在，则返回其值；否则返回 undefined。
例如，我们要获取一个对象的嵌套属性 a.b.c 的值，但是不确定 a、b 或 c 是否存在：
const value = obj?.a?.b?.c;
如果 a、b 或 c 不存在，则 value 的值为 undefined。
使用可选链操作符可以避免出现 Cannot read property 'xxx' of undefined 的错误，同时也可以简化代码。
nullish 合并运算符
nullish 合并运算符 ?? 可以在变量值为 null 或 undefined 时，返回默认值。
例如，我们要给一个变量设置默认值，但是不确定该变量是否已经被赋值：
const value = someVariable ?? defaultValue;
如果 someVariable 的值为 null 或 undefined，则 value 的值为 defaultValue。
使用 nullish 合并运算符可以简化代码，并且避免一些潜在的错误。
联合使用
可选链操作符和 nullish 合并运算符可以联合使用，以更方便地处理对象或属性的判断和变量的默认值。
例如，我们要获取一个对象的嵌套属性 a.b.c 的值，如果 a、b 或 c 不存在，则返回默认值：
const value = obj?.a?.b?.c ?? defaultValue;
如果 a、b 或 c 不存在，则 value 的值为 defaultValue。
使用可选链操作符和 nullish 合并运算符的联合使用，可以简化代码，同时也可以避免出现一些潜在的错误。
示例代码
// javascriptcn.com 代码示例
const obj = {
a: {
b: {
c: 'hello world'
}
}
};
const defaultValue = 'default value';
// 获取嵌套属性的值，如果不存在则返回默认值
const value = obj?.a?.b?.c ?? defaultValue;
console.log(value); // 'hello world'
// 获取不存在的嵌套属性的值，返回默认值
const value2 = obj?.a?.b?.d ?? defaultValue;
console.log(value2); // 'default value'
// 变量值为 null 或 undefined，返回默认值
const value3 = null ?? defaultValue;
console.log(value3); // 'default value'
const value4 = undefined ?? defaultValue;
console.log(value4); // 'default value'总结
ES10 中的可选链操作符和 nullish 合并运算符可以帮助我们更方便地处理对象或属性的判断和变量的默认值。它们的联合使用可以让我们的代码更简洁，同时也可以避免一些潜在的错误。在实际开发中，我们应该根据具体情况灵活选择使用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65668929d2f5e1655df89ad3