ES2020 神器登场，链判断和Null 判断如虎添翼

2023-10-03 08:46:05

ES2020的新成员——链判断运算符（?.）

链判断运算符（?.）的使用方式很简单，它可以防止在访问不存在的属性时引发错误。例如，我们有一个对象person，它包含了name和age两个属性，如果我们想要获取person的name属性，但person可能不存在或person.name可能为undefined，此时我们可以使用链判断运算符：

const name = person?.name;

如果person存在且person.name不为undefined，那么name将被赋值为person.name的值；否则，name将被赋值为undefined，而不会引发错误。

链判断运算符还可以用于访问对象的嵌套属性，例如：

const city = person?.address?.city;

如果person存在且person.address和person.address.city都不为undefined，那么city将被赋值为person.address.city的值；否则，city将被赋值为undefined。

ES2020的另一新成员——Null判断运算符（??）

Null判断运算符（??）的使用方式也比较简单，它可以用来判断一个值是否为null或undefined，如果该值为null或undefined，则返回另一个值，否则返回该值本身。例如：

const name = person?.name ?? "无名氏";

如果person存在且person.name不为null或undefined，那么name将被赋值为person.name的值；否则，name将被赋值为"无名氏"。

Null判断运算符还可以用于判断对象的嵌套属性，例如：

const city = person?.address?.city ?? "未知城市";

如果person存在且person.address和person.address.city都不为null或undefined，那么city将被赋值为person.address.city的值；否则，city将被赋值为"未知城市"。

链判断运算符和Null判断运算符的实际应用

在实际开发中，链判断运算符和Null判断运算符可以用来简化代码，使代码更加易读和可维护。例如，在以下代码中，我们使用链判断运算符来判断一个对象是否存在某个属性，如果存在，则获取该属性的值，否则返回默认值：

const user = {
  name: "John Doe",
  age: 30,
  address: {
    city: "New York",
    state: "New York",
  },
};

const city = user?.address?.city ?? "未知城市";

在这个例子中，如果user存在且user.address和user.address.city都不为null或undefined，那么city将被赋值为"New York"；否则，city将被赋值为"未知城市"。

链判断运算符和Null判断运算符还可以用来简化条件语句，例如，在以下代码中，我们使用链判断运算符来判断一个对象是否存在某个属性，如果存在，则执行某个操作，否则不执行：

const user = {
  name: "John Doe",
  age: 30,
  address: {
    city: "New York",
    state: "New York",
  },
};

if (user?.address?.city) {
  console.log(`用户住在${user.address.city}`);
}

在这个例子中，如果user存在且user.address和user.address.city都不为null或undefined，那么将打印出"用户住在New York"；否则，什么也不会打印。