javascript 配列に指定した文字列が含まれているかを判定する

作成日 2020.10.31
更新日 2022.07.16
javascript
javascript

javascriptで、includesを使用して、配列に指定した文字列が含まれているかを判定するサンプルコードを記述してます。

1. 環境
2. includes使い方
3. 二次元配列に使用
4. 文字列に使用
5. サンプルコード

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.114

Javascript サンプル集はこちら

includes使い方

「includes」を使用すると、配列に指定した文字列が含まれているかを判定することが可能です。

const arr = ['java', 'react', 'react', 'java', 'java', 'C#'];

console.log( arr.includes('java') ); // true
console.log( arr.includes('python') ); // false

完全に一致していない場合は「false」になります。

const arr = ['java', 'react', 'react', 'java', 'java', 'C#'];

console.log( arr.includes('ja') ); // false

また、大文字・小文字も区別されます。

const arr = ['java', 'react', 'react', 'java', 'java', 'C#'];

console.log( arr.includes('Java') ); // false

数値にも使用することが可能です。

const arr = [ -1 , 0.1 , 0 , 1 , 2 , 10 ];

console.log( arr.includes(1) ); // true
console.log( arr.includes(-1) ); // true
console.log( arr.includes(0.1) ); // true
console.log( arr.includes(0) ); // true
console.log( arr.includes(-2) ); // false
console.log( arr.includes(5) ); // false

「some」を使用しても、同様の結果が得られます。

const arr = ['java', 'react', 'react', 'java', 'java', 'C#'];

console.log( arr.some(v => v === 'react') ); // true
console.log( arr.some(v => v === 'python') ); // false
console.log( arr.some(v => v === 'ja') ); // false
console.log( arr.some(v => v === 'React') ); // false

他にも、「for文」や、

const arr = ['java', 'react', 'react', 'java', 'java', 'C#'];

let flg = false;

for (const c of arr) {
  if (c === 'react') {
    flg = true;
    break;
  }
}

console.log( flg ) // true

「indexof」を使用する方法があります。

let flg = arr.indexOf('react') >= 0;

console.log( flg );

パフォーマンスは「includes」が良さそうです。
※同じ処理を100万回実行した結果

実行回数:1000000回 関数名:some     実行時間:97.3(ms)
実行回数:1000000回 関数名:includes 実行時間:2.50(ms)
実行回数:1000000回 関数名:for      実行時間:14.2(ms)
実行回数:1000000回 関数名:indexOf  実行時間:15.6(ms)

二次元配列に使用

二次元配列には、使用しても期待する結果は得られません。

const arr = [ ["aaa","bbb"] , ["ccc","ddd"] ];

console.log( arr.includes("aaa") ); // false
console.log( arr.includes(["aaa","bbb"])); // false

二次元配列を、判定する場合は「some」を使用します。

const arr = [ ["aaa","bbb"] , ["ccc","ddd"] ];

console.log( arr.some(v => v.includes("aaa")) ); // true

オブジェクトの配列も同様です。

const arr = [ {name: 'tanaka', age: 30} , {name: 'suzuki', age: 50} ];

console.log( arr.includes( {name: 'tanaka', age: 30} )); // false

こちらも判定する場合は「some」を使用します。

const arr = [ {name: 'tanaka', age: 30} , {name: 'suzuki', age: 50} ];

console.log( arr.some( v => v.name === 'tanaka' && v.age === 30 )); // true

文字列に使用

「includes」は、文字列にも使用することが可能です。

const str = 'mebee';

console.log( str.includes('m') ); // true
console.log( str.includes('be') ); // true
console.log( str.includes('a') ); // false

サンプルコード

以下は、
「実行」ボタンをクリックすると、ランダムな3個の配列を生成して、
数字の「1」が生成した配列に含まれているかを確認する
サンプルコードとなります。

※cssには「bootstrap5」を使用してます。「bootstrap5」は、IEのサポートを終了してます。関数はアロー関数で記述しています。

アロー関数の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css">  
</head>

<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30px;
  }
</style>
<script> 

  const hoge = () => {

    // ランダムな3個の整数1桁の配列を生成
    const arr = Array(3).fill().map(x => ~~(Math.random()*10));
    // 生成した配列を表示
    disp(arr, "txt1");
    // 重複を削除したものを表示
    result.innerHTML = arr.includes(1) // document.getElementById('result');を省略

  }

  //フロントに表示する関数
  const disp = (arr, id) => {
    let text = [];
    // for ofを使用
    for (let item of arr) {
      text.push('<li class="list-group-item">' + item + '</li>');
    }
    //innerHTMLを使用して表示    
    document.getElementById(id).innerHTML = text.join('');
  }

  window.onload = () => {
    // クリックイベントを登録
    btn.onclick = () => { hoge() }; // document.getElementById('btn');を省略
  }

</script>

<body>
  <div class="main container">

    <h2><span id="result" class="badge bg-success">結果を表示</span></h2>

    <h2><span class="badge bg-success">ランダムな配列</span></h2>
    <ul id="txt1" class="list-group list-group-flush"></ul>

    <div class="row">
      <button id="btn" type="button" class="btn btn-warning">
        実行
      </button>
    </div>

  </div>

</body>

</html>

判定されていることが確認できます。