どうもフロントエンドエンジニアのまさぴょんです！
今回は、JavaScriptの配列メソッド連載シリーズ someメソッド編に入ります。
目次
配列メソッド some()とは？
some() メソッドは、配列の少なくとも1つの要素が、指定された関数で実装されたテストに合格するかどうかをテストします。これはブール値を返します。
引用元: MDN: Array.prototype.some()
と天下のMDN-Docが言っております。
someは、「いくつかの」とか「一部」みたいな意味を持つ英単語ですね。
その英語の原義からも、メソッド機能の意味を理解することができます。
配列に対して、「指定条件」に1つでもあてはまる要素があれば「true」を返してくれるメソッド。それがsomeメソッドです。
逆に、1つも条件に合致しなければ、メソッドの実行結果は「false」が返却されます。
Array.prototype.some() の構文
someメソッドの基本の形を確認しましょう！
メソッドを理解する時に意識すべきなのは、「引数」(Parameter)と「実行結果」(返り値)です。
array.some( (value, index, array)=> { 条件記述 } )
// 実行結果（返り値）は、Boolean(true/false)
// 1つでも「条件」に合致すれば、truesomeメソッドの第一引数には、CallBack関数が来ます。
上記では、アロー関数で記述しています。
そして、そのCallBack関数には、3つの引数が設定できます。
必須なのは、第一引数のvalueで第二・第三引数のindexとarrayは、省略できます。
value, index, array の意味は、それぞれ次のようになります。
- value: 配列から取り出したvalue
- index: 取り出している現在のindex番号
- array: someメソッドを呼び出している配列そのもの
この上記の特徴を把握すれば、someメソッドの概要は理解できたと思います。
someメソッドを使ってみよう！ Sample-Code①
それでは次にsomeメソッドを使ってみましょう！
以下のCodeをコピーして、ブラウザのコンソールなどで実行してみましょう！
// 1. someメソッド: 1つでも条件に一致するかどうかCheck => 真偽値を返してくれる！
let sife = 1200;
const itemPrice = [1000, 2000, 3000, 4000, 5000];
let BuyEnableCheck = itemPrice.some( (v,i,a) => sife >= v );
console.log(BuyEnableCheck); // 出力結果: true
BuyEnableCheck ? console.log("買える商品があった！") : console.log("買える商品が1つもなかった・・・");
// 出力結果: 買える商品があった！上記のコードでは、「sife が itemPrice以上かどうか？」という条件で判定して、1つでも買える商品があるかどうかCheckしていますね。
このコードのsife変数の金額を変えたり、条件を変えてみたりして、コンソールで遊んでみてください。
someメソッドを使ってみよう！ Sample-Code②
次のコードもコピーして、コンソールなどで実行してみてください。
// 1. 会議出席のアンケート・リスト
const MeetingJoinList = [
{ joinFlag: false, name: "ロボ玉A", id: 1},
{ joinFlag: true, name: "ロボ玉B", id: 2},
{ joinFlag: false, name: "ロボ玉C", id: 3},
{ joinFlag: false, name: "ロボ玉D", id: 4},
{ joinFlag: true, name: "ロボ玉E", id: 5},
];
// 2. 1人でも参加希望者がいるなら、しょうがないから会議を開く。
const MeetingFlag = MeetingJoinList.some( (value, index, array) => value.joinFlag );
console.log(MeetingFlag); // 出力結果: true
// 3. 会議参加者いるなら、しょうがないから参加者リストを作る。
const joinNameList = MeetingFlag ? MeetingJoinList.filter( (value, index, array) => value.joinFlag) : [];
// 4. 参加者いる/いないで、出力切替。
if (joinNameList.length === 0) console.log("会議は開催しない！やったー")
else joinNameList.forEach( (value, index, array) => console.log(`会議参加者は、社員ID:${value.id}, ${value.name}`));
// < 出力結果 >
// 会議参加者は、社員ID:2, ロボ玉B
// 会議参加者は、社員ID:5, ロボ玉Eこれもカスタマイズして、遊んでみてください。
まとめ
- 基本構文 & 引数： Array.some( ( value, index, array ) => { 指定条件 } );
- 実行結果： どれか1つでもtrueならtrue / すべてfalseならfalse
次回は、someメソッドの逆の機能、すべて条件に合致したら「true」を返却するeveryメソッドについて解説します。
JavaScript書籍 Ver. 中級-上級者向け
JavaScript書籍 Ver. 初級者向け
参考・引用
1. MDN: Array.prototype.some()
最近の投稿
dialogタグの使い方(領域展開)・HTMLとJavaScriptで簡単なDialog・モーダルを作成する方法
Reactの JSX内部でif文やSwitch文, 三項演算子などの条件分岐をする方法
CSS の postion で縦横(上下左右)ともに画面の中央に要素を配置する方法
JavaScriptで、Objectかどうかの判定方法と、配列かどうかの判定方法
JavaScriptで、ObjectとObjectが同じ値かどうかの比較・判定方法
JavaScriptの console.group, groupEnd, groupCollapsed, time, timeEnd, timeLog の使い方
