TypeScript配列検索方法解説
TypeScriptで配列アイテムを見つける方法 (モダンで簡単な方法)
TypeScriptでは、配列内の要素を検索するさまざまな方法があります。ここでは、その中でも最もシンプルでモダンな方法を解説します。
Array.prototype.find()メソッド
find()
メソッドは、配列内の要素を一つずつテストし、条件を満たす最初の要素を返します。
基本的な使い方
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find(number => number === 3);
console.log(foundNumber); // Output: 3
解説
- 戻り値は、条件を満たす最初の要素です。見つからない場合は
undefined
を返します。 find()
メソッドに渡すコールバック関数では、要素を評価するロジックを記述します。
findIndex()
メソッドは、find()
メソッドと似ていますが、条件を満たす最初の要素のインデックスを返します。
const fruits = ['apple', 'banana', 'orange'];
const foundIndex = fruits.findIndex(fruit => fruit === 'banana');
console.log(foundIndex); // Output: 1
- インデックスが見つからない場合は
-1
を返します。 findIndex()
メソッドは、条件を満たす最初の要素のインデックスを返します。
filter()
メソッドは、条件を満たすすべての要素を新しい配列として返します。
const evenNumbers = [1, 2, 3, 4, 5].filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
- 複数の要素が見つかる場合も、すべてを新しい配列に収めます。
Array.prototype.includes()メソッド (単純な存在チェック)
includes()
メソッドは、配列に特定の要素が含まれているかどうかを単純にチェックします。
const colors = ['red', 'green', 'blue'];
const isIncluded = colors.includes('yellow');
console.log(isIncluded); // Output: false
- 厳密な比較を行います。
includes()
メソッドは、要素が存在すればtrue
、存在しなければfalse
を返します。
TypeScript配列検索方法解説 (コード例付き)
コード例
const numbers = [1, 2, 3, 4, 5];
const foundNumber = numbers.find(number => number === 3);
console.log(foundNumber); // Output: 3
- コールバック関数で要素を評価し、条件を満たす場合はその要素を返します。
const fruits = ['apple', 'banana', 'orange'];
const foundIndex = fruits.findIndex(fruit => fruit === 'banana');
console.log(foundIndex); // Output: 1
const evenNumbers = [1, 2, 3, 4, 5].filter(number => number % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]
const colors = ['red', 'green', 'blue'];
const isIncluded = colors.includes('yellow');
console.log(isIncluded); // Output: false
- 存在すれば
true
、存在しなければfalse
を返します。
TypeScript配列検索の代替方法
TypeScriptでは、配列内の要素を検索するさまざまな方法があります。ここでは、これまで紹介した方法の代替となるアプローチや、特定の状況に適した手法を解説します。
for...ofループ
const numbers = [1, 2, 3, 4, 5];
for (const number of numbers) {
if (number === 3) {
console.log('Found:', number);
break;
}
}
- 条件を満たす要素が見つかった場合は、ループを中断することができます。
for...of
ループは、配列の要素を直接イテレートします。
forEach()メソッド
const fruits = ['apple', 'banana', 'orange'];
fruits.forEach((fruit, index) => {
if (fruit === 'banana') {
console.log('Found at index:', index);
}
});
- インデックスも取得できるため、要素の位置を特定する際に便利です。
forEach()
メソッドは、配列の要素を一つずつ処理します。
reduce()メソッド (特定の値を計算する場合)
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log('Sum:', sum);
- ここでは、配列の要素の合計を計算しています。
reduce()
メソッドは、配列の要素を一つずつ処理して、最終的な値を計算します。
some()メソッド (存在チェック)
const colors = ['red', 'green', 'blue'];
const isIncluded = colors.some(color => color === 'yellow');
console.log('Is included:', isIncluded);
some()
メソッドは、配列に条件を満たす要素が存在するかどうかをチェックします。
every()メソッド (すべての要素が条件を満たすか)
const numbers = [2, 4, 6, 8];
const areAllEven = numbers.every(number => number % 2 === 0);
console.log('Are all even:', areAllEven);
- すべての要素が条件を満たせば
true
、そうでなければfalse
を返します。 every()
メソッドは、配列のすべての要素が条件を満たすかどうかをチェックします。
typescript