如何通过带数组方括号的路径字符串访问JS对象的目标属性？

你之前尝试data['content[0]']返回undefined是因为JavaScript会把方括号内的完整字符串当成单个属性名查找，不会自动解析嵌套的数组索引，所以需要先对路径字符串做拆分解析再逐级取值。

方案1：手写解析函数（无依赖，生产环境最优） #

核心思路是把路径字符串中的数组索引标记统一转换为点分隔的属性段，再逐级遍历对象取值：

function getValueByPath(obj, path) {
  // 将[数字]格式替换为.数字，再拆分出所有属性段，过滤空值
  const keyList = path.replace(/\[(\d+)\]/g, '.$1').split('.').filter(Boolean)
  // reduce逐级取值，遇到不存在的属性直接返回undefined
  return keyList.reduce((currentValue, currentKey) => {
    return currentValue?.[currentKey] ?? undefined
  }, obj)
}

使用示例：

let data = {
  id: 2, 
  content: [
    {foo: "bar1"},
    {foo: "bar2"},
  ]
};

console.log(getValueByPath(data, 'content[0].foo')) // 输出：bar1
console.log(getValueByPath(data, 'content[1].foo')) // 输出：bar2
// 复杂嵌套路径也支持，不存在的路径不会报错直接返回undefined
console.log(getValueByPath(data, 'content[0].carousel.images[3].id')) // 输出：undefined

该方案优势：

• 无任何第三方依赖，代码体积小
• 支持对象、数组任意层级嵌套的路径格式
• 异常兼容好，访问不存在的路径不会抛出报错，适配业务场景

方案2：临时调试方案（仅本地调试用，生产环境禁止） #

如果只是本地临时测试，不需要考虑安全和性能，可以直接用eval快速实现：

const targetValue = eval(`data.${'content[0].foo'}`)
console.log(targetValue) // 输出：bar1

注意：eval会执行传入的任意字符串内容，如果路径来源是用户可控制的输入，会造成XSS等严重安全漏洞，同时会影响JS引擎的性能优化，生产环境绝对禁止使用该方案。

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