将对象数组中的值转换为它们自己的键值对对象并插入新数组[重复]答案

【问题标题】：Turning the values in an array of objects into their own key value pair object and inserting into the new array [duplicate]将对象数组中的值转换为它们自己的键值对对象并插入新数组[重复]
【发布时间】：2020-12-21 08:32:54
【问题描述】：

我是 Typescript/Javascript 的新手，我在处理一组数据时遇到了麻烦，所以我提前为我的无能道歉。

给定一个对象数组，其值如下：

items = [{header: "h1", value: "header 1 test"}, {header: "h2", value: "header 2 test"}]

我希望能够遍历数组中的每个对象并获取它们的值并将它们转换为键：值对对象并将其插入应该如下所示的新数组中。

myNewArray = [{"h1": "header 1 test"}, {"h2": "header 2 test"}]

我正在使用 Angular 和 TypeScript，但我相信 Javascript 和 Typescript 都应该可以工作。随意使用任何现代技术。我尝试使用 ES6 [element.header]: [element.value] 创建一个新数组，但它仍然给我带来麻烦。

谢谢！

【问题讨论】：

请访问help center，使用tour查看内容和How to Ask。做一些研究，搜索关于 SO 的相关主题；如果您遇到困难，请发布您的尝试minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。

标签： javascript arrays angular typescript

【解决方案1】：

const items = [{header: "h1", value: "header 1 test"}, {header: "h2", value: "header 2 test"}];

const result = items.map(el => ({[el.header]: el.value}));
console.log(result);

【讨论】：

谢谢，这按预期工作，除了结果是：result = [{h1: "header 1 test"}, {h2: "header 2 test"}] 有没有办法获得该属性在地图转换期间变成一个字符串？即结果 = [{"h1": "header 1 test"}, {"h2: "header 2 test"}]
这是一个对象数组，什么意思？

【解决方案2】：

您可以这样做的一种方法是在数组上使用map 运算符。在代码中，这看起来像这样：

const myNewArray = items.map((item) => {
    const header = item.header;
    const value = item.value;

    return {
        [header]: value
    };
});

map 运算符将遍历您的数组并为每个元素调用定义的函数。然后，您可以将元素转换为您想要的任何值，map 运算符会将它们组合到一个新数组中。

【讨论】：

【解决方案3】：

这里唯一棘手的是需要使用 () 将返回的对象包装在地图中

const newObj = [{header: "h1", value: "header 1 test"}, {header: "h2", value: "header 2 test"}]
.map(item => ({[item.header]:item.value}))

console.log(newObj)

【讨论】：