JavaScript 中对象解构怎么在 for of 循环里使用-js教程-PHP中文网

for...of循环中可直接对可迭代对象进行对象解构，但每次迭代值必须是对象或可解构结构；常见于遍历对象数组，支持重命名、默认值和嵌套解构；map需先转为对象才能用对象解构，原始值解构会报错。

javascript 中对象解构怎么在 for of 循环里使用

可以在 for...of 循环中直接对可迭代对象（比如数组、Map、Set，或返回迭代器的自定义对象）进行对象解构，但要注意：解构目标必须是“结构匹配”的元素——也就是说，每次迭代出来的值本身得是一个对象（或类数组/可解构结构），才能用对象解构语法提取属性。

1. 遍历数组中的对象并解构

最常见场景：遍历对象数组，直接解构每个对象的属性。

const users = [
  { id: 1, name: 'Alice', role: 'admin' },
  { id: 2, name: 'Bob', role: 'user' },
  { id: 3, name: 'Charlie', role: 'editor' }
];

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

说明：每次迭代取出一个对象，{ id, name } 就从该对象中提取对应属性，等价于 const item = users[i]; const { id, name } = item;。

2. 解构时重命名或设置默认值

和普通解构一样，支持别名、默认值、嵌套解构：

Java Development Manual

Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...

下载

重命名：{ name: userName } 把 name 属性赋给变量 userName
默认值：{ role = 'guest' } 当对象没 role 时使用默认值
嵌套解构：{ profile: { age } } 适用于 { profile: { age: 28 } } 这类结构

const data = [
  { name: 'Alice', profile: { age: 30 } },
  { name: 'Bob' } // profile 缺失
];

for (const { name: nick, profile: { age = 0 } = {} } of data) {
  console.log(`${nick} is ${age} years old`);
}
// 输出：
// Alice is 30 years old
// Bob is 0 years old

3. 遍历 Map 并解构键值对

Map 的默认迭代器返回 [key, value] 数组，所以更适合用数组解构；但若想用对象解构，可先转成对象形式（如用 entries() + 映射）或手动构造对象：

const map = new Map([['a', 1], ['b', 2], ['c', 3]]);

// ✅ 推荐：用数组解构（更自然）
for (const [key, value] of map) {
  console.log(key, value);
}

// ✅ 也可转成对象再解构（不常用，但可行）
for (const [key, value] of map) {
  const { k = key, v = value } = { k: key, v: value };
  console.log(k, v);
}

注意：不要写 for (const { key, value } of map) —— 因为 Map 迭代的是数组，不是对象，这样会得到 undefined。

4. 注意事项与常见错误

不能解构非对象值：如果数组里有字符串、数字等原始值，for (const { prop } of ['a', 'b']) 会报错（TypeError: Cannot destructure property 'prop' of 'a' as it is undefined）
空对象或 null/undefined 会报错：确保每个迭代项可安全解构，必要时加空值检查或默认值（如 const { x } = item || {}）
解构不影响原数据：只是读取，不修改源数组或对象

不复杂但容易忽略细节：解构能力取决于每次循环产出的值类型，而不是循环本身。只要那个值支持解构（通常是对象或数组），就可以用。