如何将键值对象数组转换为只有一个属性的对象数组？

Question

我有一个像这样的对象数组：

[
  { "key": "fruit", "value": "apple" },
  { "key": "color", "value": "red" },
  { "key": "location", "value": "garden" }
]

我需要将它转换为以下格式：

[
  { "fruit": "apple" },
  { "color": "red" },
  { "location": "garden" }
]

如何使用JavaScript实现此操作？

- Binson Eldhose

---

如果您正在寻找一个变体，其中结果是将所有属性合并为单个对象：如何在JavaScript中将对象数组转换为一个对象？。 - Sebastian Simon

Answer 1

你可以使用.map。

var data = [
  {"key":"fruit","value":"apple"},
  {"key":"color","value":"red"},
  {"key":"location","value":"garden"}
];

var result = data.map(function (e) {
  var element = {};
  element[e.key] = e.value;
  
  return element;
});

console.log(result);

如果你使用 ES2015 ，你可以像这样做。

var result = data.map((e) => {
   return {[e.key]: e.value};
});

示例

- Oleksandr T.

Answer 2

使用箭头函数，使用名为arr的数据：

arr.map(e => {
    var o = {};
    o[e.key] = e.value;
    return o;
});

这会生成一个新的Array，而不影响原始的数组。

可以简化为一行代码：

arr.map(e => ({[e.key]: e.value}));

如果你不能假设箭头函数的支持，那么你需要这样写:

arr.map(function (e) {
    var o = {};
    o[e.key] = e.value;
    return o;
});

- Paul S.

---

@TrueBlueAussie 不是，箭头函数：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions - Rory McCrossan

箭头函数是ES6语法，所以请确保你的平台支持ES6。 - apxp

@AlexK。根据MDN的说法，它应该在Safari和IE9及更高版本中运行。不过我个人没有进行过测试。如果你需要支持<IE9，愿上帝怜悯你的灵魂;) - Rory McCrossan

@RoryMcCrossan 截至今天（2016年01月12日），所有低于11版本的IE已经到达终止支持期限。 - Paul S.

Answer 3

使用map（如其他答案所建议的）或以下内容将实现您想要的效果...

var data = [{"key":"fruit","value":"apple"},{"key":"color","value":"red"},{"key":"location","value":"garden"}];
var obj = {};

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

- Matthew Layton

Answer 4

在Javascript中，obj.property和obj['property']返回的内容相同。obj['property']更加灵活，因为键'property'可以是带有一些空格的字符串：

obj['pro per ty'] // work
obj.pro per ty // not work

或者

var a = 'property';
obj.a == obj.property // => false
obj[a] == obj.property // => true

---

所以你可以尝试那个。

var data = [{"key":"fruit","value":"apple"},{"key":"color","value":"red"},{"key":"location","value":"garden"}]
var new_data = [];

var data_length = data.length; // just a little optimisation for-loop
for (var i = 0; i < data_length; i++) {
    var item = data[i]; // to have a vision close of foreach-loop (foreach item of collection)
    new_data[i] = {};
    new_data[i][item.key] = item.value;
}
console.log(new_data);
// [{"fruit":"apple"},{"color":"red"},{"location":"garden"}]

- Le Petit Monde de Purexo

---

请在您的答案中添加一些解释，这将会非常有帮助。 - Prafulla Kumar Sahu

Answer 5

你现在拥有的是一个对象数组，每个对象都有两个属性，键和值。如果你不知道map函数，你可以在这个数组上运行forEach循环并重新排列数据。尝试像下面这样做：

  function() {
     var newArray = [];
     oldArray.forEach(function(x){
     var obj= {};
     obj[x.key] = x.value;
     newArray.push(obj);
    });
  console.log(newArray);
}

这里的 oldArray 是你的原始数据

- Saurabh Tiwari