配列処理(findメソッド) - 駆け足エンジニアの記録

はじめに

今回の記事は配列の便利メソッドの一つfindメソッドについてTypeScriptのコードで以下記事を書いていきます。

findメソッドの基本

find内コールパック関数の引数は、mapメソッド同様最大３つの引数を設定できます。
第１引数は、配列の一つ一つの要素。第２引数は、index(０からの添字)。第３引数は配列自体。第2,３引数はめったに使われないと思います。

またfindメソッドの役割としては、与えた条件に適応する最初の要素を返すことにあります。(条件に合わなければundefinedを返す)
以下コードで確認しましょう。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result1 = arr.find((value) => value > 4);
const result2 = arr.find((value) => value === 4);
console.log(result1);//5
console.log(result2);//4

findメソッドを用いた例題

①以下の連想配列(users)の中から、管理者権限(admin)を持っている(true)ユーザーを探し、そのユーザーをadminという変数に格納しなさい。

type Users = {
  id: number;
  admin: Boolean;
}[];

const users: Users = [
  { id: 1, admin: false },
  { id: 2, admin: true },
  { id: 3, admin: false },
  { id: 4, admin: true },
  
];

解答

const admin = users.find(({ admin }) => admin);

該当する項目が複数ある場合でも、先頭から探して最初に見つけたものだけが返る点に注意して下さい。全て欲しい場合は filterメソッドを使います。
配列処理(filterメソッド) - 駆け足エンジニアの記録

②次の連想配列(member)の中から,田中さんのオブジェクトを抽出するfindTanakaという関数を作成しなさい。

type Members = {
  name: string;
  age: number;
  sex: "male" | "female";
}[];

const members: Members = [
  { name: "松井", age: 39, sex: "male" },
  { name: "今田", age: 34, sex: "female" },
  { name: "鈴木", age: 24, sex: "male" },
  { name: "山田", age: 56, sex: "male" },
  { name: "田中", age: 89, sex: "female" },
];

解答

const findTanaka = (array: Members) => {
  return array.find(({ name }) => name === "田中");
};
console.log(findTanaka(members));

findIndexメソッド

findメソッドから派生したものとしてfindIndexメソッドというものがあります。
findIndexメソッドの役割は、与えた条件に適合した最初の要素のインデックスを返すことにあります。(条件に合わなければ-1を返す)

以下のコードで確認しましょう。

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const result = arr.findIndex((num) => num === 4);
console.log(result); //3

このような用途であればindexOfで書き換え可能です。

const result1 = arr.indexOf(4);
console.log(result1); //3

ただしindexOfメソッドは引数に配列の要素しか代入できないため用途が限られます。
findIndexメソッドであれば引数がコールバック関数のため比較演算子などを用いて要素のインデックスを返すことができるため,(配列処理においては)findIndexメソッドはindexOfメソッドの上位互換といえます。

const result = arr.findIndex((num) => num > 4);
console.log(result); //4

最後に連想配列についてfindIndexメソッドを利用した配列処理をコードで確認しましょう。

type Members = {
  name: string;
  age: number;
  sex: "male" | "female";
}[];

const members: Members = [
  { name: "松井", age: 39, sex: "male" },
  { name: "今田", age: 34, sex: "female" },
  { name: "鈴木", age: 24, sex: "male" },
  { name: "山田", age: 56, sex: "male" },
  { name: "田中", age: 89, sex: "female" },
];

const index2 = members.findIndex(({ name }) => name === "鈴木");
console.log(index2); //2