获取对象属性时返回UNDEFINED问题求助

咱们先来拆解你代码里的几个关键问题，一个个修正后就能正常获取属性了：

1. 数组元素的语法错误 #

你定义的第一个数组元素有两处语法问题：

• 多嵌套了一层大括号（{ { ... } }），这会直接导致语法错误；
• value: "none," 后面多了个逗号，虽然部分环境能容忍，但这属于不规范写法。

从你console.log的输出{ INPUT: { value: "none" } }来看，你应该是想把INPUT作为对象的键，所以第一个元素应该修正为：

{ INPUT: { value: "none" } }

2. 判断条件的逻辑错误 #

你用Object.keys(v) === "INPUT"来判断是完全错误的——Object.keys()方法返回的是一个包含对象所有键的数组，比如对于第一个元素，Object.keys(v)返回的是["INPUT"]，数组和字符串"INPUT"比较永远是false，你的判断逻辑根本没生效（不过你能console.log出第一个元素，可能实际代码里的判断有偏差，这里按你的输出修正）。

正确的判断方式可以选以下任意一种：

• 检查对象是否包含INPUT这个键：v.hasOwnProperty("INPUT")
• 取数组第一个键来判断：Object.keys(v)[0] === "INPUT"

3. 属性获取方式错误 #

当你的对象结构是{ INPUT: { value: "none" } }时，v.value自然是undefined，因为这个对象的直接属性是INPUT，而value是INPUT属性对应的子对象的属性。

正确的获取方式应该是：

v.INPUT.value

如果键是动态的（比如不确定是INPUT还是其他），可以用：

v[Object.keys(v)[0]].value

修正后的完整代码示例 #

// 修正后的数组
formControlOptions: any[] = [
  { INPUT: { value: "none" } },
  { type: "SELECT_BOX", value: "none", options: ["select option 1", "select option 2", "select option 3"] },
  { type: "RADIO_BTN", value: "none", options: ["radio option 1", "radio option 2", "radio option 3"] }
];

// 修正后的循环逻辑
for (let v of this.formControlOptions) {
  // 判断当前对象是否包含INPUT键
  if (v.hasOwnProperty("INPUT")) {
    console.log(v); // { INPUT: { value: "none" } }
    console.log(v.INPUT.value); // 输出 "none"
    // 如果是动态键的情况
    const key = Object.keys(v)[0];
    console.log(v[key].value); // 同样输出 "none"
  }
}

另外，如果你的初衷是每个数组元素都有type属性（比如第一个元素是type: "INPUT"），那数组应该写成这样：

formControlOptions: any[] = [
  { type: "INPUT", value: "none" },
  { type: "SELECT_BOX", value: "none", options: ["select option 1", "select option 2", "select option 3"] },
  { type: "RADIO_BTN", value: "none", options: ["radio option 1", "radio option 2", "radio option 3"] }
];

对应的判断和获取逻辑会更简单：

for (let v of this.formControlOptions) {
  if (v.type === "INPUT") {
    console.log(v.value); // 输出 "none"
  }
}

你可以根据自己的实际业务需求选择对应的结构~

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