JavaScript如何用变量作为数组名在forEach循环中访问JSON属性

问题根源 #

你遇到报错的核心原因是JavaScript对象属性访问的点语法不会解析变量：

• 写jsonDataIn.inputValueFromUser时，引擎会直接查找jsonDataIn下 键名就是inputValueFromUser 的属性，不会读取你声明的inputValueFromUser变量里存储的socks字符串
• 写jsonDataIn.arrayNameVar时同理，引擎查找的是 键名为arrayNameVar 的属性，自然拿不到目标数组，拿到undefined后调用forEach就会抛出你看到的类型错误
• 你已经在构造新对象时用过的[inputValueFromUser]计算属性写法就是动态属性的正确语法，读取对象属性时同样使用方括号语法即可实现动态取值。

可运行的正确代码 #

// 接收用户输入的目标数组名称
let inputValueFromUser = 'socks';
// 通过方括号语法动态读取jsonDataIn下对应名称的数组
const targetArray = jsonDataIn[inputValueFromUser];

// 增加合法性校验，避免用户输入不存在的属性名、或对应值不是数组的异常场景
if (Array.isArray(targetArray)) {
  targetArray.forEach(function(s) { 
    newArray.push({ [inputValueFromUser]: s })
  });
} else {
  console.error(`指定的属性[${inputValueFromUser}]不存在或不是数组，无法遍历`);
}

补充说明 #

JavaScript访问对象属性共两种语法，适用场景不同：

• 点语法obj.propertyName：仅适用于属性名固定硬编码的场景，点后内容会被直接当作字符串键名处理，你之前写的能正常运行的jsonDataIn.socks本质上等价于jsonDataIn['socks']的简写
• 方括号语法obj[expression]：会先计算方括号内表达式的返回值，再将该值作为键名访问属性，完全适配属性名动态变化的需求。

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