js判断一个对象是否在一个对象数组中(场景分析)

目录

场景:

第一个场景解法:如果数组中已经存在,就不能添加

小结:

第二个场景解法: 对象数组去重

场景:

有一个对象数组,如:

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判断一个对象在一个对象数组中内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读

    js设置div的边框|怎样给div设置边框

    js设置div的边框|怎样给div设置边框,,1. 怎样给div设置边框1、首先新建一个html文件,输入基本的内容,这里设置一个div,并把它的class设置为de

    js设置样式|js设置样式类

    js设置样式|js设置样式类,,js设置样式    javascript改变CSS样式分为局部和全局,分别如下:  一、局部改变样式    有三种方法:直接

    Python之可迭代对象、迭代器、生成器

    Python之可迭代对象、迭代器、生成器,迭代,生成器,一、概念描述可迭代对象就是可以迭代的对象,我们可以通过内置的iter函数获取其迭代器,可

    应用程序对象

    应用程序对象,,应用程序对象是一个应用程序级对象,用于在所有用户之间共享信息,并且在Web应用程序运行期间可以保存数据。 应用的性质: 方法

    js用代码实现简单购物车

    js用代码实现简单购物车,,图: 选择所有按钮: 复制代码代码如下所示: 选择 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3000元 笔记本电脑:3

    js设置背景色|js设置颜色

    js设置背景色|js设置颜色,,js设置背景色首先通过js定位到div的子元素,再通过setatteibute方法给属性添加背景色。js设置颜色js改变字体的颜

    数列求和快捷键|数组求和快捷键

    数列求和快捷键|数组求和快捷键,,数组求和快捷键1,这是文本型数组直接运算 不可能 除非单个的取出来分割后转数值型,再找相同的X[1],进行X[2

    Safari调试iOS中的js

    Safari调试iOS中的js,页面,设备,概述对于HTML5的开发,大家都知道Chrome的DevTools工具有强大的功能和友好的用户体验,不仅能快速方便调试Jav

    Java创建对象的几种方式

    Java创建对象的几种方式,对象,方法,本文目录Java创建对象的几种方式java中几种创建对象的方式1Java中创建对象的集中方式有那些JAVA创建对

    Bootstrap的js插件之模态框|modal

    Bootstrap的js插件之模态框|modal,模态,饭盒,.modal——指明div元素包裹模态框;.fade——给模态框添加淡入淡出效果;.modal-dialog——包裹