js合并数组对象代码实现(将数组中具有相同属性对象合并到一起组成一个新数组)

 更新时间:2024年01月24日 16:19:10   作者:smileAgain-lg  
项目过程中经常会遇到JS数组合并的情况,时常为这个纠结,这篇文章主要给大家介绍了关于js合并数组对象(将数组中具有相同属性对象合并到一起组成一个新数组)的相关资料,需要的朋友可以参考下

一、根据数组对象中某一key值,合并相同key值的字段,到同一个数组对象中,组成新的数组

1.原数组:

var array = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, age: 25 },
  { id: 3, name: 'Charlie', age: 30 }
];

2.合并后数组:

var array = [
  { id: 1, name: 'Alice', age: 25  },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie', age: 30 }
];

3.实现方法:

// 原始数组
var array = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 1, age: 25 },
  { id: 3, name: 'Charlie', age: 30 }
];

// 使用 reduce 方法合并具有相同属性的对象
var mergedArray = array.reduce(function(result, obj) {
  var target = result.find(function(item) {
    return item.id === obj.id;
  });

  if (target) {
    Object.assign(target, obj);
  } else {
    result.push(obj);
  }

  return result;
}, []);

console.log(mergedArray);

4.测试:

二、根据数组对象中某一key值,合并相同key值的对象,到同一个对象中,组成新的数组

1.原数组:

let list = [
      {
        name: "张三",
        gender: "张",
        age: "20"
      },
      {
        name: "李四",
        gender: "李",
        age: "25"
      },
      {
        name: "王五",
        gender: "王",
        age: "30"
      },
      {
        name: "张飞",
        gender: "张",
        age: "20"
      },
      {
        name: "李红",
        gender: "李",
        age: "22"
      }
    ]

2.合并后数组:

let list = [
	{
	  gender: "张",
	  {
        name: "张三",
        gender: "张",
        age: "20"
      },
      {
        name: "张飞",
        gender: "张",
        age: "20"
      }
	},
	{
	 gender: "李",
	 {
        name: "李四",
        gender: "李",
        age: "25"
      },
       {
        name: "李红",
        gender: "李",
        age: "22"
      }
    },
    {
    	gender: "王",
    	{
        name: "王五",
        gender: "王",
        age: "30"
      },
    }
  ]

3.实现方法一:

let tempArr = [];
let Data = [];
for (let i = 0; i < list.length; i++) {
   if (tempArr.indexOf(list[i].gender) === -1) {
     Data.push({
       gender: list[i].gender,
       dataInfo: [list[i]]
     });
     tempArr.push(list[i].gender);
   } else {
     for (let j = 0; j < Data.length; j++) {
       if (Data[j].gender== list[i].gender) {
         Data[j].dataInfo.push(list[i]);
         break;
       }
     }
   }
 }
 console.log(Data);

测试:

4.实现方法二:

let dataInfo = {};
list.forEach((item, index) => {
	let { gender } = item;
	if (!dataInfo[gender]) {
		dataInfo[gender] = {
			gender,			
			child: []
		}
	}
	dataInfo[gender].child.push(item);
});
let newList = Object.values(dataInfo); // list 转换成功的数据
console.log(newList)

测试:

总结 

到此这篇关于js合并数组对象代码实现的文章就介绍到这了,更多相关js合并数组对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript Rxjs mergeMap 的使用场合

    JavaScript Rxjs mergeMap 的使用场合

    这篇文章主要介绍了JavaScript Rxjs mergeMap 的使用场合,mergeMap 接收一个函数作为输入参数,这个函数的输入参数就是通过 pipe 链接 mergeMap 的 Observable 里包含的元素
    2022-07-07
  • js实现烟花特效

    js实现烟花特效

    这篇文章主要为大家详细介绍了js实现烟花效果,实现鼠标点击出现模拟烟花爆炸的特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 微信小程序scroll-x失效的完美解决方法

    微信小程序scroll-x失效的完美解决方法

    在微信小程序的文档中,使用scroll-view标签,然后给它设置一个scroll-x就可以实现元素,横向排列,可以左右滑动,但是在实际开发中会遇到各种问题,下面小编给大家带来了微信小程序scroll-x失效的完美解决方法,需要的朋友可以参考下
    2018-07-07
  • 基于javascript实现按圆形排列DIV元素(一)

    基于javascript实现按圆形排列DIV元素(一)

    本篇文章主要介绍基于javascript实现按圆形排列DIV元素的方法,此文着重于介绍对实现的按圆形排列DIV元素的分析,需要的朋友来看下吧
    2016-12-12
  • uniapp微信小程序与H5的弹窗滚动穿透解决方法

    uniapp微信小程序与H5的弹窗滚动穿透解决方法

    在uni-app中弹窗的用途很常见,比如商品规格选取、广告弹窗等,下面这篇文章主要给大家介绍了关于uniapp微信小程序与H5的弹窗滚动穿透解决方法,需要的朋友可以参考下
    2023-01-01
  • js获取客户端网卡的IP地址、MAC地址

    js获取客户端网卡的IP地址、MAC地址

    这篇文章主要介绍了js获取客户端网卡的IP地址、MAC地址的方法,需要的朋友可以参考下
    2014-03-03
  • JavaScript中参数传递方式详解

    JavaScript中参数传递方式详解

    这篇文章主要为大家详细介绍了JavaScript中参数传递三种方式:按值传递、引用传递和共享传递,文中的示例代码讲解详细,感兴趣的可以了解下
    2023-09-09
  • 事件模型在各浏览器中存在差异

    事件模型在各浏览器中存在差异

    根据 W3C DOM 2 Events 描述,EventTarget 接口被所有支持 DOM 事件模型的节点(Node)实现。 该接口提供addEventListener 和removeEventListener方法,用来绑定或解绑一个 EventListeners 接口到一个 EventTarget。
    2010-10-10
  • Javascript获取随机数的实现方法

    Javascript获取随机数的实现方法

    下面小编就为大家带来一篇Javascript获取随机数的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS深入学习之数组对象排序操作示例

    JS深入学习之数组对象排序操作示例

    这篇文章主要介绍了JS深入学习之数组对象排序操作,结合实例形式详细分析了JavaScript数组对象排序相关实现技巧与操作注意事项,需要的朋友可以参考下
    2020-05-05

最新评论