如何通过有条件地添加比较两个数组的附加属性来创建新数组答案

【问题标题】：How to create new array with conditionally adding an additional property comparing two arrays如何通过有条件地添加比较两个数组的附加属性来创建新数组
【发布时间】：2021-04-07 13:49:48
【问题描述】：

我有两个数组

lockers: [
  {
    locker_id: 1,
    label: {
      size: 1,
      label: "large"
    }
  },
  {
    locker_id: 2,
    label: {
      size: 3,
      label: "large"
    }
  },
  {
    locker_id: 3,
    label: {
      size: 3,
      label: "large"
    }
  }
]

和

selectedLockers: [1, 2]

现在我需要通过有条件地匹配 lockers.id === selectedLocker[id] 创建一个新数组，如果它们匹配，则添加一个新属性 color:"yellow" 如果不匹配 color:"red"

我真正想要的是：

newLockers: [
  {
    locker_id: 1,
    label: {
      size: 1,
      label: "large",
      color: "yellow"
    }
  },
  {
    locker_id: 2,
    label: {
      size: 3,
      label: "large",
      color: "yellow"
    }
  },
  {
    locker_id: 3,
    label: {
      size: 3,
      label: "large",
      color: "red"
    }
  }
]

【问题讨论】：

标签： javascript arrays reactjs ecmascript-6 merge

【解决方案1】：

使用includes 方法映射lockers 数组以查看其ID 是否存在于selectedLockers 数组中。

let lockers = [{
    locker_id: 1,
    label: {
        size: 1,
        label: "large"
    }
},
{
    locker_id: 2,
    label: {
        size: 3,
        label: "large"
    }
},
{
    locker_id: 3,
    label: {
        size: 3,
        label: "large"
    }
}
];
let selectedLockers = [1, 2];

const result = lockers.map((locker) => {
  let { label,locker_id } = locker;
  selectedLockers.includes(locker_id) ?
    (label.color = "yellow") :
    (label.color = "red");
  return locker;
});
console.log(result);

【讨论】：

【解决方案2】：

lockers.map((locker) =>
    selectedLockers.includes(locker.locker_id)
      ? { ...locker, label: { ...locker.label, color: 'yellow' } }
      : { ...locker, label: { ...locker.label, color: 'red' } })

【讨论】：

虽然这可能会回答问题，但添加一些解释此代码的作用以及它如何解决问题会更有帮助。通常不接受仅代码的答案。

【解决方案3】：

您可以遍历您的 lockers 数组，并为每个元素检查该 id 是否存在于 selectedLockers 数组中。如果是，则添加黄色，否则添加红色。

let newLockers = lockers.map(ele => {
    if (selectedLockers.includes(ele.locker_id)) {
       ele.color = "yellow";  
    } else {
       ele.color = "red";
    }
    return ele;
});

【讨论】：

【解决方案4】：

我会创建一个查找集：

 s = new Set(selectedLockers)

然后只需映射您的数据：

 lockers.map(e => {
   e.label.color = s.has(e.locker_id) ? 'yellow' : 'red';
   return e;
 } )

【讨论】：

【解决方案5】：

你可以这样做。

const lockers = [
    { locker_id:1,label:{ size:1,label:"large" } },
    { locker_id:2,label:{ size:3,label:"large" } },
    { locker_id:3,label:{ size:3,label:"large" } }
];
const selectedLockers = [1,2]

const newArray = lockers.map((locker) => {
    if (selectedLockers.includes(locker.locker_id)) {
        locker.label.color = "yellow"
    } else {
        locker.label.color = "red"
    }

    return locker;
})

【讨论】：