将 JavaScript Map 转换为键值对对象数组-js教程-PHP中文网

将 JavaScript Map 转换为键值对对象数组

本文详解如何将 Map 实例正确转换为形如 {key: value} 的对象数组，而非 {key: 'key', value: 'value'} 的固定结构，核心在于使用计算属性名语法 [key]。

本文详解如何将 map 实例正确转换为形如 `{key: value}` 的对象数组，而非 `{key: 'key', value: 'value'}` 的固定结构，核心在于使用计算属性名语法 `[key]`。

在 JavaScript 中，Map 是一种有序的键值集合，常用于需要动态键名或非字符串键的场景。但当与后端 API、表单序列化或配置项处理对接时，往往需要将其转为「每个对象仅含一个键值对」的数组格式（例如 [{username: "test"}, {password: "test"}]），而非扁平的 {key, value} 对象数组。

直接使用 {key: value} 会导致字面量中 key 被当作静态属性名，而非变量值——结果是所有对象都拥有名为 "key" 的属性，而非原始 Map 中的 "username"、"password" 等真实键名。

✅ 正确解法：使用计算属性名（Computed Property Names）语法 [key]
ES6 允许在对象字面量中用方括号包裹表达式作为动态属性名。{[key]: value} 会将 key 变量的运行时值（如 "username"）作为对象的属性名，从而生成 {username: "test"}。

以下是完整可运行示例：

const map = new Map();
map.set("username", "test");
map.set("password", "test");
map.set("contentType", "application/json");

// ✅ 推荐：使用 for...of + 计算属性名
const paramArray = [];
for (const [key, value] of map.entries()) {
  paramArray.push({ [key]: value });
}

console.log(paramArray);
// 输出: [{username: "test"}, {password: "test"}, {contentType: "application/json"}]

你也可以用更函数式的写法（一行简洁实现）：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

const paramArray = Array.from(map, ([key, value]) => ({ [key]: value }));
// 或使用扩展运算符 + map()
const paramArray2 = [...map].map(([key, value]) => ({ [key]: value }));

⚠️ 注意事项：

计算属性名语法 [key] 仅在对象字面量中生效，不可用于已声明对象的赋值（如 obj.[key] = value 是非法的）；
若 key 值为 null、undefined 或 Symbol，仍可正常工作，但需确保目标环境兼容（Symbol 作为 Map 键时，生成的对象属性名会是 Symbol.toString() 形式）；
此转换不改变原始 Map 的顺序——Map 保持插入顺序，for...of 和 Array.from(map) 均按此顺序遍历。