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

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

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)前元素滿足條件,繼續(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)行檢測(cè)

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

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

示例 : 

//獲取全選框
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)行檢測(cè)；
• 都不會(huì)改變?cè)紨?shù)組。

some和every的不同點(diǎn)：

some() 方法會(huì)依次執(zhí)行數(shù)組的每個(gè)元素：

• 如果有一個(gè)元素滿足條件，則表達(dá)式返回true , 剩余的元素不會(huì)再執(zhí)行檢測(cè)。
• 如果沒有滿足條件的元素，則返回false。

every() 方法使用指定函數(shù)檢測(cè)數(shù)組中的所有元素：

• 如果數(shù)組中檢測(cè)到有一個(gè)元素不滿足，則整個(gè)表達(dá)式返回 false ，且剩余的元素不會(huì)再進(jìn)行檢測(cè)。
• 如果所有元素都滿足條件，則返回 true。

通俗點(diǎn)來(lái)說(shuō)：some比較容易滿足，只要有1個(gè)條件符合，他就返回true；

every要求高，要全部條件滿足，才返回true。

總結(jié)

到此這篇關(guān)于JavaScript數(shù)組every方法的文章就介紹到這了,更多相關(guān)JS數(shù)組every方法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論