概要: このチュートリアルでは、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)出力
trueCode 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
falseCode 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)出力
trueCode 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
falseCode language: JavaScript (javascript)このチュートリアルでは、JavaScrip配列のsome()メソッドを使用して、条件を満たす要素が配列に少なくとも1つあるかどうかをテストする方法を学習しました。