遍历对象实例列表的那些实用技巧

工作中经常遇到这样的场景：从接口拿到一串用户数据，每个都是对象实例，需要逐个处理显示或计算。这时候，遍历对象实例列表就成了家常便饭。

最常见的写法：for...of 和 forEach

假设你有一组用户对象：

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const users = [
  new User('张三', 25),
  new User('李四', 30),
  new User('王五', 28)
];

想打印每个人的名字，可以直接用 forEach：

users.forEach(user => {
  console.log(user.name);
});

或者用 for...of，控制更强一些：

for (const user of users) {
  if (user.age >= 30) {
    console.log(`${user.name} 已经三十而立`);
  }
}

需要索引？别忘了带参数的 forEach

有时候不仅要数据，还得知道它在第几位。比如展示排行榜时加个序号：

users.forEach((user, index) => {
  console.log(`${index + 1}. ${user.name} - ${user.age}岁`);
});

想中途跳出循环？for...of 更灵活

如果只想找到第一个符合条件的人就停下，forEach 就不够用了，因为它不支持 break。这时候还是得靠 for...of：

for (const user of users) {
  if (user.age < 30) {
    console.log(`找到年轻人：${user.name}`);
    break; // 直接退出
  }
}

处理后生成新数组？map 来帮忙

页面渲染常常需要把对象列表转成标签结构。比如生成用户名片：

const cards = users.map(user => `
  <div class="card">
    <h3>${user.name}</h3>
    <p>年龄：${user.age}</p>
  </div>
`);

// 然后插入到页面
document.getElementById('container').innerHTML = cards.join('');

实际项目中的小坑

有次我接到一个需求，要把一批订单对象按状态分类。这些订单是类的实例，不是纯对象。一开始直接用 Object.keys 去遍历单个订单，结果漏掉了原型上的方法和属性。

后来改用 for...in 加上 hasOwnProperty 判断，或者干脆只访问明确需要的字段，才避免出错。

说到底，遍历对象实例列表不像遍历普通数组那么“傻瓜”，得多留意实例本身的结构和来源。尤其当对象来自 API 或第三方库时，先打个 console.log 看看长什么样，能少走很多弯路。