为何访问数组中对象属性输出undefined？代码问题排查

核心问题 #

你犯了一个基础概念错误：donuts是数组，不是单个对象。你直接写donuts.typeOne，是在数组本身这个对象上查找typeOne属性，但数组本身并没有这个属性，所以必然返回undefined。

另外要注意：数组里的每个对象都有不同的type开头属性（第一个对象是typeOne，第二个是typeTwo，以此类推），并非所有对象共享同一个type属性。

编辑器提示你把冒号换成逗号是误报，你的对象字面量写法完全正确——冒号用于分隔对象的属性名和属性值，逗号才是分隔多个属性的，不用管这个提示。

修复方法 #

方法1：单独访问每个对象的type属性 #

通过数组索引定位到具体的元素对象，再访问其对应的type属性：

var donuts = [
  { typeOne: "Jelly", cost: 1.22 },
  { typeTwo: "Chocolate", cost: 2.45 },
  { typeThree: "Cider", cost: 1.59 },
  { typeFour: "Boston Cream", cost: 5.99 }
];

// 访问第一个甜甜圈的typeOne
console.log(donuts[0].typeOne); // 输出 "Jelly"
// 访问第二个甜甜圈的typeTwo
console.log(donuts[1].typeTwo); // 输出 "Chocolate"
// 以此类推访问后续对象
console.log(donuts[2].typeThree); // 输出 "Cider"
console.log(donuts[3].typeFour); // 输出 "Boston Cream"

方法2：批量遍历输出所有type开头的属性值 #

如果想一次性输出所有对象里以type开头的属性值，可以用循环遍历数组和对象属性：

var donuts = [
  { typeOne: "Jelly", cost: 1.22 },
  { typeTwo: "Chocolate", cost: 2.45 },
  { typeThree: "Cider", cost: 1.59 },
  { typeFour: "Boston Cream", cost: 5.99 }
];

// 遍历数组中的每个甜甜圈对象
donuts.forEach(donut => {
  // 遍历当前对象的所有属性名
  for (let key in donut) {
    // 判断属性名是否以"type"开头
    if (key.startsWith('type')) {
      console.log(donut[key]);
    }
  }
});
// 执行后会依次输出：Jelly、Chocolate、Cider、Boston Cream

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