JavaScript中可在for...of或forEach循环中直接解构对象数组，如for (const {id, name} of users)遍历并提取字段，支持默认值、重命名及容错处理，但传统for循环需先索引再解构，且需注意浏览器兼容性。
在 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 的回调函数参数也支持解构，适合需要处理每个元素但不需提前退出的场景。
- 直接在参数中解构，可选性提取所需字段
- 支持默认值和重命名，增强健壮性
users.forEach(({ name, age = 0, id: userId }) => {
console.log(`${name} (ID: ${userId}) is ${age} years old.`);
});
解构时处理缺失或不确定的属性
对象数组中字段可能不统一，解构时建议加默认值或检查，避免 undefined 错误。
立即学习“Java免费学习笔记（深入）”；
- 用
{ 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
注意点和常见误区
解构本身不改变原数组，但要注意语法位置和兼容性。
- 不能在
for (let i = 0; ...)的传统for循环中直接解构整个项（得先取arr[i]再解构） - 解构赋值要求右侧是可迭代对象，确保你遍历的是数组，不是类数组或纯对象
- IE 不支持解构，如需兼容旧环境，应转译（如通过 Babel）
