[JavaScript] 配列の値が条件を満たすか検証する – some(), every()

every()とsome()は配列内の要素をテストし、条件を満たしていれば最終的にtrue、満たしていなければfalseを返します。

/**
 * 偶数チェック
 */
const list = [1, 2, 3, 4, 5]
const check = value => ((value % 2) === 0)

// テストを行う
const check1 = list.every(check)  // すべて偶数か (AND)
const check2 = list.some(check)   // 一つでも偶数か (OR)

// 結果表示
console.log(check1)  // false
console.log(check2)  // true

every()はすべての要素が条件を満たしているかどうか、some()は一つでも満たしているかの違いになります。要はeveryがANDで、someがORですね。

利用例

NGワードを含んでいるかチェック – some()

const list = [
  '吾輩は猫である',
  '名前はまだない',
  'どこで生れたかとんと見当がつかぬ'
]

if( list.some(value => value.match(/猫/)) ){
  console.log('NGワードあり')
}
else{
  console.log('NGワードなし')
}

入力の抜け漏れがないかチェック – every()

ざっくりとしたValdiationに応用してみます。

document.querySelectorAll()の戻り値をスプレッド構文で一般的な配列に変換し、取り出したHTMLを順番に処理していきます。

<form>
  <input type="text" id="name">
  <input type="text" id="birthday">
  <input type="text" id="address">
  <button id="btn">チェック</button>
</form>

<script>
document.querySelector('#btn').addEventListener('click', (e)=>{
  const list = [...document.querySelectorAll('input')]

  if( list.every(elem => elem.value !== '') ){
    alert('抜け漏れなし')
  }
  else{
    alert('抜け漏れあり')
  }

  e.preventDefault()
})
</script>

参考ページ

• Array.prototype.every() – JavaScript | MDN
• Array.prototype.some() – JavaScript | MDN
• スプレッド構文 – JavaScript | MDN

このブログを応援する

お寄せいただいたお気持ちは全額サーバ代や次の記事を執筆するための原資として活用させていただいております。この記事が参考になった場合などぜひご検討ください。

PayPalで300円支払う
※金額は任意で変更できます。
※100円でも泣いて喜びますw
※住所の入力欄が現れた場合は「no needed」を選択ください
これまでのご協力者さま

- Sponsored Link -