首頁 > web前端 > js教程 > 主體

JS數組學習判斷數組元素是不是都滿足給定條件

青灯夜游
發布: 2021-08-26 17:24:51
原創
6214 人瀏覽過

在上一篇文章《JS數組學習之遍歷數組,將元素值全部擴大一倍》中,我們介紹了遍歷數組,對數組中每個元素進行處理的方法。這次繼續聊聊數組的遍歷,介紹一下檢測數組元素是否全部符合指定條件的幾種方法,有需要的朋友可以學習了解一下~

那麼如何判斷數組中元素是否滿足指定條件?例如遍歷數組,檢查數組中元素是否都為偶數,這要怎麼操作?

下面我們來介紹3種方法,先從熟悉的for迴圈開始,然後介紹2種內建函數--看看用它們來怎麼偵測。

方法1:利用for迴圈

實作想法:

  • 利用for語句來遍歷陣列

for(var i=0;i<a.length;i++){
}
登入後複製
  • 檢查數組中元素是否都為偶數,反過來:只要有一個不是偶數,那麼可以得到「不全為偶數」。

因此實作程式碼可以這麼寫:

var a = [2,4,5,6,8],b=0;
for(var i=0;i<a.length;i++){
	if (a[i] % 2 != 0) {
		b=0
		break;
	}else{
		b++;
	}
}
if (b) {
	console.log("都是偶数");
} else {
	console.log("不全为偶数");
}
登入後複製

分析程式碼:

  • ##我們使用了一個中間變量

    b賦值為0,如果數組元素為偶數,b就自增1;當有一個數組元素不是偶數,b的值就又重新變為0,並且使用“break;”退出循環。

  • 此時我們判斷變數b的值就能知道數組中元素是否都為偶數:如果

    b>0則都是偶數;如果 b=0則不全為偶數。

因為陣列中元素5不是偶數,因此輸出結果為:


JS數組學習判斷數組元素是不是都滿足給定條件

##方法2:利用some()方法

some()方法可以偵測陣列中是否有符合條件的元素。換個角度思考,也可以用來偵測數組中的所有元素是否都不符合指定條件,都不符合的話就回傳 false,有一個或多個符合的話就回傳 true。 (和上文程式碼是個想法)

array.some(function callbackfn(Value,index,array),thisValue)
登入後複製

function callbackfn(value,index,array)

:一個回呼函數,不可省略,最多可接受三個參數:

    value:目前陣列元素的值,不可省略。
  • index:目前陣列元素的數字索引。
  • array:目前元素屬於的陣列物件。
  • 我們來看看實作程式碼:
function f(value, index, ar) {
    if (value % 2 != 0) {
        return true;
    }
}
var a = [2,4,6,8,10,12];
var b = a.some(f);
if (b) {
	console.log("不全为偶数");
} else {
	console.log("都是偶数");
}
登入後複製

可以看出:因為陣列中元素都是偶數,因此輸出結果是:

JS數組學習判斷數組元素是不是都滿足給定條件我們將陣列元素12改為11,則輸出結果為:

JS數組學習判斷數組元素是不是都滿足給定條件

#方法3:使用every()方法

every()方法可以偵測陣列元素是否全部符合指定條件。語法如下,參數取值情況可參考上文some() 方法

array.every(function callbackfn(Value,index,array),thisValue)
登入後複製

我們來看看實作程式碼:

function f(value, index, ar) {
    if (value % 2 == 0) {
        return true;
    }else {
        return false;
    }
}
var a = [2,4,6,8,10,11];
var b = a.every(f);
if (b) {
	console.log("都是偶数");
} else {
	console.log("不全为偶数");
}
登入後複製

輸出結果為:

不全为偶数
登入後複製

# every()和some() 方法的區別:

只有當數組中的所有元素都滿足條件時,every() 才會傳回true;只要數組中有一個元素滿足條件,some( ) 就回傳true。

好了,就說到這裡了,有需要的可以看:

javascript影片教學

#

以上是JS數組學習判斷數組元素是不是都滿足給定條件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板