Optional Chaining 可选连语法介绍

Optional Chaining(可选链)是ES2020中新增的语法，旨在简化JavaScript中访问可能不存在的属性或方法时的代码书写，下面我来为你详细解释一下这个语法。

1.什么是 Optional Chaining？

在不使用可选链语法的情况下，我们在访问一个复杂对象时，需要对每一级属性的存在性做逐一检查，以免出现“不可读属性”的错误。而可选链语法可以帮助我们简化这个操作。

2.怎么使用 Optional Chaining？

可选链语法是通过在属性或方法名之后加上 "?“ 实现。如果属性或方法存在，则正常访问它们；如果不存在，则返回undefined而不会报错。

3.应用场景

可选链语法在以下场景特别有用：

• 访问复杂对象的属性或方法，有可能不存在的情况
• 通过短路操作避免深层嵌套的条件判断
• 更为优雅和简洁地进行空值判断
  下面我来为你列举10个代码示例，让你更好地理解它：

// 1. 访问复杂对象的属性或方法
const user = {
  name: "小明",
  address: {
    province: "北京",
  },
};

console.log(user.address?.city); // undefined
console.log(user?.address?.province); // 北京

// 2. 短路操作
const data = {
  user: {
    address: {
      city: "北京"
    }
  }
};

console.log(data.user?.address?.city); // 北京
console.log(data?.user?.name); // undefined

// 3. 数组索引值不存在的情况
const arr = [1, 2, 3];
console.log(arr[3]?.name); // undefined

// 4. Map 对象的键值不存在的情况
const map = new Map();
map.set("a", "apple");
console.log(map.get("b")?.name); // undefined

// 5. 函数调用
const obj = {
  foo: () => {
    console.log("hello world")
  },
}

obj.foo?.();

// 6. 在模板字面量中使用可选链语法
const user = {
  name: "小明",
}

console.log(`用户的年龄是${user?.age}`);

// 7. 链式调用
const user = {
  name: "小明",
  address: {
    province: "北京",
  },
  getInfo() {
    return `我叫${this.name}，我的家乡是${this.address?.province}`;
  }
};

console.log(user.getInfo()); // 我叫小明，我的家乡是北京

// 8. 在条件语句中使用可选链语法
const element = document.querySelector("#element");

if (element?.classList?.contains("active")) {
  console.log("该元素包含 active 类");
}

// 9. 在默认值中使用可选链语法
const user = {};
const name = user.name ?? "匿名用户";
console.log(name);

// 10. 可选链语法和解构赋值结合使用
const user = {
  name: "小明",
  address: {
    province: "北京",
  }
};

const { name, age, address: { province } = {} } = user;
console.log(province);