JS数组操作大全对象数组根据某个相同的字段分组
目录
- 先说点废话
- 目标对象数组
- 准换后的对象数组
- 编写函数的思路
- 方法一
- 方法二
- 拓展————ES6的新方法Object.keys
先说点废话
最近在实际业务中，需要编写一个方法根据数组中每一个对象的一个相同字段，来将该字段值相等的对象重新编入一个数组，返回一个嵌套的数组对象，特地来做个总结。
当然需要注意的是，在开发过程这种数组的处理函数，应当被编写到项目的公共工具函数库中全局调用
目标对象数组
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对象数组根据字段分组内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
ajax获得json对象数组 循环输出数据的方法
如下所示: var obj= [{id: 1, pId: 0, name: "采购商品", open: true}, {id: 2, pId: 1, name: "雨伞2", open: true}, {id: 2, pId: 1, name: "雨伞2", open: true}, {id: 2, pId: 1, name: "雨伞2", open: true}]; var x=''; $.each(obj, functio
-
js对象数组和对象的使用实例详解
数组 var arr = new Array(); //或者 var arr = []; //或者 var arr = [{index:'0'},{address:'1'}]; var obj_1 = { index:'1', index:'2'}; var obj_2 = { index:'3', index:'3'}; arr.push(obj_1,obj_2); //添加 var pop_data = arr.pop(); //删除并返回数组的最后一个元素. //遍历 for(var i=
-
JS实现数组/对象数组删除其中某一项
目录 数组/对象数组删除其中某一项 移除对象数组中指定元素 数组/对象数组删除其中某一项 由于日常工作中经常需要对数组进行操作,最经常使用到的就是对数组进行的删除操作 对于我们前端来说,数组有两种区别 1.var arr = [ 'aaa' , 'bbb' , 'ccc' , ' ddd' , 'eee' ] 这种暂且称之为纯数组 2.var jsonArr = [ { name: 'cz' , age: '25'} , { name: 'mp' , age: '18'} , { name:
-
JS传递对象数组为参数给后端,后端获取的实例代码
前端JS代码: var conditons = []; var test1 = new Object(); test1.name="1"; test1.id="2"; var test2 = new Object(); test2.name="1"; test2.id="2"; conditons.push(test1); conditons.push(test2); $(function(){ $.ajax({ async:
-
JS实现json对象数组按对象属性排序操作示例
本文实例讲述了JS实现json对象数组按对象属性排序操作.分享给大家供大家参考,具体如下: 在实际工作经常会出现这样一个问题:后台返回一个数组中有i个json数据,需要我们根据json中某一项进行数组的排序. 例如返回的数据结构大概是这样: { result:[ {id:1,name:'中国银行'}, {id:3,name:'北京银行'}, {id:2,name:'河北银行'}, {id:10,name:'保定银行'}, {id:7,name:'涞水银行'} ] } 现在我们根据业务需要,要根据
-
js 根据对象数组中的属性进行排序实现代码
这篇文章主要介绍了js 根据对象数组中的属性进行排序实现代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 var arr = [ {name:'a',age:9}, {name:'b',age:12}, {name:'c',age:8} ]; arr.sort((a,b)=>{ return a.age - b.age }); function compare(property){ return function(a,b){ var
-
JS数组操作大全对象数组根据某个相同的字段分组
目录 先说点废话 目标对象数组 准换后的对象数组 编写函数的思路 方法一 方法二 拓展————ES6的新方法Object.keys 先说点废话 最近在实际业务中,需要编写一个方法根据数组中每一个对象的一个相同字段,来将该字段值相等的对象重新编入一个数组,返回一个嵌套的数组对象,特地来做个总结.当然需要注意的是,在开发过程这种数组的处理函数,应当被编写到项目的公共工具函数库中全局调用 目标对象数组 let dataArr = [{ id: 1, anyId: 1023, anyVal: 'fx67
-
PHP数组操作汇总 php数组的使用技巧
数组,可以说是PHP的数据应用中较重要的一种方式.PHP的数组函数众多,下面是我学习的小结,借此记之,便于以后鉴之. 1. 数组定义 数组的定义使用 array()方式定义,可以定义空数组: 复制代码 代码如下: <?php $number = array(1,3,5,7,9); //定义空数组 $result = array(); $color =array("red","blue","green"); //自定义键值 $language
-
Jquery 数组操作大全个人总结
jQuery的数组处理,便捷,功能齐全. 最近的项目中用到的比较多,深感实用,一步到位的封装了很多原生js数组不能企及的功能. 最近时间紧迫,今天抽了些时间回过头来看 jQuery中文文档 中对数组的介绍,顺便对jQuery数组做个总结.温故,知新. 强烈建议你打开DEMO演示后再看下面的详解: 点此查看DEMO 1. $.each(array, [callback]) 遍历[常用] 解释: 不同于例遍 jQuery 对象的 $().each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~
-
利用jQuery操作对象数组的实现代码
jQuery对于数组元素操作主要提供了以下工具: (1)数组和对象的例遍:jQuery.each(obj,callback) 通用例遍方法,可用于例遍对象和数组.回调函数拥有两个参数:第一个为对象的成员或数组的索引,第二个为对应变量或内容.如果需要退出 each 循环可使回调函数返回 false,其它返回值将被忽略. (2)数组元素的过滤:jQuery.grep(array,callback,[invert]) 使用过滤函数过滤数组元素.此函数至少传递两个参数:待过滤数组和过滤函数.过滤函数必须
-
js判断一个对象是否在一个对象数组中(场景分析)
目录 场景: 第一个场景解法:如果数组中已经存在,就不能添加 小结: 第二个场景解法: 对象数组去重 场景: 有一个对象数组,如: var arr = [{"appName":"小何","appId":"1"},{"appName":"小王","appId":"2"}] 一般来说,常见的场景有两个: 第一个是,比如鼠标点击按钮,往数组里push()
-
Java对象数组定义与用法详解
本文实例讲述了Java对象数组定义与用法.分享给大家供大家参考,具体如下: 所谓的对象数组,就是指包含了一组相关的对象,但是在对象数组的使用中一定要清楚一点:数组一定要先开辟空间,但是因为其是引用数据类型,所以数组里面的每一个对象都是null值,则在使用的时候数组中的每一个对象必须分别进行实例化操作. 对象数组的声明 先定义,再开辟空间 类名称 对象数组名[] = null; 对象数组名 = new 类名称[长度]; 定义并开辟数组 类名称 对象数组名[] = new 类名称[长度]; 在声明对
-
JS实现数组简单去重及数组根据对象中的元素去重操作示例
本文实例讲述了JS实现数组简单去重及数组根据对象中的元素去重操作.分享给大家供大家参考,具体如下: js数组简单去重 var arr1 = [1, 2, 3, 4, 5, 6, 3, 4, 3]; function arrayUnique1(arr) { var result = [], hash = {}; for (var i = 0, elem; (elem = arr[i]) != null; i++) { if (!hash[elem]) { result.push(elem); ha
-
JS操作对象数组实现增删改查实例代码
1.介绍 最近帮朋友弄一个简单的针对json数组的增删改成页面,正好涉及到了js去操作对象数组实现增删改查功能.我估计很多朋友应该也会遇到这类操作,所以记录一下以便分享. 2.数据准备 这里我就以学生对象数组为例了,其实这个数组和json数组操作起来基本一致的,转换一下即可.例如可以使用JSON.parse将一串JSON字符串转换为js对象数组. 测试数据: // 学生对象数组 var students = [ {id:1, name: "张三", age: 14}, {id:2, n
-
JS前端知识点总结之页面加载事件，数组操作，DOM节点操作，循环和分支
本文实例讲述了JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支.分享给大家供大家参考,具体如下: 页面加载事件的比较 window.onload jquery 中的 document.ready document.ready = function (callback) { // 兼容FF,Google if (document.addEventListener) { document.addEventListener('DOMContentLoaded', function