概要: このチュートリアルでは、JavaScript配列のsome()
メソッドを使用して、配列内の少なくとも1つの要素がテストに合格するかどうかを確認する方法を学習します。
JavaScript配列some()メソッドの紹介
指定された条件を満たす要素が配列に少なくとも1つあるかどうかを確認したい場合があります。
たとえば、次の配列に5未満の要素が少なくとも1つあるかどうかを確認するには
let marks = [ 4, 5, 7, 9, 10, 3 ];
Code language: JavaScript (javascript)
…通常は、次のようにfor
ループを使用します
let marks = [ 4, 5, 7, 9, 10, 3 ];
let lessThanFive = false;
for (let index = 0; index < marks.length; index++) {
if (marks[index] < 5) {
lessThanFive = true;
break;
}
}
console.log(lessThanFive);
Code language: JavaScript (javascript)
出力
true
Code language: JavaScript (javascript)
仕組み
- まず、フラグ変数
lessThanFive
を宣言し、その値をfalse
に設定します。 - 次に、要素を反復処理します。要素が5未満の場合、フラグを
true
に設定し、break
ステートメントを使用してループをすぐに終了します。
コードは期待どおりに動作します。しかし、かなり冗長です。
Array
型には、条件を満たす要素が配列に少なくとも1つあるかどうかをテストできるsome()
というインスタンスメソッドが用意されています。
let marks = [ 4, 5, 7, 9, 10, 3 ];
lessThanFive = marks.some(function(e) {
return e < 5;
});
console.log(lessThanFive);
Code language: JavaScript (javascript)
出力
true
Code language: JavaScript (javascript)
条件は、some()
メソッドに渡されるコールバック関数を介して実装されます。
これで、コードが短くなりました。より表現力を高めるために、ES6のアロー関数構文を使用できます
let marks = [ 4, 5, 7, 9, 10, 3 ];
let lessThanFive = marks.some(e => e < 5);
console.log(lessThanFive);
Code language: JavaScript (javascript)
JavaScript配列some()構文
some()
メソッドの構文を以下に示します
arrayObject.some(callback[, thisArg]);
Code language: CSS (css)
some()
メソッドは2つの引数を受け入れます
1) コールバック引数
some()
関数は、callback
関数がtrue
を返す要素が見つかるまで、配列内の各要素に対してcallback
関数を1回実行します。 some()
メソッドはすぐにtrue
を返し、残りの要素を評価しません。
callback()
がtrue
を返す要素がない場合、some()
メソッドはfalse
を返します。
callback
関数は3つの引数を取ります
function callback(currentElement [[, currentIndex], array]){ // ...}
Code language: JavaScript (javascript)
currentElement
は、配列内で現在処理されている要素です。currentIndex
は、配列内で現在処理されている要素のインデックスです。array
は、some()
が呼び出された配列です。
2) thisArg引数
thisArg
引数はオプションです。 thisArg
をメソッドに渡すと、callback
関数内でthisArg
をthis
値として使用できます。
JavaScript配列some()の例
some()
メソッドを使用する例をいくつか見てみましょう。
1) 配列内に要素が存在するかどうかを確認する
次のexists()
関数は、some()
メソッドを使用して、配列内に値が存在するかどうかを確認します
function exists(value, array) {
return array.some(e => e === value);
}
let marks = [4, 5, 7, 9, 10, 2];
console.log(exists(4, marks));
console.log(exists(11, marks));
Code language: JavaScript (javascript)
出力
true
false
Code language: JavaScript (javascript)
2) 配列に範囲内にある要素が1つあるかどうかを確認する
次の例は、marks
配列のいずれかの数値が(8、10)の範囲内にあるかどうかを確認する方法を示しています
let marks = [4, 5, 7, 9, 10, 2];
const range = {
min: 8,
max: 10
};
let result = marks.some(function (e) {
return e >= this.min && e <= this.max;
}, range);
console.log(result);
Code language: JavaScript (javascript)
出力
true
Code language: JavaScript (javascript)
仕組み。
- まず、minおよびmaxプロパティを持つ範囲オブジェクトを定義します。
- 次に、marks配列オブジェクトで
some()
メソッドを呼び出し、コールバックと範囲オブジェクトを渡します。範囲オブジェクトを2番目の引数(thisArg
)として渡すため、コールバック内でthis
値を介して参照できます。
この例でアロー関数を使用する場合、コールバック関数内のthis
値はrange
オブジェクトではなくglobal
オブジェクトにバインドされることに注意してください。
注意: 空の配列
空の配列でsome()
メソッドを呼び出すと、条件に関係なく結果は常にfalse
になります。例えば
let result = [].some(e => e > 0);
console.log(result);
result = [].some(e => e <= 0);
console.log(result);
Code language: JavaScript (javascript)
出力
false
false
Code language: JavaScript (javascript)
このチュートリアルでは、JavaScrip配列のsome()
メソッドを使用して、条件を満たす要素が配列に少なくとも1つあるかどうかをテストする方法を学習しました。