首页 > 网络编程 > JavaScript > javascript技巧 > js对象数组根据字段分组

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

作者: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对象数组根据字段分组内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • js如何找出两个数组中不同的元素
    js如何找出两个数组中不同的元素
    2022-12-12
  • 微信小程序中slot插槽基本使用方法实例
    微信小程序中slot插槽基本使用方法实例
    2022-11-11
  • uni-app使用swiper实现轮播图的方法
    uni-app使用swiper实现轮播图的方法
    2022-11-11
  • yolov5项目部署+微信小程序前端展示的全过程
    yolov5项目部署+微信小程序前端展示的全过程
    2022-11-11
  • 27个JavaScript数组常见方法汇总与实例说明
    27个JavaScript数组常见方法汇总与实例说明
    2022-11-11
  • Webpack完整打包流程深入分析
    Webpack完整打包流程深入分析
    2022-11-11
  • uniapp实现地图点聚合功能的详细教程
    uniapp实现地图点聚合功能的详细教程
    2022-11-11
  • js实现下载(文件流式)方法详解与完整实例源码
    js实现下载(文件流式)方法详解与完整实例源码
    2022-11-11
  • 美国设下计谋,用娘炮文化重塑日本,已影响至中国
    美国设下计谋,用娘炮文化重塑日本,已影响至中国
    2021-11-19
  • 时空伴随者是什么意思?时空伴随者介绍
    时空伴随者是什么意思?时空伴随者介绍
    2021-11-09
  • 工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    工信部称网盘企业免费用户最低速率应满足基本下载需求,天翼云盘回应:坚决支持,始终
    2021-11-05
  • 2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2022年放假安排出炉:五一连休5天 2022年所有节日一览表
    2021-10-26
  • 电脑版 - 返回首页

    2006-2023 脚本之家 JB51.Net , All Rights Reserved.
    苏ICP备14036222号