【JavaScript】findメソッドの使い方 | 配列から特定の値を取得する方法

こんにちは、フロントエンドエンジニアのまさにょんです。

今回は、JavaScriptの配列メソッドである findメソッドについて解説して行きます。

findメソッドに名前の似ている、findIndexメソッドについては以前に解説しています。

興味がある方は、ぜひCheckしてみてください！

【JavaScript入門】indexOf()とfindIndex()の違いは？ | 配列のindex検索

【 indexOf()とfindIndex()の違いは？ | 配列のindex検索】

1 Array.prototype.find() の使い方
2 【応用技】map() & find()でObject-Arrayの加工処理
3 JavaScript書籍 Ver. 中級-上級者向け
4 JavaScript書籍 Ver. 初級者向け
5 参考・引用
6 最近の投稿

Array.prototype.find() の使い方

Array.prototype.find() は、引数のCallBackFunction内の条件文に合致するTarget-Array内の最初の要素(firstFindValue)を返却してくれます。

find() メソッドは、提供されたテスト関数を満たす配列内の最初の要素を返します。
テスト関数を満たす値がない場合は、 undefined を返します。
引用元： MDN: Array.prototype.find()

MDNを元に、findメソッドの基本的な機能をまとめると次のようなものになります。

Array.prototype.find() – 基本的な使い方

構文: const firstFindValue = array.filter((element, index, arr)=> {・・・ 処理文 ・・・});

引数: CallBackFunction: array の各要素に対して実行する関数です。
この関数は、次の3つの引数を持ちます

1. element: 現在処理中の要素の値(CurrentValue)です。
2. index (省略可): 配列内の CurrentValue の index-番号です。
3. arr (省略可): find() を呼び出した元の配列です。

実行結果(返り値): CallBackFunction の条件を満たす最初の要素(firstFindValue)です。 見つからなかった場合は undefined を返します。

// < Array.prototype.find() >
const prototypeRobo = [ '白桃', 'ロボ玉試作1号機', 'ももちゃん', 'ロボ玉試作2号機' ];

// 1. find() & 正規表現で「ロボ玉」に一致する最初の値を取得する！
const firstFindrobotama = prototypeRobo.find(val => (/^ロボ玉/.test(val)));
console.log({firstFindrobotama});
// {firstFindrobotama: 'ロボ玉試作1号機'}

【応用技】map() & find()でObject-Arrayの加工処理

より実践的なArray.prototype.find() と Array.prototype.map() を組み合わせたObject-Arrayの加工処理を見ていきましょう。

Sample-Codeでは、既存の「projectList」と「userList」から Project を管理する UserList である「manageUserNameList」を作っていきます。

まずは「projectList」に対して、Array.prototype.map() を使って、中身のObjectを1つずつ取り出します。

そして、Array.prototype.find() で「userList」の id と「projectList」の manage_user_id が一致する Data を取得して、その id に Accessしています。

このようにArray.prototype.find() を使って、発見した要素にそのままAccessしてDataを取得しているのがPointです。

// < find を使って、発見した要素にそのまま Accessする！ >

const projectList = [
    { id: 1, value: 'ロボ玉試作1号機', group_name: 'ロボ玉組', manage_user_id: 1 },
    { id: 2, value: '白桃', group_name: null, manage_user_id: 2 },
    { id: 3, value: 'ロボ玉試作2号機', group_name: 'ロボ玉組', manage_user_id: 5 },
    { id: 4, value: 'ももちゃん', group_name: 'ロボ玉組', manage_user_id: 3 },
    { id: 5, value: 'ロボ玉試作3号機', group_name: null, manage_user_id: 4 },
];

const userList = [
    { id: 1, name: 'まさにょん', from: 'グンマー帝国', like: 'サーモン', age: 26 },
    { id: 2, name: 'マリにょん', from: 'ドイツ', like: 'チーズ', age: 28 },
    { id: 3, name: '玉次郎', from: 'アメリカ合衆国', like: 'ひまたね', age: 2 },
    { id: 4, name: 'きのぴー', from: '桐生', like: '銀だこ', age: 100 },
    { id: 5, name: 'ロボ玉', from: 'グンマー帝国', like: 'ひまたね', age: 1 },
];

// 1. Project を管理する UserList を作成する！
const manageUserNameList = projectList.map(project => {

    // 2. find() で、userList の id と projectList の manage_user_id が一致する Data を取得して、その id に Accessしている！
    const manage_user_id = userList.find(user => user.id === project.manage_user_id)?.id ?? '';
    const manage_user = userList.find(user => user.id === project.manage_user_id)?.name ?? '';
    return { id: manage_user_id, name: manage_user};
});

console.log({manageUserNameList});
// < 出力結果 >
// manageUserNameList: Array(5)
    // 0: {id: 1, name: 'まさにょん'}
    // 1: {id: 2, name: 'マリにょん'}
    // 2: {id: 5, name: 'ロボ玉'}
    // 3: {id: 3, name: '玉次郎'}
    // 4: {id: 4, name: 'きのぴー'}
    // length: 5