巧用可选链操作符(?.)，轻松访问对象深层属性

前端

2023-10-14 21:53:59

在开发中，我们经常会遇到以下场景：

对象嵌套结构复杂，需要访问对象深层属性。
对象可能为 undefined 或 null，直接访问会导致错误。
需要在条件语句中检查对象属性是否存在，再进行后续操作。

传统上，我们通常使用以下方法来解决这些问题：

使用嵌套的 if 语句来检查对象属性是否存在，然后再访问属性。
使用 try...catch 语句来捕获访问对象属性时的错误。
使用三元运算符 (?:) 来简化条件判断和属性访问。

然而，这些方法都存在一定的局限性，比如代码冗长、可读性差、安全性低等。

可选链操作符的介绍

在ES2020中，引入了可选链操作符 ?.，它提供了一种简洁且安全的访问对象深层属性的方式。

可选链操作符的工作原理是，它首先检查对象是否为 undefined 或 null，如果是，则直接返回 undefined，否则再访问对象的属性。

例如：

const obj = {
  a: {
    b: {
      c: 1
    }
  }
};

console.log(obj.a.b.c); // 1
console.log(obj.a.b.d); // undefined

如果我们使用可选链操作符，则可以简化为：

const obj = {
  a: {
    b: {
      c: 1
    }
  }
};

console.log(obj.a?.b?.c); // 1
console.log(obj.a?.b?.d); // undefined

可以看到，使用可选链操作符可以避免在访问对象属性时出现错误，使代码更加简洁和安全。

可选链操作符的应用场景

可选链操作符的应用场景非常广泛，这里列举一些常见的场景：

访问对象深层属性。
检查对象属性是否存在。
在条件语句中进行属性访问。
避免使用嵌套的 if 语句和 try...catch 语句。

例如：

// 访问对象深层属性
const obj = {
  a: {
    b: {
      c: 1
    }
  }
};

console.log(obj.a?.b?.c); // 1

// 检查对象属性是否存在
const obj = {
  a: {
    b: 1
  }
};

if (obj.a?.b) {
  console.log('属性存在');
} else {
  console.log('属性不存在');
}

// 在条件语句中进行属性访问
const obj = {
  a: {
    b: 1
  }
};

const result = obj.a?.b ? '属性存在' : '属性不存在';
console.log(result); // 属性存在

// 避免使用嵌套的 `if` 语句和 `try...catch` 语句
const obj = {
  a: {
    b: {
      c: 1
    }
  }
};

try {
  console.log(obj.a.b.c);
} catch (error) {
  console.log('属性不存在');
}

// 使用可选链操作符
console.log(obj.a?.b?.c); // 1