如何无需硬编码即可编程式访问JavaScript多层嵌套对象的属性值

核心思路 #

JavaScript 提供了方括号属性访问语法和对象遍历内置方法，可以完全不需要硬编码One/Two这类属性名就访问到对应值： #

1. 动态属性名访问

如果你已经把属性名存在字符串变量里，直接用对象[变量名]的写法即可访问对应属性，等价于硬编码的点运算符写法：

const prop = 'One'
// 以下两种写法完全等价
console.log(test.One.a) // 硬编码写法，输出220
console.log(test[prop].a) // 动态写法，输出220

2. 遍历所有属性（无需提前知道任何属性名）

如果要批量处理test下的所有一级属性，直接用JS内置的Object静态方法即可：

• 如果你只需要所有属性的属性值（也就是你要的test.One/test.Two等对象），用Object.values()：

// 直接得到所有一级属性值组成的数组
const allObjs = Object.values(test)
allObjs.forEach(item => {
  console.log(item.a) // 依次输出 220、110、200、460
  console.log(item.b) // 依次输出对应的b属性数组
})

• 如果你同时需要用到属性名（One/Two等字符串）和对应值，用Object.entries()：

Object.entries(test).forEach(([key, value]) => {
  console.log(`当前属性名：${key}，对应a属性值：${value.a}`)
})

• 如果你只需要获取所有属性名自行处理，用Object.keys()：

const allKeys = Object.keys(test) // 输出 ['One', 'Two', 'Three', 'Four']
allKeys.forEach(key => {
  const current = test[key]
  // 自行添加处理逻辑
})

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