javascript - 如何连接两个对象数组?
问题描述
我正在处理一个 React 本机项目,我想连接两个数组(具有相同的形式)。首先,我正在使用部分列表和 Redux;然后我从服务器获取数据 10 10。例如,我的第一个数组必须是这样的:
data = [
{title: '01/02/2020', data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},
{title: '02/02/2020', data: [{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'}]}
]
在第二次提取时,我遇到了旧数组和新数组之间连接的问题。我想将具有相同标题的标题合并到一个标题中,并将所有数据合并到一个数组中。例如,这是第二次获取的第二个结果:
data2 = [
{title: '02/02/2020', data:[{id: 6,location: 'lesboa', city: 'lesboa'},{id: 7,location: 'amestrdam', city: 'amestrdam'},{id:8,location: 'roma', city: 'roma'}]},
{title: '03/02/2020', data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}
]
我希望结果是这样的:
data3 = [
{title: '01/02/2020', data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},
{title: '02/02/2020', data:[{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'},{id: 6,location: 'lesboa', city: 'lesboa'},{id: 7,location: 'amesterdam', city: 'amesterdam'},{id:8,location: 'roma', city: 'roma'}]},
{title: '03/02/2020', data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}
我找到了这样的代码(如下),但问题是它每次都会复制我的数据数组中的对象,有时它会复制到 54 次
case HISTORIQUE_SUCCESS:
const {count, skip, groupedvalue} = action.payload;
const data1 = [...state.data];
let data = Object.values(
[...data1, ...groupedvalue].reduce(
(acc, curr) => ({
...acc,
[curr.title]:
curr.title in acc
? {...curr, data: [...acc[curr.title].data, ...curr.data]}
: {...curr},
}),
{},
),
);
return {
...state,
data: skip === 0 ? groupedvalue : data,
count,
loader: false,
};
解决方案
您拥有的脚本将负责分组title
,但不能保持对象的唯一性id
。
我倾向于Map
用于此目的。给定两个输入数组,此函数将返回一个合并的数据数组。为了证明这一点,我还添加了 id 为 4 a 的位置,data2
日期与中相同data
:
function merged(data, data2) {
let arr = data.concat(data2);
let titles = new Map(arr.map(({title}) => [title, new Map]));
arr.forEach(({title, data}) => {
let map = titles.get(title);
data.forEach(o => map.set(o.id, o));
});
return Array.from(titles.entries(), ([title, map]) => ({ title, data: [...map.values()] }) );
}
let data = [{title: '01/02/2020',data:[{id: 1,location: 'paris', city: 'paris'},{id: 2, location: 'london', city: 'london'},{id: 3,location: 'atalanta', city: 'atalanta'}]},{title: '02/02/2020',data: [{id: 4,location: 'madrid', city: 'madrid'},{id: 5,location: 'miami', city: 'miami'}]}];
let data2 = [{title: '02/02/2020',data:[{id: 6,location: 'lesboa', city: 'lesboa'},{id: 4,location: 'madrid', city: 'madrid'},{id: 7,location: 'amestrdam', city: 'amestrdam'},{id:8,location: 'roma', city: 'roma'}]},{title: '03/02/2020',data: [{id: 9,location: 'milano', city: 'milano'},{id:10,location: 'tokyo', city: 'tokyo'}]}];
console.log(merged(data, data2));
推荐阅读
- python - 比较二元交叉熵损失张量流
- swift - StackView 在 viewDidLayoutSubviews 返回前高度
- sqlite - 从 Firefox 扩展恢复本地存储
- python-3.x - 在 Mac M1 上的 miniconda 中创建环境
- bash - 带有密码文件的 Docker 运行映像
- javascript - 从下拉列表中获取旧值和新值 | 角2
- javascript - 在我的屏幕中显示动态填充对象的每个键和值 - React
- sql - 如何选择具有相同值的记录?
- django - 未找到:/回调/错误。我希望我的 payment_reponse 函数将 order.paid 更新为 True,保存到数据库并返回 done.html 页面
- c++ - 如何将数组中重复的值的计数存储到c ++中的map中?