0%

JS 測試陣列是否有符合條件的元素好用方法 every() & some()

Array 34

一顆小螺絲釘立大功 ,一粒屎壞一鍋粥猜兩個迭代函式。

在 ECMAScript 5 的迭代方法中有兩個好用的迭代方法,這兩個方法主要拿來檢查陣列裡的元素值是否符我們給的條件:some()every。而這兩個方法的回傳值皆為布林值。

如果用字面上來解釋,就很容易分辨兩個的不同:
some() -> some 某一個:有一個元素符合條件就回傳true
every() -> every 每一個:要全部符合條件才會回傳true

some()可以用來檢查陣列中是否有「某一個」元素符合條件。如果「其中一個」元素符合條件就回傳 true。

every剛好和some()相反,我們拿它來檢查陣列中是否「全部」都符合條件,如果「每一個」都符合條件,才會回傳 true ,否則會回傳 false。

everysome()也很像邏輯運算子的 OR ||和 AND &&的關係, ||只要一邊有符合條件就是 true ,而&&則是相反,需要兩邊都符合才會得到 true。

我們先來看一下這兩個方法的基本資料:

every()

Array.prototype.every() - JavaScript | MDN
原型: Array.prototype.every()
功能: 測試陣列中的所有元素是否都通過了所給的條件。
改變: 不會改變原陣列
語法: arr.every(callback[, thisArg])
回傳值: 傳回布林值,若回呼函式在處理每一個陣列元素時皆得到 truthy 值,則回傳 true。否則,回傳值為 false。
參數: callback 函式與 thisArg

例如,我們想要知道陣列中的字串是否都有兩個字母以上,希望得到的值是 true,所以使用every(),但因為其中一個字串su只有兩個字母,所以回傳 false。

1
2
3
4
5
let arr = ['jack', 'john', 'may', 'su', 'Ada'];
let friendName = arr.every(function(value, index, array) {
return value.length > 2;
});
friendName; // false

另外一個例子,我們想檢查陣列裡的元素值是否「都」大於 10,我們也可以換個方式這樣寫較為清楚:

1
2
3
4
5
6
7
8
9
10
11
// 先把條件寫好
function isBigEnough(element, index, array) {
return element >= 10;
}
// 只要一個不符合,就回傳 false
var passed = [15, 6, 9, 168, 42].every(isBigEnough);
passed; // false

// 如果條件都符合,就回傳 true
passed = [15, 54, 18, 168, 42].every(isBigEnough);
passed; // true

some()

Array.prototype.some() - JavaScript | MDN
原型: Array.prototype.some()
功能: 測試陣列中是否至少有一個元素通過了所給的條件。
改變: 不會改變原陣列
語法: arr.every(callback[, thisArg])
回傳值: 傳回布林值,若回呼函式在處理陣列元素時有一個元素得到 truthy 值,則回傳 true。否則,回傳值為 false。
參數: callback 函式與 thisArg

我們可以拿它來測試陣列元素的數值是否存在,用以下的方法可以達到和 ECMAScript 7 的include()方法的效果。
如果元素存在於陣列中,這個自定義函數就會返回 true:

1
2
3
4
5
6
7
8
9
10
const friends = ['Ayda', 'Chris', 'Kira', 'Philippe'];

function checkAvailability(arr, val) {
return arr.some(function(arrVal) {
return val === arrVal;
});
}

checkAvailability(friends, 'Kira'); // true
checkAvailability(friends, 'Tracy'); // false

因缺乏實際應用的經驗,和朋友討論後,朋友提供了一個使用some()的情境:
例如,用some()來檢查使用者上傳的檔案格式是否符合條件,只要符合 checkTypeArray 中的任一格式時,就可以往下繼續執行。

1
2
3
4
5
6
// 可自訂檢查的檔案格式
const checkTypeArray = ['xls', 'xlsx', 'pdf', 'csv'];
// fileType 為使用者選取得到的檔案格式
const checkType = checkTypeArray.some(file => fileType === file);
if(checkType)
// do anything you want to do.

ECMAScript 5 的迭代方法就剩reduce()reduceRight()還沒介紹,雖然還沒有辦法很多實際的情境,但相信多詳細了解這些方法的細節,總是會多一些印象,對於有著金魚腦的我,以後多少都有印象吧!

如有需要改進的地方,拜託懇請告知,我會盡快修改,感謝您~