JavaScript 中怎么在循环中使用对象解构遍历对象数组-js教程-PHP中文网

JavaScript中可在for...of或forEach循环中直接解构对象数组，如for (const {id, name} of users)遍历并提取字段，支持默认值、重命名及容错处理，但传统for循环需先索引再解构，且需注意浏览器兼容性。

javascript 中怎么在循环中使用对象解构遍历对象数组

在 JavaScript 中，可以在循环中直接使用对象解构来遍历对象数组，让代码更简洁、语义更清晰。关键是在 for...of、forEach 或其他支持迭代的循环中，把解构写在循环变量位置即可。

用 for...of + 解构遍历

这是最直观的方式：在 for...of 的变量声明处直接解构每个对象。

const users = [
  { id: 1, name: 'Alice', age: 30 },
  { id: 2, name: 'Bob', age: 25 },
  { id: 3, name: 'Charlie', age: 35 }
];

for (const { id, name } of users) {
  console.log(`ID: ${id}, Name: ${name}`);
}
// 输出：
// ID: 1, Name: Alice
// ID: 2, Name: Bob
// ID: 3, Name: Charlie

用 forEach + 解构遍历

forEach 的回调函数参数也支持解构，适合需要处理每个元素但不需提前退出的场景。

Java Api Extractor

从 Java 项目中提取 Controller 层接口定义为 JSON 数据。

下载

直接在参数中解构，可选性提取所需字段
支持默认值和重命名，增强健壮性

users.forEach(({ name, age = 0, id: userId }) => {
  console.log(`${name} (ID: ${userId}) is ${age} years old.`);
});

解构时处理缺失或不确定的属性

对象数组中字段可能不统一，解构时建议加默认值或检查，避免 undefined 错误。

用 { prop = 'default' } 提供默认值
对嵌套属性解构要谨慎，可配合可选链（?.）或先判断
如果字段名是动态的，解构不适用，改用普通访问或 Object.entries()

const items = [
  { title: 'Book', price: 29.99 },
  { title: 'Pen' } // 缺少 price
];

items.forEach(({ title, price = 0 }) => {
  console.log(`${title}: $${price.toFixed(2)}`);
});
// Book: $29.99
// Pen: $0.00