JS ｜可选链操作符 && 空值合并操作符

2023-11-22 09:40:00

可选链操作符

可选链操作符（?.）允许我们安全地访问对象属性，而不用担心对象或属性不存在的情况。如果对象或属性存在，则返回该属性的值；否则，返回undefined。例如：

const person = {
  name: 'John Doe',
  age: 30,
  address: {
    street: '123 Main Street',
    city: 'Anytown',
    state: 'CA',
  },
};

// 安全地访问person对象的address属性
const address = person?.address;

// 如果address属性存在，则返回该属性的值；否则，返回undefined
console.log(address); // { street: '123 Main Street', city: 'Anytown', state: 'CA' }

// 安全地访问person对象的address.city属性
const city = person?.address?.city;

// 如果address.city属性存在，则返回该属性的值；否则，返回undefined
console.log(city); // Anytown

可选链操作符可以帮助我们编写出更简洁、更健壮的代码。例如，我们可以使用可选链操作符来避免在访问对象属性之前进行冗长的null检查。

空值合并操作符

空值合并操作符（??）允许我们指定一个默认值，如果对象属性不存在或为null，则返回该默认值。例如：

const person = {
  name: 'John Doe',
  age: 30,
};

// 如果person对象的address属性存在，则返回该属性的值；否则，返回'Unknown'
const address = person?.address ?? 'Unknown';

console.log(address); // Unknown