こんにちは、ryohei（@ityryohei）です！

本記事では、JavaScriptで配列に特定の文字列が含まれるか検索する方法をいくつかご紹介してます。

JavaScriptで配列を扱う際に、配列内にある要素を検索することは多いかと思います。よく使用するメソッドをまとめましたので、実装時に参考にしていただければと幸いです！

indexOf()

indexOfメソッドは、引数に与えられた要素と「同じ要素」が配列内に存在するかを前方から検索し、trueであればインデックス番号を、falseであれば-1を返します。

注意点としては、同じ要素が配列内に存在するかを確認するという点です。いくつかの方法で検索結果を検証してみます。

1. 同じ要素を指定した場合

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern  'tanaka';
arr.indexOf(pattern);

//result 0;

2. 大文字で指定した場合

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern  'Tanaka';
arr.indexOf(pattern);

//result -1;

3. 部分的に指定した場合

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern  'tana';
arr.indexOf(pattern);

//result -1;

4. 正規表現で指定した場合

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern  '/na/';
arr.indexOf(pattern);

//result -1;

検証結果

  • 大文字・小文字は区別される
  • 正規表現は使えない
  • 完全一致した場合のみ「true」を返す
Array.prototype.indexOf() – JavaScript | MDN

lastIndexOf()

lastIndexOfメソッドは、引数に与えられた要素と「同じ要素」が配列内に存在するかを後方から検索し、trueであればインデックス番号を、falseであれば-1を返します。

注意点としては、indexOfメソッドと同様に同じ要素が配列内に存在するかを確認するという点です。いくつかの方法で検索結果を検証してみます。

1. 同じ要素を指定した場合

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern  'tanaka';
arr.lastIndexOf(pattern);

//result 4;

2. 大文字で指定した場合

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern  'Tanaka';
arr.lastIndexOf(pattern);

//result -1;

3. 部分的に指定した場合

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern  'tana';
arr.lastIndexOf(pattern);

//result -1;

4. 正規表現で指定した場合

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern  '/na/';
arr.lastIndexOf(pattern);

//result -1;

検証結果

  • 大文字・小文字は区別される
  • 正規表現は使えない
  • 完全一致した場合のみ「true」を返す
Array.prototype.lastIndexOf() – JavaScript | MDN

every()[ECMA2015~]

everyメソッドは、引数に指定されたコールバック関数のテストを実施し、配列内の全要素が条件を満たした場合はtrueを、１つでも満たさない要素があればfalseを返します。

下記の配列を使っていくつかサンプルを作って検証してみます。

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

すべてが0より大きい値であれば

arr.every(value => value > 0);

//result true;

すべてが3未満の値であれば

arr.every(value => value < 3);

//result false;

また、引数のコールバックには直接関数を指定することができます。

関数指定

function check(value) {
    return value > 0;
}

const arr = [1, 2, 3, 4, 5];
arr.every(check);

//result true;

無名関数

arr.every(
    function(value){
        return value > 0;
    }
);

//result true;
Array.prototype.every() – JavaScript | MDN

some()[ECMA2015~]

someメソッドは、引数に指定されたコールバック関数のテストを実施し、配列内の１つでも条件を満たした場合はtrueを、すべて満たさない場合はfalseを返します。

例えば、下記のような配列があるとします。

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

someメソッドで配列が持っている要素に「3」という要素があるかを検索すると、

arr.some(value => value === 3);

//result true;

存在する要素なのでtrueが返ります。

もし存在しない要素をsomeメソッドの引数に指定すると、

const arr = [1, 2, 3, 4, 5];
arr.some(value => value === 0);

//result false;

存在しないためfalseが返ります。

Array.prototype.some() – JavaScript | MDN

find()[ECMA2015~]

findメソッドは、テスト関数の結果を満たす要素が配列内にあるかを検索し、存在した場合は最初に出現した要素を、存在しなければundefinedを返します。もし、テスト関数を満たす要素が複数存在しても最初に出現した要素だけを返します。

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
arr.find(element => element === 'tanaka');

//result 'tanaka';
Array.prototype.find() – JavaScript | MDN

findIndex()[ECMA2015~]

findIndexメソッドは、テスト関数の結果を満たす要素が配列内にあるかを検索し、存在した場合は最初に出現した要素のインデックスを、存在しなければundefinedを返します。もし、テスト関数を満たす要素が複数存在した場合は最初に出現した要素のインデックスだけを返します。

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
arr.find(element => element === 'tanaka');

//result 0;
Array.prototype.findIndex() – JavaScript | MDN

includes()[ECMA2016~]

includesメソッドは、配列内に指定した値が存在する場合はtrueを、存在しなければfalseを返します。IEには対応していませんので、使用される場合は要件を確認しておきましょう。

var arr = ['tanaka', 'yamada', 'sato', 'suzuki', 'tanaka'];
var pattern = 'sato';
arr.includes(pattern);

//result true;
Array.prototype.includes() – JavaScript | MDN

最後に

いかがでしたでしょか。

配列の文字列を検索するメソッドは数多く用意されています。配列内の要素の部分一致については、現状はループで回して正規表現で確認する方法が有効なようです。

Arrayに付随するプロパティやメソッドは下記のページにまとめられていますので、詰まったときに眺めてみると解決の糸口が見えるかもしれません！

Array – JavaScript | MDN

以上、JavaScriptで配列に特定の文字列が含まれるか検索する方法のご紹介でした！