3.js中判断数组中是否存在某个对象/值，判断数组里的对象是否存在某个值 的五种方法 及应用场景|判断数组里有没有某对象，有不添加，没有则添加到数组

news2025/1/31 3:04:47

3.js中判断数组中是否存在某个对象/值，判断数组里的对象是否存在某个值 的五种方法 及应用场景

一、当数组中的数据是简单类型时：

应用js中的indexof方法：存在则返回当前项索引，不存在则返回 -1。

var arr=[1,2,3,4]
		var str=2
		// 如果不等于-1则代表存在
		if(arr.indexOf(str) != -1){
			console.log('存在！')
		}
		// 否则不存在
		else{
			console.log('不存在！')
		}

二、当数组中的数据是复杂类型的对象时：

方法1：json化成字符串再用indexOf

因为对象是复杂类型的，得先化成字符串再用indexOf.

注意：indexof 你得确保查找的这个对象与数组内的对象完全一致，对象里每一个键值对的位置都一致，才能说是完全相等的对象。

比如说，这个数组里的对象arr_obj本来就是由obj加进去的，此时obj判断是不是已经加进去了。如果加进去了就不用再加了，这种情况可以适用。

indexof原本并不是用于数组里比较复杂类型的对象，它主要用于简单数据类型。

用法：

//验证条件
if(JSON.stringify(arr).indexOf(JSON.stringify(obj)) == -1){
     console.log('该项不存在！')
}else{
     console.log('该项存在！')
}
//对象添加进数组后，查找数组中这个对象。
console.log(arr[arr.indexOf(obj)]) //简单类型
console.log(arr[JSON.stringify(arr).indexOf(JSON.stringify(obj))]) //复杂类型
//查找数组中这个对象的某个键 count键
console.log(arr[JSON.stringify(arr).indexOf(JSON.stringify(obj))].count)

应用：

	obj={id:1,name:'xiaoming',age:16,count:0}
//	obj={id:4,name:'xiaoli',age:17,count:0}  //验证不存在
	arr=[
	        {id:1,name:'xiaoming',age:16,count:0},
	        {id:2,name:"xiaobai",age:19,count:0}
	    ]
	
	if(JSON.stringify(arr).indexOf(JSON.stringify(obj)) == -1){
	//数组中不存在该项,把该项添加到数组中
	  console.log('该项不存在！')
      arr.push(obj);
      console.log(arr)
      for (var i = 0; i < arr.length; i++) {
      	console.log(arr[i]["id"])
      }
	}
	else {
	  console.log('该项已存在！');
	  // 让数组中该项的count++
	  //查找数组中的某个对象。
//	  console.log(arr[arr.indexOf(obj)])
//	  console.log(arr[JSON.stringify(arr).indexOf(JSON.stringify(obj))])
	  arr[JSON.stringify(arr).indexOf(JSON.stringify(obj))].count++

	}

以下验证数组中是否存在某对象的几种方式都是都是一种思路：

判断数组里的对象是否存在某个值

判断数组里的对象是否存在某个值，比如说数组arrtest[0]的id, 与objtest的id做比较，或者拿他们的name作比较，相同就证明存在此对象。

obj={id: 1,name:'xiaoming',age:16}
arr=[
        {id: 1,name:"xiaoming",age:16},
        {id: 2,name:"xiaobai",age:19}
    	]

方法2：应用数组 API findIndex

findIndex是es6中新增的方法。返回数组中满足条件的第一个元素的索引。否则返回-1。

和es5中的indexOf相似。

obj={id:1,name:'xiaoming',age:16,count:0} 
	// obj={id:4,name:'xiaoli',age:17,count:0}  //验证不存在
	arr=[
			{id:1,name:'xiaoming',age:16,count:0},
			{id:2,name:"xiaobai",age:19,count:0}
		]
	objid=obj["id"]

	function func1(arr,objid){
	    var index = arr.findIndex(item => item.id=== objid)
		if(index==-1){//说明arr中不存在id为objid的对象
			console.log("数组中不存在")
		}else{
			console.log("数组中存在")
		} 
	}
	func1(arr,objid)

方法3：应用数组 API some

some是es6中新增的方法。这个指定了一个状态值result. 通过状态值判定。

// obj={id:1,name:'xiaoming',age:16,count:0} //验证存在
	obj={id:4,name:'xiaoli',age:17,count:0}  //验证不存在
	arr=[
			{id:1,name:'xiaoming',age:16,count:0},
			{id:2,name:"xiaobai",age:19,count:0}
		]
					
	function func1(obj,arr){
		let result = arr.some(item =>{ // 这里是判断关键  存在 返回 true  result=true
		   if(item.id===obj.id)
			   return true 
		})
		if(result){
			 console.log("数组中该对象已存在")
		}else{
			console.log("数组中不存在该项")
			arr.push(obj)
		}	
	}
	func1(obj,arr)

方法4：自己写逻辑

上述都是js封装好的API，我们自己写的话要遍历数组。

自己写也是通过数组的对象里存在某个值和对象的某个值比较，相等则数组里有对象，没有相等的则没有。

方法4.1

for里面两个if语句，通过obj与数组的每一项obj比较，相等则进入第一个if,表示数组里存在obj,break，出for循环，遍历完了没有相等的则进入第二个if,表示数组里不存在这个obj。

这里逻辑上比较容易出错：

应该用 两个if的逻辑，一个if代表相等，另一个代表遍历完了还没有找到相等的。那如何代表都遍历完了还没有相等的呢？下边应用代码有解析。

不能用 if和else的逻辑，相等则存在，不相等则不存在。我们想当然的认为是这个逻辑，但是这样不对，为什么？

请点击4.1错误写法解析

正确做法

逻辑关系

for(...){
    if(相等){
		...
   	 	break; //break:跳出循环。在for循环里，如果一个if语句break了，他会不走下边了。跳出for循环。
    }
    // if(i==arr.length-1)代表遍历完了。
   // 为啥代表遍历完了呢？i一直在++，i代表索引，for循环直到最后一个索引arr.length-1,直到最后一个值上边那个if也没有找到相等的，会进入第二个if,表示数据不存在列表里。然后push进这条数据。
    if(i==arr.length-1){
        ...
        break;
	}
}

应用 ：

obj={id:1,name:'xiaoming',age:16,count:0} //验证存在
	// obj={id:4,name:'xiaoli',age:17,count:0}  //验证不存在
	arr=[
			{id:1,name:'xiaoming',age:16,count:0},
			{id:2,name:"xiaobai",age:19,count:0}
		]
	function func1(arr,obj){
		//1.判断arr是否为空
		if(arr.length==0){
			// arr为空添加obj
			arr.push(obj)
		}else{
			//2.arr不为空
			  //判断arr中某对象的id==obj的id，相等则有这条数据
			for (var i = 0; i < arr.length; i++) {
				if(arr[i]["id"]==obj["id"]){
					// 2.1 有这条数据，不添加obj,执行逻辑后，跳出for循环
					console.log("数组中已存在这条数据")
					arr[i]["count"]++  //更改数组里对象内部 给数组里的对象的键count++
					console.log("此对象的count+1：count="+arr[i]["count"])
					break;//找到就跳出循环
				}
				//如果一个obj的id和arr里obj的不相等，则不走上面的if，走这个if
				//i是索引值，索引值都等于最后一条数据的索引了，意思是遍历到最后一条数据了。
				//obj和arr里的每个对象都比较一遍时还没有找到一样的。说明arr里没obj.
                //P.S.arr的最后一条obj数据和obj相等，也会进上面那个if,然后跳出，不会进这里
				if(i==arr.length-1){
					console.log("数组中不存在这条数据")
					//obj加入arr里面
					arr.push(obj);
					console.log(arr)
					break;
				}
			}
			
		}
	}

	func1(arr,obj)

验证不存在：

image-20220115195520611

验证已存在：

image-20220115200019180

4.1错误写法

错误写法逻辑关系
for(...){
    if(arr[i]["id"]==obj["id"]){//相等
   	 	//代表数组里存在
    }else{
    	//代表数组里不存在
	}
    
}

//添加商品进数组。
var goodsid=obj.id
for(){  //
	if(goodsid==arr[i].id){  //数组里有这条数据，使count++
		count++
	}else{ 					//数组里没有这条数据，push进数组
		push进arrlist
	}
}
报错信息：

数组里存在这个obj: obj在if和else两种情况都进入了。

数组里存在这个obj: obj在if和else两种情况也都进入了。

不管数组里存在不存在obj, 两种情况都会进入。

很神奇，那这是为啥呢？

错误原因：

if里面arr[i]["id"]==obj["id"]代表 obj的id值和arr里某个对象的id值相等了，就进入if了。

那else能代表obj在arr里没找到相等的吗？

答案是不能代表。究其原因是else还在for循环里，for循环没有遍历完。

举个例子：
for循环里：
arr [{id:1,,},{id:2,,},{id:3,,},{id:4,,}]

obj  {id:1}

在if里面goodsid与挨个他们的id作比较：

如果数组里存在该对象：

如果goodsid=1,for循环里第一个id也是1，这条就进if了，但是for还没有循环完，goodid会继续与id=2,3,4作比较,

结果是goodsid=1和arr里第二个obj，id=2的不匹配，又进入else了。

如果goodsid=2, for循环开始，它和id=1作比较，两者不相等，直接进else,它认定数组里没有这条数据，它直接被else的逻辑push进数组了，但是它还没和其他的做比较呢，后面有和它相同的id=2的数据，此时for循环还在继续，等循环第二遍找到数组里id=2的obj，它俩相等了，它又进if情况了。两种情况又都进入了。

所以说得把每一条数据都比较一遍，才可以认定数组里有没有这条数据。else不能代表数组里没有这条数据了。

如果数组里不存在该对象：

比如说obj的id=5,数组没有id为5的对象。

arr [{id:1,,},{id:2,,},{id:3,,},{id:4,,}]
obj  {id:5,,}
goodid=obj.id

对象进入for循环，首先这个对象不会进if,因为和id=1比较它不相等啊，它会进else情况，else情况直接把它push进数组了，此时arr里面已经有id为5的对象了，因为if,else都在for循环里，得等for循环执行完了才能出来，当for循环循环到第五遍时，检验到arr里obj的id和这个相等了，都是5，它会进if情况。

所以，这也是两个情况都进入了。

综上所述，就是for循环没有走完，else不能代表所有项的锅。

方法4.2 标识符

标识符的方法大家都很熟悉，先看一个小例子帮助理解。

质数的判断方法


//输出100以内的质数     思路：一个数字只能被1和它本身整除    
  for(var i=2;i<=100;i++){
      var bol=false;
      for(j=2;j<=100;j++){
       	if(i!=j&&i%j==0){//合数 都变成true
       	bol=true;
       	}
      }for循环完
       if(bol==false){//for循环完了后，剩下的false都是质数
       	console.log(i);
       }
   }

应用：

// obj={id:1,name:'xiaoming',age:16,count:0} //验证存在
	obj={id:4,name:'xiaoli',age:17,count:0}  //验证不存在
	arr=[
			{id:1,name:'xiaoming',age:16,count:0},
			{id:2,name:"xiaobai",age:19,count:0}
		]
	function func1(arr,obj){
		var ischecked=false
		//1.判断arr是否为空
		if(arr.length==0){
			// arr为空添加obj
			arr.push(obj)
		}else{
			//2.arr不为空   判断arr中某对象的id==obj的id，相等则有这条数据
			for (var i = 0; i < arr.length; i++) {
				if(arr[i]["id"]==obj["id"]){
					// 2.1 有这条数据，不添加obj,执行逻辑后，
					console.log("数组里有这条，不添加，count++")
					arr[i]["count"]++  //更改数组里对象内部 给数组里的对象的键count++
					console.log("此对象的count+1：count="+arr[i]["count"])
					//状态值改成true
					ischecked=true
				}
				
				
			}//for循环完
			// 判断状态值即可
			if(ischecked==false){//判断相等是双==
				console.log("数组里没有这条，添加进数组")
				//obj加入arr里面
				arr.push(obj);
				console.log(arr)
				
			}
			
		}
	}
	func1(arr,obj)

判断存在：不添加

image-20220115212122584

判断不存在：添加进数组

image-20220115213723541

上述几种方式的应用场景

js/vue中添加商品进购物车功能实现

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/407664.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ECharts设置双x轴

ECharts设置双x轴

下面给大家分享一下ECharts的几种功能&#xff0c;循序渐进地实现一个复杂的曲线图。 V1.0&#xff1a; 代码&#xff1a; let option {title: { text: V1.0 },legend: { data:[销量] },// x轴的数据xAxis: {data: ["王","胡歌","曾小贤",&q…
阅读更多...
Vue3使用axios的配置教程详解

Vue3使用axios的配置教程详解

1.安装 npm install --save axios vue-axios2.在src根目录创建service文件夹。然后创建axios.js 2.1在axios.js添加拦截器,请求拦截:initAxios.interceptors.request;响应拦截:initAxios.interceptors.response import axios from "axios";const initAxios axios.…
阅读更多...
用idea创建vue项目

用idea创建vue项目

目录 一、安装node.js &#xff08;1&#xff09;下载安装包 &#xff08;2&#xff09;测试node.js是否安装成功 &#xff08;3&#xff09;安装vue和全局vue-cli 二、idea安装vue.js插件 三、创建vue项目 四、修改配置文件 五、配置idea运行的环境 一、安装node.js …
阅读更多...
ERROR: npm v9.4.1 is known not to run on Node.js v8.13.0.

ERROR: npm v9.4.1 is known not to run on Node.js v8.13.0.

前面全是废话&#xff0c;大家可以直接看序号8下面的nvm的命令以及序号11之后的问题解决&#xff0c;希望能帮助到你们&#xff01;是个什么问题呢&#xff1f;昨天领导给了个前后端分离的项目&#xff0c;让不才我搭建一下环境&#xff0c;我兴高采烈的拿着项目搭建手册按照文…
阅读更多...
微信小程序开发 app.json全局配置

微信小程序开发 app.json全局配置

JSON 是一种数据格式&#xff0c;在实际开发中&#xff0c;JSON 总是以配置文件的形式出现。app.json 是当前小程序的全局配置&#xff0c;可以通过app.json对小程序项目进行设置所有页面路径、窗口外观、界面表现、底部 tab 等。{"pages": ["pages/index/index…
阅读更多...
vue中实现文件批量打包压缩下载（以及下载跨域问题分析）

vue中实现文件批量打包压缩下载（以及下载跨域问题分析）

上次做了一个选择多个数据生成多个二维码并下载&#xff0c;当时项目催的紧&#xff0c;就简单写了个循环生成二维码下载&#xff0c;一次性会下载很多文件&#xff0c;特别难整理&#xff1b; 刚好这次项目又遇到类似这种功能&#xff0c;需要一次性批量下载多个文件&#xf…
阅读更多...
浅谈uniapp的flex布局

浅谈uniapp的flex布局

文章目录1 flex布局1.1 flex-direction1.2 flex-wrap1.3 justify-content1.4 align-items1.5 align-content属性1.6 其他项目属性1.6.1 order属性1.6.2 flex-grow属性1.6.3 flex-shrink属性1.6.4 flex属性1 flex布局 ​ flex是Flexible Box的缩写&#xff0c;意为”弹性布局”…
阅读更多...
TypeError: this.$message is not a function报错情况解决

TypeError: this.$message is not a function报错情况解决

在最近负责的一个前端项目中&#xff0c;使用this.$message报错了&#xff0c;之前也没注意&#xff0c;然后这次抽空看了一下问题 报错原因是因为我用了这种提示写法&#xff1a; 首先&#xff0c;我最开始是用基础写法&#xff1a; 但是这种写法有个弊端&#xff0c;就是如…
阅读更多...
【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

【JS 构造|原型|原型链|继承(圣杯模式)|ES6类语法】上篇

⌚️⌚️⌚️个人格言&#xff1a;时间是亳不留情的&#xff0c;它真使人在自己制造的镜子里照见自己的真相! &#x1f4d6;Git专栏&#xff1a;&#x1f4d1;Git篇&#x1f525;&#x1f525;&#x1f525; &#x1f4d6;JavaScript专栏&#xff1a;&#x1f4d1;js实用技巧篇…
阅读更多...
腾讯地图api使用——地图选点自动定位到当前位置

腾讯地图api使用——地图选点自动定位到当前位置

WebService API | 腾讯位置服务 用户在使用腾讯地图api时&#xff0c;需先申请腾讯位置服务API Key&#xff0c;该key在调用时用于唯一标识开发者身份。 1.自动获取当前位置 引入以下js文件 https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js //获…
阅读更多...
FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM 融入后端优化的FASTLIO SLAM 系统 前端：FAST_LIO2 后端：LIO_SAM

FAST_LIO_SAM Front_end : fastlio2 Back_end : lio_sam Videos : FAST-LIO-SAM Bilibili_link Source code : FAST_LIO_SAM Related worked 1.FAST-LIO2为紧耦合的lio slam系统&#xff0c;因其缺乏前端&#xff0c;所以缺少全局一致性&#xff0c;参考lio_sam的后端部分&…
阅读更多...
Vue3 reactive丢失响应式问题

Vue3 reactive丢失响应式问题

问题描述&#xff1a;使用 reactive 定义的对象&#xff0c;重新赋值后失去了响应式&#xff0c;改变值视图不会发生变化。 测试代码&#xff1a; <template><div><p>{{ title }}</p><ul><li v-for"(item, index) in tableData" …
阅读更多...
【小程序】组件化开发的基本使用(一)

【小程序】组件化开发的基本使用(一)

文章目录小程序组件化开发基本使用小程序组件化思想自定义组件的过程组件样式实现细节小程序组件化开发基本使用 小程序组件化思想 组件插槽定义使用 小程序在刚刚推出时是不支持组件化的, 也是为人诟病的一个点&#xff1a; 但是从v1.6.3开始, 小程序开始支持自定义组件开发…
阅读更多...
如何创建一个简易的HTML网页框架

如何创建一个简易的HTML网页框架

背景&#xff1a; 在我们初步学习了web前端开发的一些知识时&#xff0c;我们可能会考虑构建一个简单的html网站&#xff0c;但是&#xff0c;如何着手去开始我们的网站&#xff0c;对于新手来说可能是个问题。 在这篇文章中&#xff0c;我将介绍我在构建一个简易的网页时&am…
阅读更多...
Vue2中使用axios的三种方法

Vue2中使用axios的三种方法

第一种 原始方法 直接在项目中使用(不建议使用) 这种方法最简单粗暴 优点&#xff1a;不需要做封装&#xff0c;不需要做配置傻瓜式操作&#xff0c;不需要做异步处理 缺点&#xff1a;代码太繁琐&#xff0c;当遇到请求过多的时候&#xff0c;这样写不适合读写 注意&#…
阅读更多...
使用videojs播放m3u8视频

使用videojs播放m3u8视频

vue3使用videojs 播放m3u8格式视频 videojs是一个播放视频的js库&#xff0c;可以通过videojs结合videojs-contrib-hls实播放m3u8格式视频。流媒体传输协议(hls)定义了用来控制播放的m3u8文件 m3u8是一个文本文件(播放列表文件)&#xff0c;里面的内容就是被播放的音视频文件路…
阅读更多...
vue3 - 组件注册和组件通信（setup语法糖）

vue3 - 组件注册和组件通信（setup语法糖）

这里介绍的是vue3中组件的注册和组件通信父传子&#xff0c;子传父。 前提&#xff1a;用的是vue3版本且使用了setup语法糖 <script setup> .....<script> 1&#xff0c;组件注册 1.1&#xff0c;全局注册&#xff1a; 全局注册需要在 在main.js中进行注册&#x…
阅读更多...
SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

SpringBoot整合调用微信模板方法实现微信公众号消息通知推送，Java实现微信公众号给关注用户推送自定义消息通知（手把手从0到1）

目录 概述 公众号给关注用户推送自定义消息 一、申请公众号模板消息 二、获取安装“web开发者工具” 三、微信网页授权说明 四、微信网页授权 - 流程时序图 五、HTTPClient 实现微信公众号消息推送与发布&#xff08;四步走&#xff09; 六、通过weixin-java-mp SDK实现…
阅读更多...
flex布局（弹性盒子一）

flex布局（弹性盒子一）

目录 一、弹性盒子的开启 二、弹性盒子的不同样式 1.flex-direction&#xff1a;子项目的排列方向 2.flex-wrap&#xff1a;子项目多行 3. flex-flow 是flex-direction和flex-wrap的一起指定&#xff08;简写&#xff09; 一、弹性盒子的开启 设置内容区的样式&#xff1a…
阅读更多...
Vue组件库实现按需引入可以这么做

Vue组件库实现按需引入可以这么做

本文为Varlet组件库源码主题阅读系列第七篇&#xff0c;读完本篇&#xff0c;可以了解到如何通过unplugin-vue-components插件来为你的组件库实现按需引入。 手动引入 前面的文章中我们介绍过Varlet组件库的打包流程&#xff0c;最后会打包成几种格式&#xff0c;其中module和…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023