React+Django美食菜单应用中合并JavaScript对象数组与单个对象的问题求解

嘿，这个需求其实挺常见的，用JavaScript的数组map方法加上对象展开运算符就能轻松搞定，完全不用复杂的逻辑～

具体实现代码 #

你只需要遍历原数组，对每个对象进行属性合并即可：

const objectOfArray = [
  { "id":"1a2f2c7a-0e06-4784-a1fb-68e083a72aa5","cat_id":"812347b3-615f-4f4a-b201-64737ddf4718","event_id":"ead9898c-9606-49e0-aa2b-c7f34331a856" },
  { "id":"7bee12ac-7253-4e5a-a86f-2ea0a3765541","cat_id":"6968da9d-4475-4431-801d-e3eeda02145a","event_id":"ead9898c-9606-49e0-aa2b-c7f34331a856" },
  { "id":"42763c0d-84f1-4f07-97c8-aa914bfb92fa","cat_id":"812347b3-615f-4f4a-b201-64737ddf4718","event_id":"ead9898c-9606-49e0-aa2b-c7f34331a856" }
];

const myObject = {"seat":"4","table":"10"};

// 核心代码：合并属性
const updatedArray = objectOfArray.map(item => ({ ...item, ...myObject }));

console.log(updatedArray);

代码解释 #

• Array.map()：这个方法会遍历数组里的每一个元素，返回一个全新的数组，不会修改原数组（这很符合React的状态更新原则，避免意外的副作用）。
• 对象展开运算符...：...item会把原对象的所有键值对复制到新对象中，...myObject接着把myObject的属性也追加进去。如果两个对象有重复的键，后面的myObject属性会覆盖前面的，但你这里都是新属性，所以完全不用担心冲突。

运行这段代码后，得到的updatedArray就是你想要的最终结果啦～

内容的提问来源于stack exchange，提问作者imokhai elias