iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

我的JavaScript日常系列 第 15

JavaScript Day 15. every() 與 some()

在所有的陣列方法裡還有 every() 跟 some() ,聽說是很冷門的兩種方法,確實我在練習上也是蠻少用到的,不過既然是歸類在陣列方法,其實也可以稍微了解一下他們的特性,我想這篇研究文大概是不會太長篇了。

every() 方法

every() 可以檢查所有陣列的內容是否符合指定的條件,並只會回傳一個值 true 或是 false,用在需要比較嚴格把關資料的地方,因為只要有一個資料不符合指定條件,便會回傳 false

every() 語法

arr.every(callback[, thisArg])

語法的解釋其實前面幾篇都有特別提到,這邊就不再多做贅述了。另外,這裡再提供一個例子,可以幫助更快理解:

let array = [
  {
    name: 'Abe',
    like: '珍珠奶茶',
    age: 20
  },
  {
    name: 'Billy',
    like: '青茶',
    age: 30
  },
  {
    name: 'Brittany',
    like: '西瓜牛奶',
    age: 25
  },
  {
    name: 'Cecily',
    like: '冰淇淋紅茶',
    age: 19
  }
];

let ans = array.every(function(item, index, array){
  console.log(item, index, array); // 物件, 索引, 全部陣列
  return item.age > 10 // 當全部 age 大於 10 才能回傳 true
});
console.log(ans); // false: 只要有部分不符合,則為 false

let ans2 = array.every(function(item, index, array){
  return item.age < 30
});
console.log(ans2); // true: 全部 age 都小於 30

some() 方法

some() 方法同樣是回傳 truefalse,比較不同的地方是,some() 僅需要部分符合就會回傳 true,全部都不符合則會回傳 false

以上面的陣列資料為例:

let ans2 = people.some(function(item, index, array){
  return item.age < 25
});
console.log(ans2); // true: 只要有部分符合,則為 true  

let ans2 = people.some(function(item, index, array){
  return item.age > 31
});
console.log(ans2); // false: 全部都不符合則為 false

據說,這兩種方法其實可以做表單驗證?

譬如說註冊時會有幾個欄位,我們使用某些框架架設後端,假如這幾個欄位的值存在於某個後端資料裡,這時候就可以使用 every() 方法去檢查是否含有值。

// 這個範例是假設五個欄位的資料存在於 ctx.request.body 裡
if (Object.values(ctx.request.body).every(x => x !== undefined)) {
    // 欄位都不是空值
} else {
    // 有些欄位是空值
}

底下這個方法可以確保五個欄位都不是空的:

const requirements = ['user', 'password', 'gender', 'name', 'email'];
if (requirements.every(x => ctx.request.body[x] !== undefined)) {
    // 必要的欄位都不是空值
} else {
    // 有些必要的欄位是空值
}

some() 在驗證表單的部分則是以社群軟體填選為例子,假設幾個社群軟體必須至少要留一個的時候:

const socialAccounts = ['facebook', 'twitter', 'github'];
if (socialAccounts.some(x => ctx.request.body[x] !== undefined)) {
    // 至少有填寫一個社群帳號
} else {
    // 完全沒有填寫社群帳號
}

參考資料:
JavaScript 陣列中兩個冷門的方法:Every、Some
JavaScript 陣列處理方法


上一篇
JavaScript Day 14. 靈活運用 reduce()
下一篇
JavaScript Day 16. 迴圈(for、while、do while、break、continue)
系列文
我的JavaScript日常31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言