JavaScriptで配列に値が含まれているかを確認する方法

概要：このチュートリアルでは、JavaScriptで配列に値が含まれているかどうかを確認する方法を学習します。

JavaScriptの値は、数値や文字列などのプリミティブ型である場合があります。または、オブジェクトである可能性もあります。

このチュートリアルでは、プリミティブ値またはオブジェクトであるかに関わらず、配列に値が含まれているかどうかを確認する方法を示します。

1) 配列に文字列が含まれているかを確認する

配列にプリミティブ値が含まれているかどうかを確認するには、array.includes()などの配列メソッドを使用できます。

次の例では、array.includes()メソッドを使用して、colors配列に'red'が含まれているかどうかを確認しています。

const colors = ['red', 'green', 'blue'];
const result = colors.includes('red');

console.log(result); // trueCode language: JavaScript (javascript)

大文字と小文字を区別せずに確認したい場合は、

まず、map()メソッドとtoLocaleLowerCase()メソッドを使用して、小文字の要素のみを含む新しい配列を返します。
次に、includes()メソッドを使用して確認します。

次の例は、これらの手順を示しています。

const colors = ['Red', 'GREEN', 'Blue'];
const result = colors.map(e => e.toLocaleLowerCase())
                     .includes('green');                          

console.log(result); // trueCode language: JavaScript (javascript)

この例では、colors配列には'green'は含まれていませんが、'GREEN'が含まれています。

まず、map()メソッドによってcolors配列のすべての要素が小文字に変換され、新しい配列が返されます。次に、includes()メソッドは、結果の配列に'green'が含まれているためtrueを返します。

2) 配列に数値が含まれているかを確認する

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

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

let result = ratings.includes(4); 
console.log(result); // true

result = ratings.includes(6); 
console.log(result); // falseCode language: JavaScript (javascript)

3) 配列にオブジェクトが含まれているかを確認する

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

const john = {
    'name': 'John Doe',
    'email': '[email protected]'
};
const jane = {
    'name': 'Jane Doe',
    'email': '[email protected]'
};

const list = [john, jane];
let result = list.includes(john);

console.log(result); // trueCode language: JavaScript (javascript)

この例では、list.includes(john)は、list配列にjohnオブジェクトの参照が含まれているためtrueを返します。

実際には、参照を検索する代わりに、プロパティ値でオブジェクトを検索することがよくあります。次の例は機能しません。

const list = [{
    'name': 'John Doe',
    'email': '[email protected]'
}, {
    'name': 'Jane Doe',
    'email': '[email protected]'
}];

let result = list.includes({
    'name': 'John Doe',
    'email': '[email protected]'
});

console.log(result); // falseCode language: JavaScript (javascript)

この例では、次のオブジェクト

{
    'name': 'John Doe',
    'email': '[email protected]'
}Code language: JavaScript (javascript)

…はlist配列の最初の要素のように見えます。しかし、includes()メソッドは、listに検索対象のオブジェクトへの参照が含まれていないためfalseを返します。

配列にオブジェクトが含まれているかどうかを確認するには、次の手順に従います。

最初に、プロパティによって2つのオブジェクトを比較するヘルパー関数を記述します。
次に、array.some()メソッドを使用して、プロパティ値で検索対象のオブジェクトを見つけます。

プロパティ値でオブジェクトを比較するには、次のヘルパー関数を使用します。

const isEqual = (first, second) => {
    return JSON.stringify(first) === JSON.stringify(second);
}Code language: JavaScript (javascript)

isEqual()関数は、firstとsecondのオブジェクトが、同じ値を持つ同じ数のプロパティを持っている場合にtrueを返します。

そして、isEqual()関数の制限は、比較対象のオブジェクトのプロパティの順序が同じでなければならないということです。

いくつかのライブラリは、プロパティ値で2つのオブジェクトを比較できる関数を提供することに注意してください。

たとえば、Lodashには_.isEqual()メソッドがあり、JSON.stringify()を使用する場合よりも優れたパフォーマンスでオブジェクトを比較できます。

以下は、array.some()メソッドを使用して、配列のすべての要素を検索対象のオブジェクトと照合する方法を示しています。

const result = list.some(e => isEqual(e, {
    'name': 'John Doe',
    'email': '[email protected]'
})); 

console.log(result); // trueCode language: JavaScript (javascript)

すべてをまとめる

const list = [{
    'name': 'John Doe',
    'email': '[email protected]'
}, {
    'name': 'Jane Doe',
    'email': '[email protected]'
}];

const isEqual = (first, second) => {
    return JSON.stringify(first) === JSON.stringify(second);
}

const result = list.some(e => isEqual(e, {
    'name': 'John Doe',
    'email': '[email protected]'
}));

console.log(result); // trueCode language: JavaScript (javascript)

まとめ

プリミティブ値の場合は、array.includes()メソッドを使用して、配列に値が含まれているかどうかを確認します。
オブジェクトの場合は、isEqual()ヘルパー関数を使用してオブジェクトを比較し、array.some()メソッドを使用して配列にオブジェクトが含まれているかどうかを確認します。

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