在Javascript/Rect中，将2个数组中具有相同键的对象合并为一个数组

Question

我有两个对象数组，我想将它们合并到一个数组中，并合并它们的对象。

两个阵列：

const itemsFr = [
{
title: "Bonjour"
},
{
title: "Bonne Nuit"
}
];
const itemsEn = [
{
title: "Good Morning"
},
{
title: "Good Night"
}
];

我想要的结果：

items = [
{
title: {
fr: "Bonjour",
en: "Good Morning"
}
},
{
title: {
fr: "Bonne Nuit",
en: "Good Night"
}
}
];

以下是我尝试过的：

export default function App() {
const [items, setItems] = useState([]);
const itemsFr = [
{
title: "Bonjour"
},
{
title: "Bonne Nuit"
}
];
const itemsEn = [
{
title: "Good Morning"
},
{
title: "Good Night"
}
];
const fillItemsFrArray = () =>
itemsFr.map((item) => {
setItems(...items, {
title: {
fr: item.title
}
});
});
const fillItemsEnArray = () =>
itemsEn.map((item) => {
setItems(...items, {
title: {
en: item.title
}
});
});
useEffect(() => {
fillItemsFrArray();
fillItemsEnArray();
}, []);
return (
<div className="App">
<h2>{JSON.stringify(items, null, 4)}</h2>
</div>
);
}

以下是CodeSandbox链接：https://codesandbox.io/s/restless-night-xq6qg?file=/src/App.js:670-1166

Answer 1

您可以采用动态方法，使用带有所需键的对象来获得最终结果。

const
itemsFr = [{ title: "Bonjour" }, { title: "Bonne Nuit" }],
itemsEn = [{ title: "Good Morning" }, { title: "Good Night" }],
result = Object
.entries({ fr: itemsFr, en: itemsEn })
.reduce((r, [key, a]) => a.map(({ title }, i) => ({
title: { ...r[i]?.title, [key]: title }
})), []);
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

Answer 2

这行得通吗？

const itemsFr = [
{
title: "Bonjour"
},
{
title: "Bonne Nuit"
},
{
title: "bla bla"
}
];
const itemsEn = [
{
title: "Good Morning"
},
{
title: "Good Night"
}
];

const items = itemsFr.map((i,c) => ({fr:i.title, en:itemsEn[c]?.title}));
console.log(items)