[TypeScript] 便利な関数(find)の使い方

typescript-find
INDEX

はじめに

配列の各要素に対して指定された条件に一致する最初の要素を返すfind 関数を学びました!
その結果を執筆しました。

結論

配列の各要素に対して指定された条件に一致する最初の要素を返すメソッド

※要素が存在しない場合はundefinedを返します。
しかし、文末に?? 任意の値を記述すると任意の値を返す事が出来る
const hoge = list.find((各要素) => 条件式);

メリット

  1. for ループなどを使用する場合よりも、シンプルなコードを書くことができます
  2. 要素が見つからなかった場合は undefined を返すため、エラー処理が簡単に行えます。
  3. 配列内の要素が多数ある場合でも、検索が高速に行えます。

使い方

1. find()で条件を満たす

// 数字の配列
const numbers = [1, 2, 3, 4, 5];
// 2より大きい値を取得する(最初にヒットした値を取得する)
const result = numbers.find((i) => i > 2);

// 期待値: 3
console.log(result);
出力結果を確認します。
3

2. find()で条件を満たさない

// 数字の配列
const numbers = [1, 2, 3, 4, 5];
// 10より大きい値を取得する
const result = numbers.find((i) => i > 10);

// 期待値: undefined
console.log(result);
出力結果を確認します。
undefined

3. find()で条件を満たさないかつ undefined を返さない

// 数字の配列
const numbers = [1, 2, 3, 4, 5];
// 10より大きい値を取得する
const result = numbers.find((i) => i > 10) ?? false;

// 期待値: false
console.log(result);
出力結果を確認します。
false
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

Born in 1994
Engineer's career is from 2020.10
Skill: Next.js, TypeScript, Django, Python, HTML, CSS

INDEX