javascript - 合并两个对象以获得与第一个对象具有相同结构的另一个对象

Question

我需要一些数据结构的帮助。
我有这些对象:

const infos = {
  columnA: {color: 'red', name: 'Column Ancient' },
  columnB: {color: 'yellow', name: 'Column Blue' },
  columnC: {color: 'green', name: 'Column Consequence' },
}

const datum = { id: 0, columnA: 5, columnB: 100, columnC: 33 }

我想要另一个像这样的对象( infosWithValues ):

const infosWithValues = {
  columnA: {color: 'red', name: 'Column Ancient', value: 5 },
  columnB: {color: 'yellow', name: 'Column Blue', value: 100 },
  columnC: {color: 'green', name: 'Column Consequence', value: 33 },
}

这是我尝试过的:

const infosWithValues = [
  ...Object.entries(infos).map(([columnName, info]) => ({
    [columnName]: { ...info, value: datum[columnName] },
  })),
]

但我得到:

[
  { columnA: {color: 'red', name: 'Column Ancient', value: 5 } },
  { columnB: {color: 'yellow', name: 'Column Blue', value: 100 } },
  { columnC: {color: 'green', name: 'Column Consequence', value: 33 } },
]

Answer 1

你几乎做对了，你需要的是reduce而不是 map .

const infos = {
  columnA: {color: 'red', name: 'Column Ancient' },
  columnB: {color: 'yellow', name: 'Column Blue' },
  columnC: {color: 'green', name: 'Column Consequence' },
}

const datum = { id: 0, columnA: 5, columnB: 100, columnC: 33 }

const infosWithValues = Object.entries(infos).reduce((obj,[columnName, info]) => {
    obj[columnName] = { ...info, value: datum[columnName] };
    return obj;
 }, {})

console.log(infosWithValues)