JavaScript數(shù)組every方法的應(yīng)用場景實例
1.every數(shù)組方法的作用
判斷數(shù)組中是否所有元素都滿足條件
2.語法:array.every( function ( item, index,arr) {} )
第一個參數(shù): item,必須,當(dāng)前元素的值
第二個參數(shù) : index,可選,當(dāng)前元素在數(shù)組中的索引值
第三個參數(shù) : arr,當(dāng)前元素所處的數(shù)組對象
3.every方法特點
(1)循環(huán)次數(shù) !== 數(shù)組長度
(2)函數(shù)內(nèi)部的return
return true : 循環(huán)繼續(xù) 當(dāng)前元素滿足條件,繼續(xù)判斷,如果循環(huán)執(zhí)行完畢還是true,則every的返回值就是true
return false : 循環(huán)結(jié)束,當(dāng)前元素不滿足條件,every的返回值也是false
(3)every方法的返回值
return true : 全部元素都滿足條件
return false : 有元素不滿足條件
4.注意點:
(1)every()方法不會對空數(shù)組進(jìn)行檢測
(2)every()方法不會改變原始數(shù)組
5.應(yīng)用場景 : 開關(guān)思想,購物車全選
示例 :
//獲取全選框 const checkAll = document.querySelector('#checkAll') //獲取所有選擇框 const checkList = document.querySelectorAll('.check') //點擊全選框 checkAll.onclick = function () { //設(shè)置每一個選擇框checked值與自身checked一致 checkList.forEach(item => item.checked = this.checked) } //點擊每一個選擇框:判斷數(shù)組中是否所有選擇框checked值都為true for(let i = 0;i<checkList.length;i++){ checkList[i].onclick = function(){ //事件處理 //判斷 checkList是否所有的元素checked值都是true checkAll.checked = Array.from(checkList).every( item => item.checked ) } }
附:數(shù)組some和every的區(qū)別
some和every的相同點:
- 都可以遍歷數(shù)組中每一項的數(shù)據(jù);
- 都不會對空數(shù)組進(jìn)行檢測;
- 都不會改變原始數(shù)組。
some和every的不同點:
some() 方法會依次執(zhí)行數(shù)組的每個元素:
- 如果有一個元素滿足條件,則表達(dá)式返回true , 剩余的元素不會再執(zhí)行檢測。
- 如果沒有滿足條件的元素,則返回false。
every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素:
- 如果數(shù)組中檢測到有一個元素不滿足,則整個表達(dá)式返回 false ,且剩余的元素不會再進(jìn)行檢測。
- 如果所有元素都滿足條件,則返回 true。
通俗點來說:some比較容易滿足,只要有1個條件符合,他就返回true;
every要求高,要全部條件滿足,才返回true。
總結(jié)
到此這篇關(guān)于JavaScript數(shù)組every方法的文章就介紹到這了,更多相關(guān)JS數(shù)組every方法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
MVVM模式中ViewModel和View、Model有什么區(qū)別?
這篇文章主要介紹了MVVM模式中ViewModel和View、Model有什么區(qū)別?本文分別解釋了它們的功能和作用,然后總結(jié)了它之間的區(qū)別,需要的朋友可以參考下2015-06-06讓GoogleCode的SVN下的HTML文件在FireFox下正常顯示.
GoogleCode可以作為免費的穩(wěn)定的靜態(tài)資源空間來使用,比如JQuery的文檔就在上面2009-05-05JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)
發(fā)布訂閱是一種設(shè)計模式,EventHub可以被看作是一種Pub/Sub實現(xiàn)。本文就來講講如何利用eventHub發(fā)布訂閱寫一個事件監(jiān)聽函數(shù),感興趣的可以了解一下2023-04-04div+css+js實現(xiàn)無縫滾動類似marquee無縫滾動兼容firefox
marquee無縫滾動想必大家都有見過,本文利用div+css+javascript也實現(xiàn)下類似的滾動且兼容firefox,喜歡的朋友可以參考下2013-08-08