Javascript中的every()與some()的區(qū)別和應(yīng)用小結(jié)
Javascript中的every()與some()的區(qū)別和應(yīng)用
every()定義和用法
every() 方法用于檢測(cè)數(shù)組所有元素是否都符合指定條件(通過(guò)函數(shù)提供)。
every() 方法使用指定函數(shù)檢測(cè)數(shù)組中的所有元素:
- 如果數(shù)組中檢測(cè)到有一個(gè)元素不滿(mǎn)足,則整個(gè)表達(dá)式返回 false ,且剩余的元素不會(huì)再進(jìn)行檢測(cè)。
- 如果所有元素都滿(mǎn)足條件,則返回 true。
注意: every() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
注意: every() 不會(huì)改變?cè)紨?shù)組。
isEvery:function(){
let a = [2,3,5,7,9]
let status = a.every(function(currentValue,index,arr){
console.log(currentValue) // 必須。當(dāng)前元素的值
console.log(index) // 可選。當(dāng)前元素的索引值
console.log(arr) // 可選。當(dāng)前元素屬于的數(shù)組對(duì)象
return currentValue >= 1 // 判斷數(shù)組中是否所有值都大于等于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:trueevery()參數(shù)說(shuō)明
function(currentValue, index,arr){
// currentValue 必須。當(dāng)前元素的值
// index 可選。當(dāng)前元素的索引值
// arr 可選。當(dāng)前元素屬于的數(shù)組對(duì)象
// 布爾值。如果所有元素都通過(guò)檢測(cè)返回 true,否則返回 false。
}some()定義和用法
some() 方法用于檢測(cè)數(shù)組中的元素是否滿(mǎn)足指定條件(函數(shù)提供)。
some() 方法會(huì)依次執(zhí)行數(shù)組的每個(gè)元素:
- 如果有一個(gè)元素滿(mǎn)足條件,則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測(cè)。
- 如果沒(méi)有滿(mǎn)足條件的元素,則返回false。
注意: some() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。
注意: some() 不會(huì)改變?cè)紨?shù)組。
isSome:function(){
let a = [2,3,5,7,9]
let status = a.some(function(currentValue,index,arr){
console.log(currentValue) // 必須。當(dāng)前元素的值
console.log(index) // 可選。當(dāng)前元素的索引值
console.log(arr) // 可選。當(dāng)前元素屬于的數(shù)組對(duì)象
return currentValue >= 1 // 判斷數(shù)組中是否有值大于等于1
})
console.log(status)
}
// currentValue:2
// index:0
// arr:2,3,5,7,9
// truesome()參數(shù)說(shuō)明
function(currentValue, index,arr){
// currentValue 必須。當(dāng)前元素的值
// index 可選。當(dāng)前元素的索引值
// arr 可選。當(dāng)前元素屬于的數(shù)組對(duì)象
// 布爾值。如果所有元素都通過(guò)檢測(cè)返回 true,否則返回 false。
}every()和some()的主要區(qū)別
every()會(huì)對(duì)數(shù)組中的每一個(gè)元素,即currentValue進(jìn)行匹配,只有全部滿(mǎn)足條件才會(huì)返回true,而some()中,只需有一個(gè)currentValue滿(mǎn)足條件即可返回true,后面的currentValue不會(huì)再進(jìn)行比較
every()和some()的應(yīng)用場(chǎng)景
如下圖,有一個(gè)表格,運(yùn)用every()和some()來(lái)判斷選中的表格狀態(tài),當(dāng)選中其中一條數(shù)據(jù)時(shí),判斷他的當(dāng)前狀態(tài),當(dāng)選擇多條數(shù)據(jù)時(shí)判斷他的當(dāng)前狀態(tài)

vue代碼片段
data() {
return {
statusDes:''
}
},
methods:{
handleSelectionChange:function(val){
const statusList = [] //定義數(shù)組,保存每一項(xiàng)狀態(tài)
val.forEach((item) =>{
// 遍歷選擇的項(xiàng),把狀態(tài)保存到數(shù)組
statusList.push(item.status)
})
// every()會(huì)遍歷每一個(gè)狀態(tài),當(dāng)全部滿(mǎn)足條件時(shí),才返回true
this.statusDes = statusList.every(this.isAllQuery)
// some()會(huì)遍歷狀態(tài),只要一個(gè)滿(mǎn)足,就返回true
// this.statusDes = statusList.some(this.isAllQuery)
},
// 過(guò)濾狀態(tài),即當(dāng)狀態(tài)顯示:”是“時(shí),返回true
isAllQuery(status){
return status === '是'
},
changes:function(){
if(this.statusDes){
this.$alert('是', '成功狀態(tài)', { confirmButtonText: '確定', type: 'success' })
}else {
this.$alert('否', '失敗狀態(tài)', { confirmButtonText: '確定', type: 'warning' })
}
},
isTrue(value){
return value >=1
}
}結(jié)果分析
every()全選,發(fā)現(xiàn)狀態(tài)不同時(shí):


some()全選,發(fā)現(xiàn)狀態(tài)不同時(shí):

到此這篇關(guān)于Javascript中的every()與some()的區(qū)別和應(yīng)用的文章就介紹到這了,更多相關(guān)js every()與some()的區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript中使用正則計(jì)算中文長(zhǎng)度的例子
這篇文章主要介紹了javascript中使用正則計(jì)算中文長(zhǎng)度的例子,需要的朋友可以參考下2014-04-04
JS實(shí)現(xiàn)unicode和UTF-8之間的互相轉(zhuǎn)換互轉(zhuǎn)
需要將PC送過(guò)來(lái)的UTF-8轉(zhuǎn)換成UNICODE才能將內(nèi)容通過(guò)短信發(fā)送出去,同樣,接收到的短信為unicode編碼,也許轉(zhuǎn)換成UTF-8才能在PC端軟件顯示出來(lái)2017-07-07
AngularJs中Bootstrap3 datetimepicker使用實(shí)例
這篇文章主要為大家詳細(xì)介紹了AngularJs中Bootstrap3 datetimepicker使用實(shí)例,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12
javascript 使用 NodeList需要注意的問(wèn)題
理解NodeList及其近親NamedNodeMap和HTMLCollection,是從整體上透徹理解DOM的關(guān)鍵所在,這三個(gè)集合都是“動(dòng)態(tài)的”,換句話(huà)說(shuō),每當(dāng)文檔結(jié)構(gòu)發(fā)生變化時(shí),他們都會(huì)得到更新。2013-03-03
webpack本地開(kāi)發(fā)環(huán)境無(wú)法用IP訪問(wèn)的解決方法
下面小編就為大家分享一篇webpack本地開(kāi)發(fā)環(huán)境無(wú)法用IP訪問(wèn)的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
jsonp格式前端發(fā)送和后臺(tái)接受寫(xiě)法的代碼詳解
jsonp是ajax提交的一種格式不會(huì)受跨域限制,這篇文章主要介紹了jsonp格式前端發(fā)送和后臺(tái)接受寫(xiě)法的代碼詳解,需要的朋友可以參考下2019-11-11
js實(shí)現(xiàn)移動(dòng)端輪播圖滑動(dòng)切換
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)移動(dòng)端輪播圖滑動(dòng)切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12
BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼
這篇文章主要介紹了BootStrap創(chuàng)建響應(yīng)式導(dǎo)航條實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-05-05

