includes vs some vs find vs indexOf vs forEach：どれを使うべき？
2024-04-02
JavaScript 配列で特定の値が含まれているかどうかを判断する方法
includes() メソッドは、配列が指定した要素を含んでいるかどうかを判定します。最も簡潔で分かりやすい方法です。
const fruits = ["apple", "banana", "cherry"];
// "banana" が含まれているか確認
console.log(fruits.includes("banana")); // true
// "grape" が含まれているか確認
console.log(fruits.includes("grape")); // false
some() メソッドは、配列の要素全てに条件関数を適用し、その結果に真偽値を返します。
const numbers = [1, 2, 3, 4, 5];
// 3 より大きい要素が存在するか確認
console.log(numbers.some(num => num > 3)); // true
// 偶数要素が存在するか確認
console.log(numbers.some(num => num % 2 === 0)); // true
find() メソッドは、条件に合致する最初の要素を返します。
const persons = [
{ name: "John", age: 30 },
{ name: "Mary", age: 25 },
{ name: "Bob", age: 40 },
];
// 年齢が 30 歳の人の名前を取得
const person = persons.find(person => person.age === 30);
console.log(person.name); // John
// 年齢が 50 歳以上の人の名前を取得 (存在しない場合は undefined)
const person = persons.find(person => person.age >= 50);
console.log(person); // undefined
indexOf() メソッドは、指定した要素の最初の出現位置を返します。要素が見つからない場合は -1 が返されます。
const colors = ["red", "green", "blue", "yellow"];
// "green" の最初の出現位置を取得
const index = colors.indexOf("green");
console.log(index); // 1
// "purple" の最初の出現位置を取得 (存在しない場合は -1)
const index = colors.indexOf("purple");
console.log(index); // -1
forEach() メソッドは、配列の要素全てに対して処理を実行します。
const animals = ["dog", "cat", "mouse", "rabbit"];
// "cat" が含まれているか確認
let isCatIncluded = false;
animals.forEach(animal => {
if (animal === "cat") {
isCatIncluded = true;
}
});
console.log(isCatIncluded); // true
これらの方法の中から、状況に応じて適切な方法を選択してください。
JavaScriptで配列に特定の値が含まれているかどうかを判断するには、様々な方法があります。それぞれの特徴を理解し、使い分けましょう。
includes() メソッド
const fruits = ["apple", "banana", "cherry"];
// "banana" が含まれているか確認
console.log(fruits.includes("banana")); // true
// "grape" が含まれているか確認
console.log(fruits.includes("grape")); // false
some() メソッド
const numbers = [1, 2, 3, 4, 5];
// 3 より大きい要素が存在するか確認
console.log(numbers.some(num => num > 3)); // true
// 偶数要素が存在するか確認
console.log(numbers.some(num => num % 2 === 0)); // true
find() メソッド
const persons = [
{ name: "John", age: 30 },
{ name: "Mary", age: 25 },
{ name: "Bob", age: 40 },
];
// 年齢が 30 歳の人の名前を取得
const person = persons.find(person => person.age === 30);
console.log(person.name); // John
// 年齢が 50 歳以上の人の名前を取得 (存在しない場合は undefined)
const person = persons.find(person => person.age >= 50);
console.log(person); // undefined
indexOf() メソッド
const colors = ["red", "green", "blue", "yellow"];
// "green" の最初の出現位置を取得
const index = colors.indexOf("green");
console.log(index); // 1
// "purple" の最初の出現位置を取得 (存在しない場合は -1)
const index = colors.indexOf("purple");
console.log(index); // -1
forEach() メソッド
const animals = ["dog", "cat", "mouse", "rabbit"];
// "cat" が含まれているか確認
let isCatIncluded = false;
animals.forEach(animal => {
if (animal === "cat") {
isCatIncluded = true;
}
});
console.log(isCatIncluded); // true
some() メソッドと && 演算子
const numbers = [1, 2, 3, 4, 5];
// 3 より大きい要素が存在するか確認
console.log(numbers.some(num => num > 3) && numbers.some(num => num % 2 === 0)); // true
filter() メソッド
const fruits = ["apple", "banana", "cherry"];
// "banana" と "cherry" が含まれているか確認
const filteredFruits = fruits.filter(fruit => fruit === "banana" || fruit === "cherry");
console.log(filteredFruits.length === 2); // true
reduce() メソッド
const numbers = [1, 2, 3, 4, 5];
// 3 より大きい要素が存在するか確認
console.log(numbers.reduce((acc, num) => acc || num > 3, false)); // true
これらの方法は、上記の5つの方法よりも複雑ですが、より柔軟な条件を設定することができます。
javascript arrays contains
