循环遍历两个对象数组以循环匹配 id。然后根据自定义值返回一个新的自定义对象数组

Question

您好，我仍在研究我的 JS 技能，但我无法解决这个问题。我有两个数组，一个是电话联系人，另一个是消息。我正在尝试遍历每一个并返回一个自定义数组，其中包含一个基于联系人数组的新对象。

const myNumber = '69';

const contacts = [
    { 
      phoneNumber: '420',
      name: "Mike Smith",
      favorite: false,
      color: "orange"     
    },
    { 
      phoneNumber: '360',
      name: "John Smith",
      favorite: true,
      color: "green"     
    },
];

const messages = [
  // ! from john to me 
    {
      to: '69',
      from: '360',
      isRead: false,
      time: new Date(),
      owner: 0,
      message: 'Hello there friend this is walker'
    },
    {
      to: '69',
      from: '360',
      isRead: true,
      time: new Date(),
      owner: 1,
      message: 'Hello there friend this is walker'
    },
    // ! from random number to me 
    {
      to: '69',
      from: '720',
      isRead: false,
      time: new Date(),
      owner: 0,
      message: 'Hello there friend from random person'
    },
    {
      to: '69',
      from: '720',
      isRead: true,
      time: new Date(),
      owner: 1,
      message: 'Hello there friend from random person'
    }
];

我想返回一个如下所示的新消息数组...

const newMessages = [
  // ! from John to me 
    {
      to: '69',
      from: '360',
      isRead: false,
      time: new Date(),
      owner: 0,
      message: 'Hello there friend this is John',
      displayName: "John Smith"
    },
    {
      to: '69',
      from: '360',
      isRead: true,
      time: new Date(),
      owner: 1,
      message: 'Hello there friend this is John',
      displayName: "John Smith"
    },
    // ! from random number to me 
    {
      to: '69',
      from: '720',
      isRead: false,
      time: new Date(),
      owner: 0,
      message: 'Hello there friend from random person',
      displayName: '720',
    },
    {
      to: '69',
      from: '720',
      isRead: true,
      time: new Date(),
      owner: 1,
      message: 'Hello there friend from random person',
      displayName: '720',
    }
];

我们将显示名称属性添加到新消息对象。显示名称将返回联系人姓名，如果 "to" | “发件人”值 == 联系人“电话号码”。如果不是这种情况，默认情况下显示名称将返回消息“来自”值。

我真的不知道该怎么做。我尝试查看其他一些线程，但我没有运气。如果您有任何建议，请告诉我。另外，如果这个解释没有帮助，请告诉我！谢谢！

Answer 1

您可以在数组上使用map 并使用Array.find 获取contacts 中的项目，其phoneNumber 属性是当前项目的to 或from 属性。如果找到一个项目，则将该项目的name 属性分配给当前项目的displayName 属性：

要实现默认显示名称，我们可以删除if 语句并使用三元运算符在找到项目时分配name 属性，否则分配默认显示名称。

const myNumber = '69';

const contacts=[{phoneNumber:"420",name:"Mike Smith",favorite:!1,color:"orange"},{phoneNumber:"360",name:"John Smith",favorite:!0,color:"green"}];

const messages=[{to:"69",from:"360",isRead:!1,time:new Date,owner:0,message:"Hello there friend this is walker"},{to:"69",from:"360",isRead:!0,time:new Date,owner:1,message:"Hello there friend this is walker"},{to:"69",from:"720",isRead:!1,time:new Date,owner:0,message:"Hello there friend from random person"},{to:"69",from:"720",isRead:!0,time:new Date,owner:1,message:"Hello there friend from random person"}];

let defaultDisplayName = 'Spectric'

const result = messages.map(e => {
  let found = contacts.find(f => [e.to, e.from].includes(f.phoneNumber))
  e.displayName = found ? found.name : defaultDisplayName;
  return e;
})

console.log(result)