JavaScript配列のincludesメソッド入門

概要: このチュートリアルでは、配列に要素が含まれているかどうかを確認するJavaScript配列のincludes()メソッドを紹介します。

JavaScript配列のincludes()メソッド入門

配列を扱う場合、配列に要素が含まれているかどうかを確認したいことがよくあります。これを行うには、indexOf()メソッドを次のように使用します。

let numbers = [1,2,3];
if(numbers.indexOf(2) !== -1){
   // process here
}Code language: JavaScript (javascript)

indexOf()メソッドは、配列内で要素が最初に現れるインデックスを返します。配列に要素が含まれていない場合、indexOf()は-1を返します。

ご覧のとおり、indexOf()メソッドは、その意味を明確に示していません。さらに、indexOf()は厳密等価演算子（===）を使用して比較を行うため、次の例に示すように、NaNでは機能しません。

[NaN].indexOf(NaN); // -1Code language: JavaScript (javascript)

この例では、配列にはNaNの要素が1つ含まれています。しかし、indexOf(NaN)は-1を返します。

これを回避するために、開発者はヘルパー関数を作成しました。たとえば、Lodashは、値が配列に含まれているかどうかを確認する_.incudes()メソッドを提供しています。

ECMAScript 2016は、Array.prototype.includes()メソッドを提供することにより、この機能を標準化しました。

includes()メソッドは、配列に指定された要素が含まれている場合はtrueを返し、そうでない場合はfalseを返します。

以下は、includes()メソッドの構文を示しています。

array.includes(element,fromIndex);Code language: CSS (css)

includes()は2つの引数を受け取ります。

最初の引数は、検索対象のelementです。
fromIndexは、検索を開始する配列内の位置です。

次の例を参照してください。

[1,2,3].includes(2); // true
[1,2,3].includes(4); // false
[1,2,3].includes(1,1); // falseCode language: JavaScript (javascript)

indexOf()メソッドとは異なり、includes()メソッドはNaNで完全に正常に機能します。

[NaN].includes(NaN); // trueCode language: JavaScript (javascript)

次の例に示すように、includes()は+0と-0を区別しないことに注意してください。

[-0].includes(+0); // trueCode language: JavaScript (javascript)

次の例は、includes()メソッドを使用して、オブジェクトが配列に含まれているかどうかを確認する方法を示しています。

let bmw = {name: 'BMW' }, 
    toyota = { name: 'Toyota'},
    ford = {name: 'Ford'}

let cars = [ford, toyota];

console.log(cars.includes(ford)); // true
console.log(cars.includes(bmw)); // falseCode language: JavaScript (javascript)

この例では

まず、cars配列を2つのオブジェクト、fordとtoyotaで初期化しました。
次に、includes()メソッドを使用して、cars配列にfordオブジェクトが含まれているかどうかを確認しました。この場合はtrueが返されます。
最後に、bmwオブジェクトはcars配列に含まれていないため、includes()メソッドは期待どおりにtrueではなく`false`を返します。（原文に誤りがありました）

このチュートリアルでは、JavaScript配列のincludes()メソッドを使用して、配列に要素が含まれているかどうかを確認する方法を学びました。

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