如何从对象数组创建新对象？答案

【问题标题】：How to create a new object from array of objects?如何从对象数组创建新对象？
【发布时间】：2021-03-09 03:11:14
【问题描述】：

我有以下动态对象数组：

[

{
id: "1"
name: "Jane"
age: 25
},

{
id: "2"
name: "John"
age: 35
},

{
id: "3"
name: "James"
age: 27
},
]

我需要像这样创建新对象：

"peopleSelected:{

"1":
{
"name": "Jane",
"age": 25
},

"2":
{
"name": "John",
"age": 35
},

"3":
{
"name": "James",
"age": 27
},

结构在哪里

"id" :
{
"name":name,
"age":"age
}

我需要使用 useState 保存这个新创建的对象，但我不知道该怎么做。请帮忙。

【问题讨论】：

Stackoverflow 不是代码编写服务。请分享一个Minimal, Complete, and Reproducible 示例，说明您尝试自己执行此操作。
我不负责 SO 上的任何事情，我很抱歉你有这种感觉。我只要求你展示你的尝试，这是非常标准的。就不起作用的事情寻求帮助与要求某人为您做这件事是不同的，这就是您所要求的。如果您不知道或无法弄清楚某些事情，那没关系，当您挣扎和克服时，那就是您学习的时候，而我们都在这里主要是为了帮助他人。干杯，祝你好运。

标签： javascript arrays reactjs object

【解决方案1】：

使用Array.prototype.reduce()

const arr = [
    {
      id: "1",
      name: "Jane",
      age: 25,
    },

    {
      id: "2",
      name: "John",
      age: 35,
    },
    {
      id: "3",
      name: "James",
      age: 27,
    },
  ],
  solution = {
    peopleSelected: arr.reduce((acc, { id, name, age }) => {
      acc[id] = { name, age };
      return acc;
    }, {}),
  };

console.log(solution);

【讨论】：

【解决方案2】：

你可以像下面这样使用对象解构：

import React from 'react';
import { useState, useEffect } from 'react';

let people = [
    {
        id: "1",
        name: "Jane",
        age: 25
    },
    {
        id: "2",
        name: "John",
        age: 35
    },
    {
        id: "3",
        name: "James",
        age: 27
    }
];

function App() {
    const [ selectedPeople, setSelectedPeople ] = useState({});

    useEffect(() => {
        console.log(Object.entries(people));
        let extractedArray = Object.entries(people);
        let result = extractedArray.map((item) => {
          return `${item[1].id}: ${{
            "name": item[1].name,
            "age": item[1].age
          }}`
        })
        console.log(result);
        
        // Performing object destructuring and setting the state of selectedPeople as an object
        setSelectedPeople({...people})
    }, [])

    return <div>
        <pre>
            {JSON.stringify(selectedPeople, null, '\t')}
        </pre>
    </div>;
}

export default App;

【讨论】：