JavaScript访问对象字面量的嵌套属性问题

嘿，针对你遇到的这个问题，我整理了几个日常开发里常用且实用的方法，供你参考：

1. 可选链操作符（?.）—— 最简洁的现代方案 #

这是ES2020引入的新特性，简直是处理嵌套对象的利器！它会自动检查每一层属性是否存在，只要中间某一层为null或undefined，就会直接返回undefined，不会抛出讨厌的类型错误。

举个例子：

const user = {
  profile: {
    name: "Jules"
  }
};

// 正常访问存在的属性
console.log(user?.profile?.name); // 输出 "Jules"

// 访问不存在的属性，不会报错
console.log(user?.profile?.age); // 输出 undefined

2. 手动逐层检查——兼容旧环境的稳妥方案 #

如果你的项目还需要兼容不支持ES2020的环境，那手动逐层判断每一层是否存在就很稳妥，虽然代码长一点，但胜在兼容性拉满。

示例代码：

const user = {
  profile: {
    name: "Jules"
  }
};

let userName;
// 逐层检查每一级是否存在
if (user && user.profile && user.profile.name) {
  userName = user.profile.name;
}

console.log(userName); // 输出 "Jules"

3. 封装通用访问函数——自定义复用方案 #

可以自己写一个小函数，把对象和属性路径（数组形式）传进去，用reduce来逐层遍历，这样在多个地方需要访问嵌套属性时，直接调用函数就行，不用重复写判断逻辑。

示例代码：

function getNestedProperty(obj, path) {
  return path.reduce((currentObj, key) => {
    // 每一层都检查，存在就返回对应属性，否则返回undefined
    return currentObj && currentObj[key] ? currentObj[key] : undefined;
  }, obj);
}

const user = {
  profile: {
    name: "Jules"
  }
};

console.log(getNestedProperty(user, ["profile", "name"])); // 输出 "Jules"
console.log(getNestedProperty(user, ["profile", "age"])); // 输出 undefined

4. 借助工具库（如Lodash的_.get）——省心的成熟方案 #

如果你的项目已经引入了Lodash这类工具库，直接用它的_.get方法就非常省心，它支持字符串形式的路径，还能设置默认值，处理各种边缘情况都很到位。

示例代码：

// 假设已引入Lodash
const user = {
  profile: {
    name: "Jules"
  }
};

// 访问存在的属性
console.log(_.get(user, "profile.name")); // 输出 "Jules"
// 访问不存在的属性，返回设置的默认值
console.log(_.get(user, "profile.age", "未知")); // 输出 "未知"

内容的提问来源于stack exchange，提问作者Jules Manson