如何在JavaScript中通过单个字符串键访问嵌套对象属性？

这个需求挺常见的，我来给你几个实用的实现方式，刚好能解决你用info["person.name"]访问嵌套属性的问题。

方法一：手动遍历路径（基础易懂） #

先把点分隔的字符串路径拆成数组，然后一步步遍历对象的属性，中途遇到null或undefined就提前返回，避免报错：

function getNestedValue(obj, path) {
  const keys = path.split('.');
  let current = obj;
  for (const key of keys) {
    if (current == null) { // 处理null/undefined的情况
      return undefined;
    }
    current = current[key];
  }
  return current;
}

// 用你的info对象测试
let info = { "person" : { "name" : "Something", "age" : 1 } };
console.log(getNestedValue(info, "person.name")); // 输出 "Something"
console.log(getNestedValue(info, "person.age")); // 输出 1

方法二：用Array.reduce简化代码 #

利用数组的reduce方法可以把遍历逻辑写得更简洁，再结合可选链操作符?.，不用额外判断null/undefined：

function getNestedValue(obj, path) {
  return path.split('.').reduce((current, key) => current?.[key], obj);
}

// 测试
console.log(getNestedValue(info, "person.name")); // 输出 "Something"

方法三：用Proxy实现直接访问（最贴近你的需求） #

如果你想直接用info["person.name"]这种语法访问，不需要每次调用函数，可以用ES6的Proxy给原对象加一层代理，拦截属性访问：

let info = { "person" : { "name" : "Something", "age" : 1 } };

const proxyInfo = new Proxy(info, {
  get(target, prop) {
    // 如果是点分隔的字符串路径，就拆分后遍历取值
    if (typeof prop === 'string' && prop.includes('.')) {
      return prop.split('.').reduce((current, key) => current?.[key], target);
    }
    // 普通属性访问，直接返回原对象的属性
    return target[prop];
  }
});

// 现在就能像你想要的那样访问了
console.log(proxyInfo["person.name"]); // 输出 "Something"
console.log(proxyInfo["person.age"]); // 输出 1
// 普通属性访问也不受影响
console.log(proxyInfo.person); // 输出 { name: "Something", age: 1 }

注意事项 #

• 如果路径对应的属性不存在，比如proxyInfo["person.address"]，上面的方法都会返回undefined，不会抛出错误；
• Proxy方案需要注意兼容性，现代浏览器和Node.js都支持，但如果要兼容旧环境，建议用前两种函数式的方法。

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