1、空位合并运算符 ??

由于 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

2、可选链接运算符

与空位合并运算符类似,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

Mrzxc
19 声望1 粉丝