iT邦幫忙

第 11 屆 iThome 鐵人賽

2
自我挑戰組

JavaScript之一定要了解的 Array 與方法系列 第 34

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

  • 分享至 

  • xImage
  •  
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只有兩個字母,所以回傳 flase。

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()還沒介紹,雖然還沒有辦法很多實際的情境,但相信多詳細了解這些方法的細節,總是會多一些印象,對於有著金魚腦的我,以後多少都有印象吧!

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


上一篇
把要的元素留下來的 Array 陣列方法 filter()
系列文
JavaScript之一定要了解的 Array 與方法34
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
0
Askie Lin
iT邦新手 5 級 ‧ 2019-12-27 22:40:34

感謝分享!

tsuifei iT邦新手 4 級 ‧ 2020-01-04 06:26:47 檢舉

感謝妳來看~<3

0
阿展展展
iT邦好手 1 級 ‧ 2020-01-01 00:53:34

恭喜完賽

0
kkdayy_55330
iT邦新手 5 級 ‧ 2020-01-30 10:56:25

嗨大大

在 some() 的解析當中,你複製忘記改唷~

語法: arr.every(callback[, thisArg])

我要留言

立即登入留言