当前位置: 首页 > news >正文

风尚云网学js-关于js对象数组如何去重?


请问对象数组如何去重?

目录

请问对象数组如何去重?

1.es5数组新方法  reduce

2.利用indexOf

3.直接for循环,利用对象属性的唯一性


 

每个对象的内存地址本身就不一样,去重的意义何在,非要去重的话,那只能通过JSON.stringify序列化成字符串(这个方法有一定的缺陷)后进行对比,或者递归的方式进行键-值对比,但是对于大型嵌套对象来说还是比较耗时的,

都是根据每个对象的某一个具体属性来进行去重,因为考虑到服务端返回的数据中可能存在id重复的情况,需要前端进行过滤,

1.es5数组新方法  reduce

//reduce方法有两个参数,第一个参数是一个callback,用于针对数组项的操作;第二个参数则是传入的初始值,这个初始值用于单个数组项的操作。

const res = [{ id: 1, a: 1 },{ id: 2, a: 2 },{ id: 3, a: 3 },{ id: 1, a: 4 },
];
const result = res.reduce((acc, cur) => {const ids = acc.map(item => item.id);return ids.includes(cur.id) ? acc : [...acc, cur];
}, []);
console.log(result); // -> [ { id: 1, a: 1}, {id: 2, a: 2}, {id: 3, a: 3} ]

2.利用indexOf

var arr = []
var data = [{id:1,time:'1'},{id:2,time:'2'},{id:2,time:'3'},
]
for(let val of data){arr.push(val.id)
}
var newArr = [];
var newArr2 = [];
for(var i =0;i<arr.length-1;i++){if(newArr.indexOf(arr[i]) == -1){newArr.push(arr[i]);newArr2.push(data[i]);}
}
data= newArr2;
//[{id: 1, time: "1"}, {id: 2, time: "2"}]

3.直接for循环,利用对象属性的唯一性

 var arr = [{id:'1',data:'1'},{id:'2',data:'2'},{id:'1',data:'1'},]var result = {}for(var i=0;i<arr.length;i++){result[arr[i]['id']] = arr[i]}
console.log('11',result)


http://www.taodudu.cc/news/show-4811331.html

相关文章:

  • 云网融合学习之-VRRP协议实现网关保护探讨
  • 学习WCF必备网址
  • VB6如何引用VBDX9.tlb-------VB6编程学习DX9游戏编程DirectX9编程2D小游戏源码冷风引擎CoolWind2D游戏引擎(2)
  • DirectX SDK各版本下载地址备份
  • opnet之aloha进阶csma
  • opnet14.5学习总结三
  • OPNET学习笔记(一):创建一个小型局域网工程、场景并对比统计数据
  • C语言软件分层的方法,单片机程序分层设计思想
  • 第十三届蓝桥杯单片机完整程序
  • 基于matlab的低通滤波器,基于Matlab Guide的低通滤波器设计
  • 03、滤波器设计——阶跃阻抗低通滤波器
  • Sallen-Key低通滤波器设计
  • 一阶数字低通滤波器设计matlab
  • 什么是音源?
  • java实现钢琴颜色改变_Android 拨号盘按键音修改为钢琴音效果实现
  • 立式大钢琴-Native Instruments The Giant v1.2.0 Kontakt
  • 象牙大钢琴II克隆版-Synthogy Ivory Grand Pianos II Kontakt
  • 雅马哈CFX钢琴-Garritan Abbey Road Studios CFX Concert Grand
  • FL Studio(水果)里PC键盘如何弹奏音源?
  • 数千名学者唾弃Nature的新付费访问机器学习期刊
  • 署名用by还是from_【这个太有创意了】中国学者把自己名字PS到《Nature》杂志论文第一作者前面,放到自己简历里...
  • 《通信原理》多径衰落信道仿真2
  • 瑞利、莱斯与Nakagami-m信道衰落模型
  • win11音频无声音排查解决方案
  • 【最新免费】CCNA中文注释题库精选模拟题
  • 视频教程-基于深度学习的计算机视觉:原理与实践(上部)-计算机视觉
  • YOLOv5原理分析及部署教程
  • 计算机组成原理的基本知识
  • 视频教程-2021考研专业课《计算机操作系统原理》精讲视频课程-操作系统
  • 串口公头(九针)母头(九孔)对应接口(转)