空位合并运算符 ??

由于 JavaScript 的类型时动态的，在分配变量时，我们不得不去记住哪些值会被判断为真，哪些会被判断为假。当我们在创建一个对象时，通常会初始化属性为假的值，比如一个空字符串 或者是 0。设置默认值就会变得很烦人，因为它会覆盖有效值，看下如下 demo，你就会发现这么处理真的很烦人：

let person = {
  profile: {
    name: "",
    age: 0
  }
};

console.log(person.profile.name || "Anonymous"); // Anonymous
console.log(person.profile.age || 18); // 18~~~~

上述例子中，可能结果并不是我们想要的，我们想名字为空或者 0 岁也是合理的，应该不被代替，我们可以用 ?? 运算符替换掉 || 运算符，因为 ?? 运算符的类型检测会更严格一点，它只会把 null 和 undefined 判断为 false。

console.log(person.profile.name ?? "Anonymous"); // ""
console.log(person.profile.age ?? 18); // 0

可选链接运算符

与空位合并运算符类似，JavaScript 在处理虚假值时，可能无法按照我们的意愿进行操作。当属性值未定义时，我们可以返回一个默认值，但是如果属性的路径未被定义呢？

答案是，可以通过在点符号前添加问号，我们可以将属性路径的任何部分设置为可选，以便操作。

let person = {};

console.log(person.profile.name ?? "Anonymous"); // person.profile is undefined
console.log(person?.profile?.name ?? "Anonymous");  // Anonymous
console.log(person?.profile?.age ?? 18);  // 18

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/8222