为了账号安全,请及时绑定邮箱和手机立即绑定

如何使两个对象类型数组相交,包括合并它们的项目?

如何使两个对象类型数组相交,包括合并它们的项目?

素胚勾勒不出你 2024-01-18 16:21:41
我有两个长度相等的数组,每个数组都包含对象数据。这是第一个数组的示例代码......const array1 = [{  key: '5',  value: '550',}, {  key: '6',  value: '750',}];这是第二个的代码......const array2 = [{  type: 'Job',  status: 'Finished',  key : '5',}, {  type: 'Ticket',  status: 'Processing',  key : '6',}];为了进一步处理我的数据,我需要两个数组的交集及其相应的对象项被合并。结果应该是这样的......[{  key: '5',  value: '550',  type: 'Job',  status: 'Finished',}, {  key: '6',  value: '750',  type: 'Ticket',  status: 'Processing',}]到目前为止我想出的是..array1.forEach(function (element) {  array2.forEach(function (element) {    return {      type: 'Ticket',      status: 'Processing'    };  });});我不知道如何创建预期的结果。我的问题的解决方案是什么样的?
查看完整描述

3 回答

?
一只甜甜圈

TA贡献1836条经验 获得超5个赞

您可以将对象存储在哈希表中,key并将另一个数组与哈希表中的数据合并。


const

    array1 = [{ key: '5', value: '550' }, { key: '6', value: '750' }],

    array2 = [{ type: 'Job', status: 'Finished', key: '5' }, { type: 'Ticket', status: 'Processing', key: '6' }],

    temp = Object.fromEntries(array2.map(o => [o.key, o])),

    result = array1.map(o => ({ ...o, ...temp[o.key] }));


console.log(result);

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


查看完整回答
反对 回复 2024-01-18
?
红糖糍粑

TA贡献1815条经验 获得超6个赞

利用Array.prototype.map它可以将附加target对象传递给...,这里可以使用第二个数组,从中检索相应的合并项。

合并是通过Object.assign将两个数组项合并到一个新创建的对象中来完成的,以便不改变任一涉及数组的任何合并项......

const array1 = [{

  key: '5',

  value: '550',

}, {

  key: '6',

  value: '750',

}];


const array2 = [{

  type: 'Job',

  status: 'Finished',

  key : '5',

}, {

  type: 'Ticket',

  status: 'Processing',

  key : '6',

}];


function mergeWithSameIndexItemFromBoundArray(item, idx) {

  const boundArray = this;

  return Object.assign({}, item, boundArray[idx]);

}


console.log(

  'merge result of array2 and array1 ...',

  array2.map(mergeWithSameIndexItemFromBoundArray, array1)

);

console.log(

  'merge result of array1 and array2 ...',

  array1.map(mergeWithSameIndexItemFromBoundArray, array2)

);

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

如果存在不匹配的商品订单数组,可以基于上述方法向 提供额外的目标对象map

这次不是第二个数组,而是它的一个变换;一个对象,它使用标识所有项目的属性名称将第二个数组的所有项目映射到它。对于OP的示例,该属性名称是key

因此,需要编写一个附加函数来完成此映射任务。下面的下一个示例选择一种基于 的方法Array.prototype.reduce

此外,必须重写映射器函数,以便通过简单地使用数组项的key属性而不是之前的数组索引来利用之前创建的绑定映射...

const array1 = [{

  key: '5',

  value: '550',

}, {

  key: '7',

  value: '320',

}, {

  key: '6',

  value: '750',

}];


const array2 = [{

  type: 'Ticket',

  status: 'Processing',

  key : '6',

}, {

  type: 'Job',

  status: 'Finished',

  key : '5',

}, {

  type: 'Task',

  status: 'Pending',

  key : '7',

}];


function createKeyBasedItemMap(map, item) {

  map[item.key] = item;

  return map;

}

function mergeWithKeyBasedItemFromBoundMap(item) {

  return Object.assign({}, item, this[item.key]);

}


console.log(

  'map-based merge of unordered array2 and array1 items ...',

  array2.map(

    mergeWithKeyBasedItemFromBoundMap,

    array1.reduce(createKeyBasedItemMap, {})

  )

);

console.log(

  'map-based merge of unordered array1 and array2 items ...',

  array1.map(

    mergeWithKeyBasedItemFromBoundMap,

    array2.reduce(createKeyBasedItemMap, {})

  )

);

console.log('\n');


console.log(

  'proof of concept ... the item-map based on array1 ...',

  array1.reduce(createKeyBasedItemMap, {})

);

console.log(

  'proof of concept ... the item-map based on array2 ...',

  array2.reduce(createKeyBasedItemMap, {})

);

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


查看完整回答
反对 回复 2024-01-18
?
心有法竹

TA贡献1866条经验 获得超5个赞

听起来您需要通过键将两个数组中的对象组合起来。数组方法是一个不错的选择,但您还应该研究其他方法。

const combinedItemsArray = array1.map(item1 => {
       const matchingItem = array2.find(item2 => item2.key === item1.key) 
       return {...item1, ...matchingItem }
})

这使用扩展运算符将项目的值与匹配的键组合起来。

需要考虑的一些事项:

  • Array.find 仅匹配数组 2 中满足结果的第一项。因此,如果数组中的项具有重复的键,则需要对其进行修改。

  • 如果数组中有很多项目(10 个或 1000 个),这将在性能级别上崩溃。在这种情况下,哈希表答案可能是更好的方法。

查看完整回答
反对 回复 2024-01-18
  • 3 回答
  • 0 关注
  • 36 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信