如何遍历JavaScript中嵌套的类实例对象？

嘿，问题出在pencil是个普通的JavaScript对象，而不是数组——forEach是数组专属的方法，所以直接调用肯定行不通哒！

你创建的pencil是Item类的实例，虽然手动给它添加了eraser和lead这两个子对象属性，但它本质还是个对象，没有数组的forEach方法。要遍历这些子对象，得先把目标属性的值提取出来再处理，下面给你两个实用的解决方案：

方案一：用Object.values()提取属性值后遍历 #

Object.values()会返回对象自身所有可枚举属性的值组成的数组，刚好适配你的场景：

var colors = [];
// 获取pencil的所有自身属性值，得到包含两个Item实例的数组
Object.values(pencil).forEach(part => {
  // 严谨判断：只处理Item类型的子对象，避免误处理类本身的属性
  if (part instanceof Item) {
    colors.push(part.color);
  }
});
console.log(colors); // 输出 ["red", "grey"]

如果能确定pencil上只有eraser和lead这两个子对象属性，也可以省略instanceof判断，但加了会让代码更健壮。

方案二：用for...in循环遍历属性 #

如果你想更清晰地控制遍历的属性名，也可以用for...in循环，结合hasOwnProperty确保只遍历对象自身的属性（排除原型链上的内容）：

var colors = [];
for (const key in pencil) {
  // 只处理对象自身的属性，跳过原型链上的方法/属性
  if (pencil.hasOwnProperty(key)) {
    const part = pencil[key];
    if (part instanceof Item) {
      colors.push(part.color);
    }
  }
}
console.log(colors); // 输出 ["red", "grey"]

额外优化建议 #

如果以后你经常需要给Item实例添加子对象并遍历，建议给Item类增加专门的子对象管理逻辑，让代码更规范：

class Item {
  constructor(color, size) {
    this._color = color;
    this._size = size;
    // 专门存储子对象的数组，方便直接遍历
    this.children = [];
  }
  get color() {
    return this._color;
  }
  // 添加子对象的方法，同时可以挂载到实例属性上
  addChild(item, name) {
    if (item instanceof Item && name) {
      this.children.push(item);
      this[name] = item;
    }
  }
}

// 使用示例
const pencil = new Item('yellow', 6);
pencil.addChild(new Item('red', 2), 'eraser');
pencil.addChild(new Item('grey', 1), 'lead');

// 直接遍历children数组即可
const colors = pencil.children.map(child => child.color);
console.log(colors); // 输出 ["red", "grey"]

这样后续管理子对象会更方便，不用再手动判断哪些属性是子对象啦。

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