JavaScript數(shù)組every方法的應(yīng)用場景實(shí)例
1.every數(shù)組方法的作用
判斷數(shù)組中是否所有元素都滿足條件
2.語法:array.every( function ( item, index,arr) {} )
第一個(gè)參數(shù): item,必須,當(dāng)前元素的值
第二個(gè)參數(shù) : index,可選,當(dāng)前元素在數(shù)組中的索引值
第三個(gè)參數(shù) : arr,當(dāng)前元素所處的數(shù)組對(duì)象
3.every方法特點(diǎn)
(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.注意點(diǎn):
(1)every()方法不會(huì)對(duì)空數(shù)組進(jìn)行檢測
(2)every()方法不會(huì)改變?cè)紨?shù)組
5.應(yīng)用場景 : 開關(guān)思想,購物車全選
示例 :
//獲取全選框
const checkAll = document.querySelector('#checkAll')
//獲取所有選擇框
const checkList = document.querySelectorAll('.check')
//點(diǎn)擊全選框
checkAll.onclick = function () {
//設(shè)置每一個(gè)選擇框checked值與自身checked一致
checkList.forEach(item => item.checked = this.checked)
}
//點(diǎn)擊每一個(gè)選擇框:判斷數(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的相同點(diǎn):
- 都可以遍歷數(shù)組中每一項(xiàng)的數(shù)據(jù);
- 都不會(huì)對(duì)空數(shù)組進(jìn)行檢測;
- 都不會(huì)改變?cè)紨?shù)組。
some和every的不同點(diǎn):
some() 方法會(huì)依次執(zhí)行數(shù)組的每個(gè)元素:
- 如果有一個(gè)元素滿足條件,則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測。
- 如果沒有滿足條件的元素,則返回false。
every() 方法使用指定函數(shù)檢測數(shù)組中的所有元素:
- 如果數(shù)組中檢測到有一個(gè)元素不滿足,則整個(gè)表達(dá)式返回 false ,且剩余的元素不會(huì)再進(jìn)行檢測。
- 如果所有元素都滿足條件,則返回 true。
通俗點(diǎn)來說:some比較容易滿足,只要有1個(gè)條件符合,他就返回true;
every要求高,要全部條件滿足,才返回true。
總結(jié)
到此這篇關(guān)于JavaScript數(shù)組every方法的文章就介紹到這了,更多相關(guān)JS數(shù)組every方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)導(dǎo)出Excel和CSV文件操作
這篇文章介紹了JS實(shí)現(xiàn)導(dǎo)出Excel和CSV文件的方法,文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-05-05

