JavaScript遍历Map转数组完整教程

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《JavaScript遍历Map转对象数组完整教程》，涉及到，有需要的可以收藏一下

JavaScript 中正确遍历 Map 并转换为对象数组的完整指南：`Object.keys()` 无法获取 `Map` 实例的键，因其不将键作为自有属性暴露；应使用扩展运算符 `...map.entries()` 配合 `map()` 方法安全提取键值对并构造新数组。

Map 是 ES6 引入的原生集合类型，与普通对象（Object）有本质区别：它不基于属性名存储数据，而是通过内部哈希表管理键值对，因此 Object.keys()、Object.values() 和 Object.entries() 均对其无效——这些方法仅作用于对象的可枚举自有属性，而 Map 的键值对并不挂载在自身属性上。

在你的代码中：

console.log('Keys are', Object.keys(map1)); // 输出 []

结果为空数组，正是因为 map1 没有任何可枚举的字符串属性（如 map1['111020022AS'] 是 undefined），所以 Object.keys() 找不到任何键。

✅ 正确做法是使用 Map.prototype.entries()，它返回一个迭代器，产出 [key, value] 数组形式的键值对。配合扩展运算符 ... 转为数组后，即可用 map() 进行转换：

const map1 = new Map();
map1.set('111020022AS', true);
map1.set('23t2t363114', false);
map1.set('110AI1123333', true);
map1.set('0000111222', false);

// ✅ 正确：获取所有 [key, value] 对，并映射为 { label, value } 对象数组
const newArray = [...map1.entries()].map(([label, value]) => ({
  label,
  value
}));

console.log(newArray);
// 输出：
// [
//   { label: '111020022AS', value: true },
//   { label: '23t2t363114', value: false },
//   { label: '110AI1123333', value: true },
//   { label: '0000111222', value: false }
// ]

⚠️ 注意事项：

• 若你实际需要的是一个新的 Map（而非数组），请勿直接赋值给 newMap 变量后调用 .map() —— 因为 map() 返回的是数组，不是 Map。若目标是构造新 Map，应使用：

  const newMap = new Map(map1.entries()); // 复制原 Map
  // 或按需转换键值：
  const transformedMap = new Map([...map1.entries()].map(([k, v]) => [k.toUpperCase(), !v]));

• Map 的键可以是任意类型（函数、对象、Symbol 等），而 Object.keys() 仅返回字符串键，这也进一步说明其不适用于 Map。
• 若需仅获取键或仅获取值，分别使用 [...map1.keys()] 或 [...map1.values()]。

总结：操作 Map 时，请始终优先使用其原生迭代方法（.keys()、.values()、.entries()），避免误用面向普通对象的 API。这是理解现代 JavaScript 集合行为的关键一步。

好了，本文到此结束，带大家了解了《JavaScript遍历Map转数组完整教程》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！