如何通过字符串路径动态获取JavaScript对象的嵌套属性值

原生JS手动实现 #

核心思路是将点分隔的路径拆分为属性数组，通过reduce逐层遍历对象取值，同时兼容路径不存在的异常场景：

function getValue(obj, path) {
  return path.split('.').reduce((res, key) => res?.[key], obj)
}

使用示例：

var data = [{"a": "Aditya", "sub": {"v": "result"}}]
const target = data[0]

console.log(getValue(target, 'a')) // 输出 Aditya
console.log(getValue(target, 'sub.v')) // 输出 result
// 路径不存在时返回undefined，不会抛出异常
console.log(getValue(target, 'sub.xxx.yyy')) // 输出 undefined

注：上述代码中使用了可选链操作符?.，如果需要兼容ES2020之前的运行环境，可以替换为兼容写法：

function getValue(obj, path) {
  return path.split('.').reduce((res, key) => {
    return res && res.hasOwnProperty(key) ? res[key] : undefined
  }, obj)
}

工具库方案 #

如果项目中已经引入Lodash，可直接使用内置的_.get方法，支持自定义默认返回值：

console.log(_.get(target, 'a')) // Aditya
console.log(_.get(target, 'sub.v')) // result
// 路径不存在时返回指定默认值
console.log(_.get(target, 'sub.notExist', 'fallback')) // fallback

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