Javascript中的every()与some()的区别和应用小结

 更新时间:2023年05月10日 14:53:55   作者:爱吃糖的小明  
every跟some不同点在于,every要判断数组中是否每个元素都满足条件,只有都满足条件才返回true,只要有一个不满足就返回false,这篇文章主要介绍了Javascript中的every()与some()的区别和应用,需要的朋友可以参考下

Javascript中的every()与some()的区别和应用

every()定义和用法 

every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。

every() 方法使用指定函数检测数组中的所有元素:

  • 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
  • 如果所有元素都满足条件,则返回 true。

注意: every() 不会对空数组进行检测。

注意: every() 不会改变原始数组。

isEvery:function(){
				let a = [2,3,5,7,9]
				let status = a.every(function(currentValue,index,arr){
					console.log(currentValue) // 必须。当前元素的值 
					console.log(index)        // 可选。当前元素的索引值
					console.log(arr)          // 可选。当前元素属于的数组对象
					return currentValue >= 1  // 判断数组中是否所有值都大于等于1
				})
				console.log(status)
			}
				 // currentValue:2
				 // index:0
				 // arr:2,3,5,7,9,
				 // currentValue:3
				 // index:1
				 // arr:2,3,5,7,9,
				 // currentValue:5
				 // index:2
				 // arr:2,3,5,7,9,
				 // currentValue:7
				 // index:3
				 // arr:2,3,5,7,9,
				 // currentValue:9
				 // index:4
				 // arr:2,3,5,7,9,
				 // status:true

 every()参数说明

function(currentValue, index,arr){
	// currentValue	必须。当前元素的值
	// index	可选。当前元素的索引值
	// arr	可选。当前元素属于的数组对象
    // 布尔值。如果所有元素都通过检测返回 true,否则返回 false。
	}

some()定义和用法 

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。

some() 方法会依次执行数组的每个元素:

  • 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
  • 如果没有满足条件的元素,则返回false。

注意: some() 不会对空数组进行检测。

注意: some() 不会改变原始数组。

isSome:function(){
				let a = [2,3,5,7,9]
				let status = a.some(function(currentValue,index,arr){
					console.log(currentValue) // 必须。当前元素的值 
					console.log(index)        // 可选。当前元素的索引值
					console.log(arr)          // 可选。当前元素属于的数组对象
					return currentValue >= 1  // 判断数组中是否有值大于等于1
				})
				console.log(status)
			}
 // currentValue:2
 // index:0
 // arr:2,3,5,7,9
 // true

 some()参数说明 

function(currentValue, index,arr){
	// currentValue	必须。当前元素的值
	// index	可选。当前元素的索引值
	// arr	可选。当前元素属于的数组对象
    // 布尔值。如果所有元素都通过检测返回 true,否则返回 false。
	}

every()和some()的主要区别

every()会对数组中的每一个元素,即currentValue进行匹配,只有全部满足条件才会返回true,而some()中,只需有一个currentValue满足条件即可返回true,后面的currentValue不会再进行比较

 every()和some()的应用场景

如下图,有一个表格,运用every()和some()来判断选中的表格状态,当选中其中一条数据时,判断他的当前状态,当选择多条数据时判断他的当前状态

vue代码片段

data() {
			return {
				statusDes:''
			}
		},
methods:{
			handleSelectionChange:function(val){
				const statusList = []  //定义数组,保存每一项状态
				val.forEach((item) =>{
                    // 遍历选择的项,把状态保存到数组
					statusList.push(item.status)
				})
                // every()会遍历每一个状态,当全部满足条件时,才返回true
				this.statusDes = statusList.every(this.isAllQuery)
                // some()会遍历状态,只要一个满足,就返回true 
                // this.statusDes = statusList.some(this.isAllQuery)
			},
            // 过滤状态,即当状态显示:”是“时,返回true
			isAllQuery(status){
				return status === '是'
			},
			changes:function(){
				if(this.statusDes){
					this.$alert('是', '成功状态', { confirmButtonText: '确定', type: 'success' })
				}else {
					this.$alert('否', '失败状态', { confirmButtonText: '确定', type: 'warning' })
				}
			},
			isTrue(value){
				return value >=1
			}
		}

结果分析

every()全选,发现状态不同时:

some()全选,发现状态不同时:

到此这篇关于Javascript中的every()与some()的区别和应用的文章就介绍到这了,更多相关js every()与some()的区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript 代码也可以变得优美的实现方法

    Javascript 代码也可以变得优美的实现方法

    Javascript 代码也可以变得优美的一些经验小结。
    2009-06-06
  • Javascript学习笔记 delete运算符

    Javascript学习笔记 delete运算符

    关于javascript的delete运算符,MDN里有相关文档。以下是我的学习笔记,更多是要关注特殊情况的使用和注意点。
    2011-09-09
  • jquery 实现上下滚动效果示例代码

    jquery 实现上下滚动效果示例代码

    上下滚动的效果,不用说,大家都有看到过,本文为大家介绍下使用jquery实现上下滚动效果,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • js严格模式总结(分享)

    js严格模式总结(分享)

    下面小编就为大家带来一篇js严格模式总结(分享)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • uniapp实现人脸识别功能详细示例

    uniapp实现人脸识别功能详细示例

    这次使用uni-app框架开发一个小程序,有一个刷脸功能,所以下面这篇文章主要给大家介绍了关于uniapp实现人脸识别功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-10-10
  • js 屏蔽鼠标右键脚本附破解方法

    js 屏蔽鼠标右键脚本附破解方法

    用来屏蔽鼠标右键的代码,破解方法也比较简单。比较根本。禁掉js什么也运行不了。
    2009-12-12
  • 小程序数据缓存机制应用实现

    小程序数据缓存机制应用实现

    这篇文章主要介绍了小程序数据缓存机制应用实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • js如何调用qq互联api实现第三方登录

    js如何调用qq互联api实现第三方登录

    这篇文章主要介绍了js如何调用qq互联api实现第三方登录,需要的朋友可以参考下
    2014-03-03
  • js防阻塞加载的实现方法

    js防阻塞加载的实现方法

    下面小编就为大家带来一篇js防阻塞加载的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JS无法捕获滚动条上的mouse up事件的原因猜想

    JS无法捕获滚动条上的mouse up事件的原因猜想

    当用户鼠标在滚动条上按下的时候,我们可以假设他(她)正在浏览聊天内容,那么这个时候好的用户体验就不能让滚动条再自动滚动了
    2012-03-03

最新评论