【JavaScript】includesとindexOfの違い

javascriptのincludesとindexOfの違いについて解説します。

includes()の挙動

includesは要素が含まれていたら ture
要素が含まれていなければ false を返します。

配列に指定した要素が含まれているか確認するには次のようにします。

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

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

テキストに指定した文字列が含まれているかどうかチェックすることもできます

const text = "This is a sample text.";

console.log(text.includes("sample"));  // true
console.log(text.includes("example")); // false

indexOf()の挙動

indexOf()メソッドは要素が含まれている場合は要素のインデックスを返します。
要素が含まれていなければ -1 を返します。

配列に対してindexOf()を使うには次のようにします。

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

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

テキストに対してindexOf()を使うには次のようにします。

const text = "This is a sample text.";

console.log(text.indexOf("sample"));   // 10
console.log(text.indexOf("example"));  // -1

indexOf()は要素が含まれていなければ-1を返すのでテキストに指定した文字列が含まれているかどうかチェックするのにも使えます。つまり「-1じゃなかったら」指定した文字列が含まれているということになります。

const text = "This is a sample text.";

if(text.indexOf('sample') != -1){
  console.log("含まれています");
}

まとめ

includesとindexOfはどちらも指定した要素または指定した文字列が含まれているかどうかチェックするのに使用することができます。

単純に要素が含まれているかどうかをチェックするだけならincludesを使うのが一般的です。ただどちらをつかってもよいと思います。