JS数组操作大全对象数组根据某个相同的字段分组

 更新时间:2022年11月04日 09:52:41   作者:fx67ll  
这篇文章主要介绍了JS数组操作大全对象数组根据某个相同的字段分组,需要注意的是,在开发过程这种数组的处理函数,应当被编写到项目的公共工具函数库中全局调用,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下

先说点废话

最近在实际业务中,需要编写一个方法根据数组中每一个对象的一个相同字段,来将该字段值相等的对象重新编入一个数组,返回一个嵌套的数组对象,特地来做个总结。
当然需要注意的是,在开发过程这种数组的处理函数,应当被编写到项目的公共工具函数库中全局调用

目标对象数组

let dataArr = [{
		id: 1,
		anyId: 1023,
		anyVal: 'fx67ll',
		value: 'value-1'
	},
	{
		id: 2,
		anyId: 1024,
		anyVal: 'fx67ll',
		value: 'value-2'
	},
	{
		id: 3,
		anyId: 10086,
		anyVal: 'll',
		value: 'value-3'
	},
	{
		id: 1,
		anyId: 10086,
		anyVal: 'fx67',
		value: 'value-4'
	},
	{
		id: 2,
		anyId: 1024,
		anyVal: 'll',
		value: 'value-5'
	},
];

准换后的对象数组

[{
	"key": 1,
	"data": [{
		"id": 1,
		"anyId": 1023,
		"anyVal": "fx67ll",
		"value": "value-1"
	}, {
		"id": 1,
		"anyId": 10086,
		"anyVal": "fx67",
		"value": "value-4"
	}]
}, {
	"key": 2,
	"data": [{
		"id": 2,
		"anyId": 1024,
		"anyVal": "fx67ll",
		"value": "value-2"
	}, {
		"id": 2,
		"anyId": 1024,
		"anyVal": "ll",
		"value": "value-5"
	}]
}, {
	"key": 3,
	"data": [{
		"id": 3,
		"anyId": 10086,
		"anyVal": "ll",
		"value": "value-3"
	}]
}]

编写函数的思路

  • 首先肯定是一个循环,因为需要循环来比对数组中每个对象相同的字段的值
  • 其次,根据比对的字段值判断是否存在重复,如果重复存在新的数组中,不重复则添加到之前定义过的数组中,完成分组
  • 最后,返回处理完成的对象数组

方法一

// arr 目标对象数组
// filed 分组字段
function classifyArrayGroupBySameFieldAlpha(arr, filed) {
	let temObj = {}
	for (let i = 0; i < arr.length; i++) {
		let item = arr[i]
		if (!temObj[item[filed]]) {
			temObj[item[filed]] = [item]
		} else {
			temObj[item[filed]].push(item)
		}
	}
	let resArr = []
	Object.keys(temObj).forEach(key => {
		resArr.push({
			key: key,
			data: temObj[key],
		})
	})
	return resArr
}

方法二

// arr 目标对象数组
// filed 分组字段
function classifyArrayGroupBySameFieldVBeta(arr, filed) {
	let temObj = {};
	let resArr = [];
	for (let i = 0; i < arr.length; i++) {
		if (!temObj[arr[i][filed]]) {
			resArr.push({
				key: arr[i][filed],
				data: [arr[i]]
			});
			temObj[arr[i][filed]] = arr[i]
		} else {
			for (let j = 0; j < resArr.length; j++) {
				if (arr[i][filed] === resArr[j].key) {
					resArr[j].data.push(arr[i]);
					break
				}
			}
		}
	}
	return resArr
}

拓展————ES6的新方法Object.keys

  • Object.keys()方法用于返回一个由一个给定对象的自身可枚举属性组成的数组,数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致
  • 需要注意的传不同类型的变量,返回的数组值也不同
    • 如果传入对象,则返回属性名数组
    • 如果传入字符串,则返回索引
    • 如果数组,则返回索引
    • 如果构造函数,则返回空数组或者属性名

到此这篇关于JS数组操作大全对象数组根据某个相同的字段分组的文章就介绍到这了,更多相关js对象数组根据字段分组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • javascript去掉代码里面的注释

    javascript去掉代码里面的注释

    这篇文章主要介绍了javascript去掉代码里面的注释的方法和具体代码,有需要的小伙伴可以参考下。
    2015-07-07
  • js字符串日期yyyy-MM-dd转化为date示例代码

    js字符串日期yyyy-MM-dd转化为date示例代码

    获取表单中的日期往后台通过json方式传的时候,遇到Date.parse(str)函数在ff下报错,有类似情况的朋友可以参考下本文
    2014-03-03
  • JS组件系列之Bootstrap table表格组件神器【终结篇】

    JS组件系列之Bootstrap table表格组件神器【终结篇】

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据,支持单选,复选框,排序,分页,显示/隐藏列,固定标题滚动表,响应式设计,Ajax加载JSON数据,点击排序的列,卡片视图等。本文给大家介绍JS组件系列之Bootstrap table表格组件神器【终结篇】,一起学习吧
    2016-05-05
  • bootstrap中的导航条实例代码详解

    bootstrap中的导航条实例代码详解

    本文通过实例代码给大家介绍了bootstrap中的导航条,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 详解TypeScript中的类型保护

    详解TypeScript中的类型保护

    这篇文章主要介绍了TypeScript中的类型保护,对类型保护感兴趣的同学,可以参考下
    2021-04-04
  • 通过循环优化 JavaScript 程序

    通过循环优化 JavaScript 程序

    这篇文章主要介绍了通过循环优化 JavaScript 程序,对于提高 JavaScript 程序的性能这个问题,最简单同时也是很容易被忽视的方法就是学习如何正确编写高性能循环语句。下面我们来学习一下吧
    2019-06-06
  • 基于JavaScript实现网页版羊了个羊游戏

    基于JavaScript实现网页版羊了个羊游戏

    最近羊了个羊火的不得了,这篇文章主要为大家介绍了如何利用JS实现个网页版羊了个羊游戏,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2022-09-09
  • JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

    JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例

    下面小编就为大家带来一篇JavaScript鼠标事件,点击鼠标右键,弹出div的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 微信小程序使用ucharts在小程序中加入横屏展示功能的全过程

    微信小程序使用ucharts在小程序中加入横屏展示功能的全过程

    这篇文章主要给大家介绍了关于微信小程序使用ucharts在小程序中加入横屏展示功能的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下
    2022-09-09
  • JavaScript检测用户是否在线的6种方法总结

    JavaScript检测用户是否在线的6种方法总结

    这篇文章主要为大家详细介绍了JavaScript中实现检测用户是否在线的6种常用方法,文中的示例代码讲解详细,感兴趣的可以跟随小编一起学习一下
    2023-08-08

最新评论