快捷導(dǎo)航

JavaScript數(shù)組every方法的應(yīng)用場(chǎng)景實(shí)例

更新時(shí)間：2022年12月12日 11:58:35 作者：Qiemoer

every方法確定數(shù)組中的每一項(xiàng)的結(jié)果都滿(mǎn)足所寫(xiě)的條件的時(shí)候,就會(huì)返回true,否則返回false,這篇文章主要給大家介紹了關(guān)于JavaScript數(shù)組every方法應(yīng)用場(chǎng)景的相關(guān)資料,需要的朋友可以參考下

1.every數(shù)組方法的作用

判斷數(shù)組中是否所有元素都滿(mǎn)足條件

2.語(yǔ)法: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ù)組長(zhǎng)度

(2)函數(shù)內(nèi)部的return

return true : 循環(huán)繼續(xù) 當(dāng)前元素滿(mǎn)足條件,繼續(xù)判斷,如果循環(huán)執(zhí)行完畢還是true,則every的返回值就是true

return false : 循環(huán)結(jié)束,當(dāng)前元素不滿(mǎn)足條件,every的返回值也是false

(3)every方法的返回值

return true : 全部元素都滿(mǎn)足條件

return false : 有元素不滿(mǎn)足條件

4.注意點(diǎn):

(1)every()方法不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)

(2)every()方法不會(huì)改變?cè)紨?shù)組

5.應(yīng)用場(chǎng)景 : 開(kāi)關(guān)思想,購(gòu)物車(chē)全選

示例 :

//獲取全選框
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 )
    }
}