JavaScript 配列の every() メソッド: すべての配列要素がテストに合格するかどうかを判定する

概要: このチュートリアルでは、JavaScript 配列の every() メソッドを使用して、すべての配列要素がテストに合格するかどうかを確認する方法を学習します。

for ループを使用した配列要素の確認

指定された条件を配列のすべての要素が満たしているかどうかをテストする必要がある場合があります。

通常は、 for ループを使用してすべての要素を反復処理し、各要素を条件と照合して確認します。3 つの要素を持つ配列 numbers があるとします。

let numbers = [1, 3, 5];Code language: JavaScript (javascript)

次のコードは、numbers 配列のすべての要素がゼロより大きいかどうかを確認します。

let numbers = [1, 3, 5];
let result = true;
for (let i = 0; i < numbers.length; i++) {
    if (numbers[i] <= 0) {
        result = false;
        break;
    }
}
console.log(result);Code language: JavaScript (javascript)

出力

trueCode language: JavaScript (javascript)

仕組み

まず、 result 変数を true に初期化します。
次に、numbers 配列の要素を反復処理し、各要素がゼロ以下かどうかを確認します。該当する場合は、result 変数を false に設定し、break ステートメントを使用してループをすぐに終了します。ゼロ以下の要素がない場合、result 変数の値は true のままです。

このコードはシンプルでわかりやすいです。ただし、かなり冗長です。

JavaScript Array 型には、より短く、よりクリーンな方法で配列のすべての要素がテストに合格するかどうかを確認できる every() メソッドが用意されています。

JavaScript 配列の every() メソッドの紹介

ES5 以降、JavaScript 配列型には、配列のすべての要素をテストするメソッド every() が用意されています。

次の例では、every() を使用して、数値配列のすべての要素がゼロより大きいかどうかを確認します。

let numbers = [1, 3, 5];
let result = numbers.every(function (e) {
    return e > 0;
});

console.log(result);Code language: JavaScript (javascript)

出力

trueCode language: JavaScript (javascript)

ES6 アロー関数を使用すると、コードをさらに短くすることができます。

let numbers = [1, 3, 5];

let result = numbers.every( e  => e > 0);

console.log(result);Code language: JavaScript (javascript)

これもはるかにクリーンですね。

every() メソッドの構文を以下に示します。

arrayObject.every(callback[, thisArg])Code language: CSS (css)

every() メソッドは、callback と thisArg の 2 つの名前付き引数を受け入れます。

1) callback 引数

callback は、配列の各要素をテストする関数です。callback() 関数は次の形式です。

function callback(currentElement, index, array){
   //...
}Code language: JavaScript (javascript)

callback() 関数は 3 つの引数を取ります。

まず、currentElement は現在処理されている要素です。
次に、index は currentElement のインデックスです。
3 番目に、array は every() メソッドが呼び出された配列です。

currentElement 引数は必須ですが、index と array 引数はオプションです。

2) thisArg 引数

every() メソッドの thisArg 引数はオプションです。thisArg 引数をメソッドに渡すと、callback 関数内の this 値は thisArg 引数を参照します。

callback 関数がすべての配列要素に対して truthy 値を返す場合、every() メソッドは true を返します。そうでない場合は、false を返します。

every() メソッドは、callback() が falsy 値を返す要素が見つかるまで、配列のすべての要素に対して callback() 関数を実行することに注意してください。

言い換えれば、callback() が falsy 値を返す配列要素が見つかると、every() は callback() 関数の呼び出しを停止し、false を返します。

every() メソッドを使用する例をいくつか見てみましょう。

JavaScript 配列の every() メソッドのその他の例

次の例では、すべての配列要素が偶数かどうかをテストします。

let numbers = [1, 3, 5];
let isEven = numbers.every(function (e) {
    return e % 2 == 0;
});

console.log(isEven);Code language: JavaScript (javascript)

出力

falseCode language: JavaScript (javascript)

対照的に、次の例では、すべての配列要素が奇数かどうかをテストします。

let numbers = [1, 3, 5];

let isOdd = numbers.every(function (e) {
    return Math.abs(e % 2) == 1;
});

console.log(isOdd);Code language: JavaScript (javascript)

出力

trueCode language: JavaScript (javascript)

min と max の 2 つのプロパティを持つオブジェクトがあるとします。

let range = {
    min: 0,
    mas: 10
};Code language: JavaScript (javascript)

次の例では、numbers 配列のすべての要素が、range オブジェクトの min と max で指定された範囲内にあるかどうかをテストします。

let numbers = [1, 3, 5];

let range = {
    min: 0,
    max: 10
};

let isInRange = numbers.every(function (e) {
    return e >= this.min && e <= this.max;
}, range);Code language: JavaScript (javascript)

出力

trueCode language: JavaScript (javascript)

この例では、range オブジェクトを 2 番目の引数として every() メソッドに渡します。そして、callback() 関数内で、this キーワードを使用して range オブジェクトを参照します。

注意: 空の配列

空の配列に対して every() メソッドを呼び出すと、メソッドは常に任意の条件に対して true を返します。例えば

let gtZero = [].every(e => e > 0); // any condition
let ltZero = [].every(e => e < 0); // any condition

console.log('gtZero:', gtZero);
console.log('ltZero:', ltZero);Code language: JavaScript (javascript)

出力

gtZero: true
ltZero: trueCode language: JavaScript (javascript)

このチュートリアルでは、JavaScript 配列の every() メソッドを使用して、配列内のすべての要素がテスト関数によって提供されるテストに合格するかどうかをテストする方法を学習しました。

このチュートリアルは役に立ちましたか？