TypeScriptで配列操作をマスターしよう！includes、find、indexOf、some、filterを使いこなす

TypeScriptで配列に文字列が含まれているかどうかを確認する方法

includes メソッドは、配列内に指定された要素が存在するかどうかを調べ、存在する場合は true 、存在しない場合は false を返します。

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

const isAppleIncluded = fruits.includes("apple"); // true
const isGrapeIncluded = fruits.includes("grape"); // false

find メソッドは、配列内の要素を検索し、条件に一致する最初の要素を見つけた場合はその要素を返し、見つからなかった場合は undefined を返します。

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

const apple = fruits.find(fruit => fruit === "apple"); // { name: "apple" }
const grape = fruits.find(fruit => fruit === "grape"); // undefined

indexOf メソッドは、配列内の要素を検索し、見つかった場合はその要素のインデックスを返し、見つからなかった場合は -1 を返します。

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

const appleIndex = fruits.indexOf("apple"); // 0
const grapeIndex = fruits.indexOf("grape"); // -1

some メソッドは、配列内の要素をすべて検査し、条件に一致する要素が1つでも存在する場合は true 、存在しない場合は false を返します。

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

const hasCitrusFruit = fruits.some(fruit => fruit.includes("citrus")); // true
const hasGrapefruit = fruits.some(fruit => fruit.includes("grapefruit")); // false

filter メソッドは、配列内の要素をすべて検査し、条件に一致する要素を新しい配列として返します。

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

const citrusFruits = fruits.filter(fruit => fruit.includes("citrus")); // ["orange"]
const grapefruitFruits = fruits.filter(fruit => fruit.includes("grapefruit")); // []

どの方法を使うべきかは、状況によって異なります。以下の点を考慮して選ぶと良いでしょう。

• 処理速度: includes メソッドが最も高速です。
• 読みやすさ: find メソッドや indexOf メソッドの方が、コードが読みやすい場合があります。
• 柔軟性: some メソッドや filter メソッドは、より複雑な条件を指定することができます。

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

// includes メソッド
const isAppleIncluded = fruits.includes("apple");
console.log(isAppleIncluded); // true

// find メソッド
const apple = fruits.find(fruit => fruit === "apple");
console.log(apple); // { name: "apple" }

// indexOf メソッド
const appleIndex = fruits.indexOf("apple");
console.log(appleIndex); // 0

// some メソッド
const hasCitrusFruit = fruits.some(fruit => fruit.includes("citrus"));
console.log(hasCitrusFruit); // true

// filter メソッド
const citrusFruits = fruits.filter(fruit => fruit.includes("citrus"));
console.log(citrusFruits); // ["orange"]

このコードを実行すると、以下の結果が出力されます。

true
{ name: "apple" }
0
true
["orange"]

上記以外にも、さまざまな方法で配列に文字列が含まれているかどうかを確認することができます。詳細は、上記の参考資料を参照してください。

for ループを使って、配列内の要素を1つずつ検査することができます。

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

const isAppleIncluded = fruits.some(fruit => fruit === "apple");

for (const fruit of fruits) {
  if (fruit === "apple") {
    isAppleIncluded = true;
    break;
  }
}

console.log(isAppleIncluded); // true

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

const isAppleIncluded = fruits.reduce((acc, fruit) => {
  return acc || fruit === "apple";
}, false);

console.log(isAppleIncluded); // true

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

const isAppleIncluded = fruits.some(fruit => fruit === "apple");

console.log(isAppleIncluded); // true

• 柔軟性: ラムダ式は、より複雑な条件を指定することができます。