如何正确对JavaScript对象数组执行map操作转换为POST要求的参数格式

问题原因 #

• Array.prototype.map()的作用是返回和原数组长度一致的新数组，无法直接得到你需要的单个合并对象，这个场景更适合用Array.prototype.reduce()做聚合操作。
• 直接在对象字面量中写item.key作为键时，JS会将键识别为固定字符串"item.key"，不会读取item.key的实际值，需要用计算属性语法，把键用方括号包裹为[item.key]才能动态设置键名。

解决代码 #

方案1：reduce实现（最简洁） #

适配任意长度的动态对象数组，代码量最少：

var obj = [
  {
    "key": "one",
    "value": "something"
  },
  {
    "key": "two",
    "value": "random"
  },
  {
    "key": "blue",
    "value": "chicken"
  },
  {
    "key": "orange",
    "value": "sportsman"
  }
];

var form = obj.reduce(function(acc, item) {
  acc[item.key] = item.value;
  return acc;
}, {}); // 初始值为空聚合对象

// 最终POST参数结构就是 { form: form }
console.log({ form: form });

方案2：普通循环实现（逻辑更直观） #

var form = {};
for(var i = 0; i < obj.length; i++) {
  var item = obj[i];
  form[item.key] = item.value;
}

内容的提问来源于stack exchange，提问作者Seju4ni