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

Array 34

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

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

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

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

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

every和some()也很像邏輯運算子的 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。

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

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

// 先把條件寫好
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：

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 中的任一格式時，就可以往下繼續執行。

// 可自訂檢查的檔案格式
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()還沒介紹，雖然還沒有辦法很多實際的情境，但相信多詳細了解這些方法的細節，總是會多一些印象，對於有著金魚腦的我，以後多少都有印象吧！

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