【徹底解説】JavaScriptで配列に値が含まれているかどうかを確認する方法！メリット・デメリットと使い分け
JavaScriptで配列に値が含まれているかどうかを確認する方法
includes() メソッドを使う
概要:
includes() メソッドは、配列内に指定された値が存在するかどうかを調べ、存在する場合は true 、存在しない場合は false を返します。
例:
const fruits = ["apple", "banana", "orange"];
// "banana" が存在するかどうかを確認
const isBananaIncluded = fruits.includes("banana");
console.log(isBananaIncluded); // true
メリット:
- シンプルで分かりやすい
- 配列内の要素の順序を考慮しない
- 比較的新しいメソッドなので、多くのブラウザでサポートされている
- 古いブラウザではサポートされていない
使い分け:
シンプルで分かりやすい方法を探している場合、includes() メソッドを使うのがおすすめです。
some() メソッドを使う
some() メソッドは、配列内の要素を一つずつ検査し、条件に合致する要素が存在するかどうかを調べます。条件に合致する要素が存在する場合は true 、存在しない場合は false を返します。
const fruits = ["apple", "banana", "orange"];
// 価格が 100 円以上の商品が存在するかどうかを確認
const isExpensiveFruitExists = fruits.some((fruit) => fruit.price >= 100);
console.log(isExpensiveFruitExists); // false
- 配列内の要素に対して、条件を指定して検索できる
includes()メソッドよりも複雑
配列内の要素に対して、条件を指定して検索したい場合、some() メソッドを使うのがおすすめです。
find() メソッドを使う
find() メソッドは、配列内の要素を一つずつ検査し、条件に合致する最初の要素を見つけます。条件に合致する要素が見つかった場合はその要素を返し、見つからなかった場合は undefined を返します。
const fruits = ["apple", "banana", "orange"];
// 価格が 100 円以上の最初の商品を見つける
const expensiveFruit = fruits.find((fruit) => fruit.price >= 100);
console.log(expensiveFruit); // undefined
- 条件に合致する要素が複数存在する場合、最初の要素しか見つけられない
上記で紹介した3つの方法は、それぞれ異なるメリット・デメリットがあります。状況に応じて適切な方法を選択してください。
サンプルコード 1: includes() メソッドを使う
const fruits = ["apple", "banana", "orange"];
// "banana" が存在するかどうかを確認
const isBananaIncluded = fruits.includes("banana");
console.log(isBananaIncluded); // true
サンプルコード 2: some() メソッドを使う
const fruits = [
{ name: "apple", price: 100 },
{ name: "banana", price: 200 },
{ name: "orange", price: 300 },
];
// 価格が 100 円以上の商品が存在するかどうかを確認
const isExpensiveFruitExists = fruits.some((fruit) => fruit.price >= 100);
console.log(isExpensiveFruitExists); // true
サンプルコード 3: find() メソッドを使う
const fruits = [
{ name: "apple", price: 100 },
{ name: "banana", price: 200 },
{ name: "orange", price: 300 },
];
// 価格が 100 円以上の最初の商品を見つける
const expensiveFruit = fruits.find((fruit) => fruit.price >= 100);
console.log(expensiveFruit); // { name: "apple", price: 100 }
indexOf()メソッド: 配列内の指定された値のインデックスを返します。
これらの方法は、includes() メソッドよりも古く、多くのブラウザでサポートされています。ただし、includes() メソッドよりも冗長なコードになるため、現在はあまり使用されていません。
JavaScriptで配列に値が含まれているかどうかを確認するには、いくつかの方法があります。状況に応じて適切な方法を選択してください。
JavaScriptで配列に値が含まれているかどうかを確認するその他の方法
indexOf() メソッドを使う
indexOf() メソッドは、配列内の指定された値の最初のインデックスを返します。値が見つからない場合は -1 を返します。
const fruits = ["apple", "banana", "orange"];
// "banana" のインデックスを取得
const indexOfBanana = fruits.indexOf("banana");
console.log(indexOfBanana); // 1
- 値が見つからなかった場合、
-1を返すため、真偽値で判定する必要がある
古いブラウザで動作させる必要がある場合、indexOf() メソッドを使うのがおすすめです。
lastIndexOf() メソッドを使う
const fruits = ["apple", "banana", "banana"];
// "banana" の最後のインデックスを取得
const lastIndexOfBanana = fruits.lastIndexOf("banana");
console.log(lastIndexOfBanana); // 2
配列内に同じ値が複数存在する場合、最後のインデックスを取得したいときに lastIndexOf() メソッドを使うのがおすすめです。
for ループを使う
for ループを使って、配列内の要素を一つずつ検査し、指定された値と一致するかどうかを確認することができます。
const fruits = ["apple", "banana", "orange"];
// "banana" が存在するかどうかを確認
let isBananaIncluded = false;
for (const fruit of fruits) {
if (fruit === "banana") {
isBananaIncluded = true;
break;
}
}
console.log(isBananaIncluded); // true
- どのブラウザでも動作する
- 他の方法よりも冗長なコードになる
シンプルな方法で実装したい場合、for ループを使うのがおすすめです。
while ループを使う
const fruits = ["apple", "banana", "orange"];
// "banana" が存在するかどうかを確認
let isBananaIncluded = false;
let i = 0;
while (i < fruits.length && !isBananaIncluded) {
if (fruits[i] === "banana") {
isBananaIncluded = true;
}
i++;
}
console.log(isBananaIncluded); // true
javascript arrays algorithm
