如何组合react中的两个数组，以获得一个包含前两个数组中所有项的新数组

Question

我正试图基于两个数组的共享属性来组合它们。我如何在react中做到这一点？我想将它们组合起来创建一个数组，其中包含复选框以及所有其他项。

这里有两个示例阵列：

const array1 = [ 
{Handle: "handle1", title: "handle1"},
{Handle: "handle2", title: "handle2"},
{Handle: "handle3", title: "handle3"} ]

const array2 = [ 
{Handle: "handle1", checkbox: true},
{Handle: "handle2", checkbox: false},
{Handle: "handle3", checkbox: true} ]

结果：

const array2 = [ 
{Handle: "handle1", checkbox: true, title:"handle1"},
{Handle: "handle2", checkbox: false, title:"handle2"},
{Handle: "handle3", checkbox: true, title:"handle3"} ]

如何将它们组合在一起，以获得一个新的数组，该数组在正确的位置包含句柄、标题和复选框？

Answer 1

类似的操作可能会起作用，但不确定数据会随着要组合的对象名称而发生多大变化。

const array1 = [ 
{Handle: "handle1", title: "handle1"},
{Handle: "handle2", title: "handle2"},
{Handle: "handle3", title: "handle3"} ]

const array2 = [ 
{Handle: "handle1", checkbox: true},
{Handle: "handle2", checkbox: false},
{Handle: "handle3", checkbox: true} ]


const newArr = array1.map(v => {
let obj = array2.find(o => o.Handle === v.Handle)

if(obj) {
v.checkbox = obj.checkbox
}
return v
})

console.log(newArr)

Answer 2

您可以这样做：

const array1 = [ 
{Handle: "handle1", title: "handle1"},
{Handle: "handle2", title: "handle2"},
{Handle: "handle3", title: "handle3"} ]
const array2 = [ 
{Handle: "handle1", checkbox: true},
{Handle: "handle2", checkbox: false},
{Handle: "handle3", checkbox: true} ]
const array3 = array1.map(({ Handle, title }, idx) => ({Handle, title, checkbox: array2[idx].checkbox}));
console.log(array3)

const array1 = [ 
{Handle: "handle1", title: "handle1"},
{Handle: "handle2", title: "handle2"},
{Handle: "handle3", title: "handle3"} ]
const array2 = [ 
{Handle: "handle1", checkbox: true},
{Handle: "handle2", checkbox: false},
{Handle: "handle3", checkbox: true} ]
const array3 = array1.map(({ Handle, title }, idx) => ({Handle, title, checkbox: array2[idx].checkbox}));
console.log(array3)

Answer 3

const newArr = []
array1.map((item) => {
const checkbox = array2.find(array2Item => array2Item.Handle === item.Handle).checkbox;
newArr2.push({ title: item.title, Handle: item.Handle, checkbox })
});

Answer 4

const parsedArray = array1.map(el => {
const extraData = array2.find(arr2el => arr2el.Handle === el.Handle)
return {
...el,
...extraData
}
})

结果：

[
{ Handle: 'handle1', title: 'handle1', checkbox: true },
{ Handle: 'handle2', title: 'handle2', checkbox: false },
{ Handle: 'handle3', title: 'handle3', checkbox: true }
]

Answer 5

这里我们使用map方法和Object.assign方法通过使用id合并对象数组。

const array1 = [ 
{Handle: "handle1", title: "handle1"},
{Handle: "handle2", title: "handle2"},
{Handle: "handle3", title: "handle3"} ]
const array2 = [ 
{Handle: "handle1", checkbox: true},
{Handle: "handle2", checkbox: false},
{Handle: "handle3", checkbox: true} ]

console.log(array1.map((item1,i)=>{
if(array2.find(item2 => item2.Handle === item1.Handle)){
return Object.assign({},item1,array2.find(item2 => item2.Handle === item1.Handle))
}
}))

你可以这样做。

const array1 = [ 
{Handle: "handle1", title: "handle1"},
{Handle: "handle2", title: "handle2"},
{Handle: "handle3", title: "handle3"} ]
const array2 = [ 
{Handle: "handle1", checkbox: true},
{Handle: "handle2", checkbox: false},
{Handle: "handle3", checkbox: true} ]

let mergedarray = array1.map(itm => ({
...array2.find((item) => (item.id === itm.id) && item),
...itm
}));
console.log(mergedarray)