【JavaScript】配列に特定の要素が含まれているか存在チェック方法8選

はじめに

JavaScriptでの開発を進める中で、配列内に特定の要素が存在するかどうかを確認する必要がしばしばあります。

この記事では、配列の要素を存在チェックする方法を網羅的に解説します。

アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる

配列内の要素をチェックする基本的なメソッド

JavaScriptで配列内の要素の存在をチェックするには、いくつかの基本的なメソッドがあります。

これらのメソッドを使えば、簡単に要素の存在を確認できます。

1. includesメソッド

includesメソッドは、配列が特定の要素を含むかどうかを判定します。

このメソッドは真偽値（trueまたはfalse）を返し、検索する要素とオプションで検索開始位置を引数に取ります。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange'];
    console.log(fruits.includes('banana'));  // true
    console.log(fruits.includes('grape'));   // false
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.includes('banana')); // true

console.log(fruits.includes('grape')); // false

}

Program.main();

 出力結果
true
false

サルモリ

includesメソッドは、特定の要素が配列に含まれているかどうかサクッと確認できるんだね！

2. indexOfメソッド

indexOfメソッドは、配列内で指定された要素を検索し、その位置（インデックス）を返します。

要素が見つからない場合は-1を返します。このメソッドも、検索する要素とオプションで検索開始位置を引数に取ります。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange'];
    console.log(fruits.indexOf('banana'));  // 1
    console.log(fruits.indexOf('grape'));   // -1
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits.indexOf('banana')); // 1

console.log(fruits.indexOf('grape')); // -1

}

Program.main();

 出力結果
1
-1

サルモリ

indexOfメソッドは、要素が配列のどこにあるかも教えてくれるから、ただ存在をチェックするだけじゃないんだね！

これらのメソッドは、JavaScriptにおける配列操作の基本であり、特定の要素の存在チェックには非常に便利です。しかし、より高度なチェックが必要な場合や、オブジェクトのような複雑なデータ構造の要素をチェックする場合は、他のメソッドを使用する必要があります。

3. findメソッド

findメソッドは、配列内の要素が指定されたテスト関数を満たすかどうかをチェックし、最初にテストをパスした要素を返します。

要素が見つからない場合はundefinedを返します。このメソッドは、検索に使用するコールバック関数を引数に取ります。

ソースコード例

class Program {
  static main() {
    const numbers = [5, 12, 8, 130, 44];
    const found = numbers.find(element => element > 10);
    console.log(found);  // 12
  }
}
Program.main();

class Program {

static main() {

const numbers = [5, 12, 8, 130, 44];

const found = numbers.find(element => element > 10);

console.log(found); // 12

}

Program.main();

 出力結果
12

サルモリ

findメソッドって、条件に一番最初に合致した要素をピックアップするんだね！便利だなあ。

4. findIndexメソッド

findIndexメソッドは、配列内の要素が指定されたテスト関数を満たすかどうかをチェックし、その要素のインデックスを返します。

要素が見つからない場合は-1を返します。このメソッドも、検索に使用するコールバック関数を引数に取ります。

ソースコード例

class Program {
  static main() {
    const numbers = [5, 12, 8, 130, 44];
    const isLargeNumber = (element) => element > 13;
    const index = numbers.findIndex(isLargeNumber);
    console.log(index);  // 3
  }
}
Program.main();

class Program {

static main() {

const numbers = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

const index = numbers.findIndex(isLargeNumber);

console.log(index); // 3

}

Program.main();

 出力結果
3

サルモリ

findIndexメソッドは、条件を満たす要素の場所を教えてくれるんだね。特定の条件で要素を探す時に使えそう！

5. someメソッド

someメソッドは、配列内の少なくとも一つの要素が指定されたテスト関数を満たすかどうかをチェックします。

条件を満たす要素が一つでもあればtrueを、そうでなければfalseを返します。このメソッドも、テストに使用するコールバック関数を引数に取ります。

ソースコード例

class Program {
  static main() {
    const array = [1, 2, 3, 4, 5];
    const even = (element) => element % 2 === 0;
    console.log(array.some(even));  // true
  }
}
Program.main();

class Program {

static main() {

const array = [1, 2, 3, 4, 5];

const even = (element) => element % 2 === 0;

console.log(array.some(even)); // true

}

Program.main();

 出力結果
true

サルモリ

someメソッドは、配列の中に条件を満たす要素が一つでもあるかどうかをチェックするんだね。これは便利！

6. everyメソッド

everyメソッドは、配列内の全ての要素が指定されたテスト関数を満たすかどうかをチェックします。

全ての要素が条件を満たせばtrueを、一つでも満たさなければfalseを返します。このメソッドも、テストに使用するコールバック関数を引数に取ります。

ソースコード例

class Program {
  static main() {
    const array = [1, 30, 39, 29, 10, 13];
    const isBelowThreshold = (currentValue) => currentValue < 40;
    console.log(array.every(isBelowThreshold));  // true
  }
}
Program.main();

class Program {

static main() {

const array = [1, 30, 39, 29, 10, 13];

const isBelowThreshold = (currentValue) => currentValue < 40;

console.log(array.every(isBelowThreshold)); // true

}

Program.main();

 出力結果
true

サルモリ

everyメソッドは、全ての要素が条件を満たしているかどうかを確認するのに使えるんだね。厳しいチェックができるね！

JavaScriptで配列内の要素の存在を確認する方法は多岐にわたります。これらのメソッドを適切に使い分けることで、配列内のデータを効率的に処理できるようになります。

ループを使用した存在チェック

配列内の要素をループを使用してチェックする方法は、特に条件が複雑で既存のメソッドでは対応できない場合や、学習目的で配列操作の基本を理解したい場合に有効です。

forループやfor...ofループを使用することで、配列の各要素にアクセスし、条件に一致するかどうかをチェックすることができます。

forループを使用した例

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange', 'grape'];
    const searchFruit = 'banana';
    let found = false;
    for (let i = 0; i < fruits.length; i++) {
        if (fruits[i] === searchFruit) {
            found = true;
            break;  // 一致する要素が見つかったらループを抜ける
        }
    }
    console.log(found);  // true
    }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange', 'grape'];

const searchFruit = 'banana';

let found = false;

for (let i = 0; i < fruits.length; i++) {

if (fruits[i] === searchFruit) {

found = true;

break; // 一致する要素が見つかったらループを抜ける

}

console.log(found); // true

}

Program.main();

 出力結果
true

for...ofループを使用した例

for...ofループを使用すると、配列の各要素に対して直接ループを行うことができ、コードがよりシンプルになります。

ソースコード例

class Program {
  static main() {
    const fruits = ['apple', 'banana', 'orange', 'grape'];
    const searchFruit = 'grape';
    let found = false;

    for (const fruit of fruits) {
      if (fruit === searchFruit) {
        found = true;
        break;  // 一致する要素が見つかったらループを抜ける
      }
    }

    console.log(found);  // true
  }
}
Program.main();

class Program {

static main() {

const fruits = ['apple', 'banana', 'orange', 'grape'];

const searchFruit = 'grape';

let found = false;

for (const fruit of fruits) {

if (fruit === searchFruit) {

found = true;

break; // 一致する要素が見つかったらループを抜ける

}

console.log(found); // true

}

Program.main();

 出力結果
true

サルモリ

ループを使えば、自分で細かいチェック条件を設定して要素を探すことができるんだね！

これらのループを使用した方法は、プログラミングの基本を理解するうえでとても重要です。

javascriptには存在チェックの便利なメソッドがたくさんありますが、

ループを使った存在チェックは複雑な条件や特定のロジックに基づいて要素をチェックする必要がある場合に特に役立ちます。

: 配列の他の使い方はコチラ【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド

はじめに JavaScriptは、ウェブ開発において不可欠な言語です。特に配列の操作は、日々の開発作業で頻繁に遭遇するため、その方法を習得することは極めて重要です。この記事では、JavaScrip ...

続きを見る

まとめ

JavaScriptで配列内の要素の存在を確認する方法は多岐にわたります。

これらのメソッドを適切に使い分けることで、配列内のデータを効率的に処理できるようになります。

最後まで読んで頂き、ありがとうございました。少しでもお役にたてたなら幸いです！

サルモリ

最後まで読んでくれてありがとう！！

【JavaScript】配列に特定の要素が含まれているか存在チェック方法8選

はじめに

配列内の要素をチェックする基本的なメソッド

1. includesメソッド

2. indexOfメソッド

3. findメソッド

4. findIndexメソッド

5. someメソッド

6. everyメソッド

ループを使用した存在チェック

forループを使用した例

for...ofループを使用した例

配列の他の使い方はコチラ【JavaScript】配列の使い方を徹底解説！！値の追加、修正、削除、ループ処理、mapメソッド、filterメソッド

まとめ

Ads Blocker Detected!!!