如何将两个动态对象数组合并为一个新的对象数组答案

【问题标题】：How to merge two dynamic array of objects into a new array of objects如何将两个动态对象数组合并为一个新的对象数组
【发布时间】：2021-07-27 02:16:03
【问题描述】：

第 1 步：着陆页

我有一个对象数组列表。它是通过在数组 i:e listA 中推送对象来动态创建的。所以这个数组可以根据对象的选择有不同的长度。例如，在这里我选择了 3 个对象

listA: any[] = [{name:"james", mailAddress: "james@dd.com", addr: "xyz 123 block"},
                {name:"eden", mailAddress: "eden@dd.com", addr: "xyz 456 block"},
                {name:"rock", mailAddress: "rock@dd.com", addr: "xyz 789 block"}]

我也像这样将这个 listA 存储在会话存储中以备后用

// Store
sessionStorage.setItem("listA", JSON.stringify(listA));

第 2 步：下一页

现在，在第二步中，我为 listA 的每一行使用了一些输入字段，我更改了每个对象中的电子邮件值并将其存储在 listB 中。例如

listA = JSON.parse(sessionStorage.getItem('listA'));
listA: any[] = [{name:"james", mailAddress: "jack@dd.com", addr: "xyz 123 block"},
                {name:"eden", mailAddress: "zeus@dd.com", addr: "xyz 456 block"},
                {name:"rock", mailAddress: "stone@dd.com", addr: "xyz 789 block"}]

我还将这个更新后的 listA 存储在 session Storage 中，像这样以新名称 listB 供以后使用

// Store
sessionStorage.setItem("listB", JSON.stringify(listB));

第 3 步：提交页面

现在在最后一步我需要提交一个请求并像这样合并对象

    finalList: any[] = [{name:"james", oldmailAddress: "james@dd.com", newmailAddress: "jack@dd.com" addr: "xyz 123 block", country: "hungry", state: ""},
                        {name:"eden", oldmailAddress: "eden@dd.com", newmailAddress: "zeus@dd.com", addr: "xyz 456 block", country: "spain", state: ""},
                        {name:"rock", oldmailAddress: "rock@dd.com", newmailAddress: "stone@dd.com", addr: "xyz 789 block", country: "", state: "new york"}]

请记住，我在会话存储中拥有两个可用的列表，即 listA、listB

我到现在为止的尝试。

submit() {
  let requestObj: any;
  let listA = JSON.parse(sessionStorage.getItem('listA'));
  let listB = JSON.parse(sessionStorage.getItem('listB'));
  let finalObjsArr: any[] = [];

  listA.forEach((el: any) => {
    // And the other values also but for display purpose not adding the other keys....
    requestObj.oldmailAddress = el.mailAddress;        
    finalObjsArr.push(requestObj)
  })

  finalObjArr.forEach((objf: any) => {
   listB.forEach((el: any) => {
     // And the other values also but for display purpose not adding the other keys....
     objf.newmailAddress = el.mailAddress;
   }
  }

  console.log(finalObjsArr);  
}

但这会导致数组列表长度错误。所以假设我选择了 3 个对象，我将在最终列表中返回 9 个对象，这些对象的值也错误。

我也尝试了一些其他方法，但结果是一样的

必需——在这里我必须从一个对象数组中获取值并更新请求对象，然后我必须再次获取另一个数组列表并在先前创建的数组中插入值，并使用旧的和新的价值观。所以基本上合并两个对象数组，为每个对象添加新旧值。

我知道这种技术是错误的。有没有其他解决方法？

【问题讨论】：

首先，没有foreach 这样的东西，你需要使用forEach 来避免TypeError
这是拼写错误。我想大家都知道什么是foreach循环
确保准确地复制您的代码 - 拼写错误通常会导致问题结束，因此在发布问题之前请确保问题没有拼写错误
更新感谢您让我知道
country 和 state 来自哪里？它们不在任何列表中。

标签： javascript arrays typescript loops object

【解决方案1】：

你可以使用数组.mapjavascript:

const listA = [{name:"james", mailAddress: "james@dd.com", addr: "xyz 123 block"},
                {name:"eden", mailAddress: "eden@dd.com", addr: "xyz 456 block"},
                {name:"rock", mailAddress: "rock@dd.com", addr: "xyz 789 block"}]

如果数组listB被假定为这种方式

const listB = [{name:"james", mailAddress: "jack@dd.com", addr: "xyz 123 block", country: "hungry", state: ""},
                        {name:"eden", mailAddress: "zeus@dd.com", addr: "xyz 456 block", country: "spain", state: ""},
                        {name:"rock", mailAddress: "stone@dd.com", addr: "xyz 789 block", country: "", state: "new york"}]

最终的数组会得到如下：

const finalList = listB.map(({mailAddress, ...otherItems}, idx) => {
    return({
        ...otherItems,
        oldmailAddress: listA[idx].mailAddress,
        newmailAddress: mailAddress,
    })
})

console.log(finalList)

【讨论】：

谢谢..这项技术对我有用。虽然我必须制作一个新的独特的对象数组。但是通过这段代码，我能够实现所需要的。非常感谢..

【解决方案2】：

这样的事情应该可以工作：

const listA = [{name:"james", mailAddress: "james@dd.com", addr: "xyz 123 block"},
               {name:"eden", mailAddress: "eden@dd.com", addr: "xyz 456 block"},
               {name:"rock", mailAddress: "rock@dd.com", addr: "xyz 789 block"}]

const listB = [{name:"james", mailAddress: "jack@dd.com", addr: "xyz 123 block"},
               {name:"eden", mailAddress: "zeus@dd.com", addr: "xyz 456 block"},
               {name:"rock", mailAddress: "stone@dd.com", addr: "xyz 789 block"}]

const mergeAndUpdate = (oldArr, newArr) =>
    newArr.map((e, i) => ({
        oldMailAddress: oldArr[i].mailAddress,
        newMailAddress: e.mailAddress,
        name: e.name,
        addr: e.addr
    }))

console.log(mergeAndUpdate(listA, listB))

【讨论】：