如何将新属性映射到对象数组中的现有属性 JavaScript答案

【问题标题】：How to map new property to existing property in the array of objects JavaScript如何将新属性映射到对象数组中的现有属性 JavaScript
【发布时间】：2021-09-08 17:33:18
【问题描述】：

我正在尝试将新属性添加到对象数组中，但在迭代时，我丢失了现有值。

有什么办法，我可以只修改对象的属性，也可以做一个空检查？

我试过了。

const data = [
  {
    testid: 1,
    items: {
      id: 1,
      desc: 'test'
    }
  },
  {
    testid: 2,
    items: {
      id: 2,
      desc: 'test1'
    }
  },
  {
    testid: 3
  }
];

let result = data.map(({ items }) => ({
  ...items,
  newval: items?.id + ' - ' + items?.desc
}));
console.log(result);

//Expected Output

const newData = [
  {
    testid: 1,
    items: {
      id: 1,
      desc: 'test',
      newval: '1 -test'
    }
  },
  {
    testid: 2,
    items: {
      id: 2,
      desc: 'test1',
      newval : '2 -test1'
    }
  },
  {
    testid: 3
  }
];

【问题讨论】：

标签： javascript arrays object

【解决方案1】：

您还需要克隆items的父对象，如果items子对象已经存在，则有条件地克隆：

const data = [{"testid":1,"items":{"id":1,"desc":"test"}},{"testid":2,"items":{"id":2,"desc":"test1"}},{"testid":3}];

const result = data.map(({ items, ...rest }) => ({
  ...rest, // clone the object
  ...items && { // clone the items and add the property if items exist
    items: {
      ...items,
      newval: items?.id + ' - ' + items?.desc
    }
  }
}));

console.log(result);

如果您有一个 items 数组而不是单个对象，请使用另一个映射：

const data = [ { testid: 1, items: [ { id: 1, desc: 'test' }, { id: 11, desc: 'test11' } ] }, { testid: 2, items: [ { id: 2, desc: 'test1' }, { id: 21, desc: 'test111' } ] }, { testid: 3 } ];

const result = data.map(({ items, ...rest }) => ({
  ...rest, // clone the object
  ...items && {
    items: items.map(item => ({
      ...item,
      newval: item?.id + ' - ' + item?.desc
    }))
  }
}));

console.log(result);

【讨论】：

谢谢，Ori，有一个疑问。如果我将项目作为对象数组而不是一个对象，我该如何迭代呢？我需要再添加一个地图功能吗？
const data = [ { testid: 1, items: [ { id: 1, desc: 'test' }, { id: 11, desc: 'test11' } ] }, { testid: 2 , 项目: [ { id: 2, desc: 'test1' }, { id: 21, desc: 'test111' } ] }, { testid: 3 } ];
您需要映射项目，而不是仅仅散布它们。查看更新的答案。

【解决方案2】：

你需要展开 items 属性

const data = [{
    testid: 1,
    items: {
      id: 1,
      desc: 'test'
    }
  },
  {
    testid: 2,
    items: {
      id: 2,
      desc: 'test1'
    }
  },
  {
    testid: 3
  }
];

let result = data.map((items) => ({
  ...items,
  items: {
    ...items.items,
    newval: items.items?.id + ' - ' + items.items ?.desc
  }
}));

console.log(result);

【讨论】：

【解决方案3】：

我认为您过于简化代码。这是一个更详细的版本，我认为更容易阅读：

const data=[{testid:1,items:{id:1,desc:"test"}},{testid:2,items:{id:2,desc:"test1"}},{testid:3}];

let result = data.map(el => 
{
  if(el.items)
  {
    el.items.newval = `${el.items.id} - ${el.items.desc}`
    
    return {
      testid: el.testid,
      items: el.items
    }
  }
  else
  {
    return el
  }
})
console.log(result)

【讨论】：