js判断一个对象是否在一个对象数组中(场景分析) 目录 场景: 第一个场景解法:如果数组中已经存在,就不能添加 小结: 第二个场景解法: 对象数组去重 场景: 有一个对象数组,如: var arr = [{appName:小何,appId:1},{appName:小王,appId:2}] 一般来说,常见的场景有
目录
- 场景:
- 第一个场景解法:如果数组中已经存在,就不能添加
- 小结:
- 第二个场景解法: 对象数组去重
场景:
有一个对象数组,如:
var arr = [{"appName":"小何","appId":"1"},{"appName":"小王","appId":"2"}]
一般来说,常见的场景有两个:
第一个是,比如鼠标点击按钮,往数组里push()一个对象,如果数组中已经存在了,那么就得提示不能添加。
第二个是,push()之后做去重处理,既对象数组去重。
第一个场景解法:如果数组中已经存在,就不能添加
使用includes()方法,意为存在,存在返回true,不存在返回false,重点是要结合JSON.stringify()序列化为字符串后再判断,以下是示例代码:
var arr = [{"appName":"小何","appId":"1"},{"appName":"小王","appId":"2"}]
var obj = {"appName":"小王","appId":"2"}
//如果数组arr中不存在字符串JSON.stringify(obj),那就可以添加,反之,则不添加
if(JSON.stringify(arr).includes(JSON.stringify(obj)) === false){
console.log('不存在')
arr.push(obj)
}else{
console.log('已存在')
}
小结:
es6新增的includes()方法很强大,字符串,数组,对象均可使用,返回一个布尔值,比之前常用的indexof()语义化更强,且includes()的性能不错!
第二个场景解法: 对象数组去重
我理解的对象数组去重是这样的:
就是他们的属性和值都得一样,且他们的长度也是一样的。
也就是说,key和value都得一样才行,而且不能多不能少。
试着手写了一下,嵌套了好几层循环,性能不好,直接一步到位,以下是我的最优解:
lodash是前端常用的JS方法库,就是将很多方法封装起来,方便使用。
使用lodash的
_.uniqWith()方法,结合_.isEqual比较函数,即可较为完美的解决问题。
需要注意的是,_.isEqual()方法也是非常强大的,作用是比较两个对象是否相等,这个方法非常实用,我经常用它,他是深层递归的,推荐。
代码示例:
var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
_.uniqWith(objects, _.isEqual);
// => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
到此这篇关于js判断一个对象是否在一个对象数组中的文章就介绍到这了,更多相关js判断一个对象在一个对象数组中内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
本文标题为:js判断一个对象是否在一个对象数组中(场景分析)


- 基于CORS实现WebApi Ajax 跨域请求解决方法 2023-02-14
- 深入浅析AjaxFileUpload实现单个文件的 Ajax 文件上传库 2022-12-15
- ajax实现输入提示效果 2023-02-14
- javascript 判断当前浏览器版本并判断ie版本 2023-08-08
- 1 Vue - 简介 2023-10-08
- 关于 html:如何从 css 表中删除边距和填充 2022-09-21
- vue keep-alive 2023-10-08
- JS实现左侧菜单工具栏 2022-08-31
- layui数据表格以及传数据方式 2022-12-13
- jsPlumb+vue创建字段映射关系 2023-10-08