JavaScript 配列内の特定のオブジェクトを見つける方法

JavaScript 配列内の特定のオブジェクトを見つける方法

特定のオブジェクトの配列で特定のオブジェクトを見つけるという要件に出くわしたことがありますか?この投稿では、JavaScript 配列内の特定のオブジェクトを見つけるためのさまざまな方法について説明します。以下のリストに示すように配列があり、見つける必要があると仮定しましょう[...]

6min read

特定のオブジェクトの配列で特定のオブジェクトを見つけるという要件に出くわしたことがありますか?この投稿では、JavaScript 配列内の特定のオブジェクトを見つけるためのさまざまな方法について説明します。以下のリストに示すように配列があり、id が '4' のオブジェクトが存在するかどうかを見つける必要があると仮定します。

    var tasks = [
                { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
                { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
                { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
                { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
                { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
    ];

特定のオブジェクトを検索するには、Array プロトタイプの検索方法を使用します。これは、指定された条件の値を返しますが、それ以外の場合は 'undefined' を返します。これは、必須のコールバック関数とオプションのオブジェクトの 2 つのパラメーターを取り、コールバック関数内でthisの値として設定されます。

Array.prototype.find(callbackFunction[,thisArgs])
  1. コールバック関数は、特定の要素に対して指定された条件が真でなくなるまで、配列の各要素に対して呼び出されます。
  2. コールバック関数でthisの値となるオブジェクトはオプションのパラメータであり、渡されない場合、値はコールバック関数でundefinedに設定されます。

find メソッドのコールバック関数パラメータは、次の 3 つのパラメータを取ります。

  1. element: 配列内で処理されている現在の要素
  2. index: 処理中の現在の要素のインデックス
  3. array: find メソッドが呼び出されている配列
配列の find メソッドのコールバック関数のパラメーター

以下のリストに示すように、コールバック関数があるとします。現在の要素、要素のインデックス、および配列を出力します。

function CallbackFunctionToFindTaskById(element, index, array) {

        console.log(element);// print element being processed 
        console.log(index); // print index of the element being processed 
        console.log(array); // print the array on which find method is called 

    }

検索方法はどのように機能しますか?

  • JavaScript の find メソッドは、配列の各要素に対してコールバック関数を実行します。したがって、配列に 5 つの要素がある場合、コールバック関数は 5 回実行されます。
  • JavaScript の find メソッドは、特定の要素の真の基準を見つけると、コールバック関数の実行を中断します。
  • 指定された条件が要素に対して true の場合、JavaScript の find メソッドはその特定の要素を返し、残りの要素に対してはコールバック関数を実行しません。
  • 条件がどの要素に対しても真でない場合、JavaScript の find メソッドは undefined を返します。
  • JavaScript の find メソッドは、設定されていないインデックスや削除されたインデックスのコールバック関数を実行しません。
  • JavaScript の find メソッドは、常に 3 つの引数 (element、index、array) でコールバック関数を実行します。

findメソッドの使用例をいくつか見てみましょう。

固定条件でオブジェクトを見つける

以下のリストに示すように、タスク配列があります。

var tasks = [
             { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
             { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
             { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
             { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
             { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
];

id が '4' のオブジェクトを検索します。これは、以下のリストに示すように行うことができます。

function CallbackFunctionToFindTaskById(task) {
   return task.Id === '4';
}

var task = tasks.find(CallbackFunctionToFindTaskById);
console.log(JSON.stringify(task));

上記のリストでは、タスク配列のfindメソッドでコールバック関数CallbackFunctionToFindTaskByIdを渡しています。 常に、コールバック関数の最初のパラメーターは要素パラメーターを表します。ここでは、タスクはコールバック関数内の要素を表しています。したがって、タスクは現在処理中の要素を表します。

コールバック関数では、現在のタスクのIDを確認し、それが4に等しい場合はタスクを返します。 このシナリオでは、条件はコールバック関数内で固定されています。

コールバック関数で渡された条件でオブジェクトを検索する

前の例では、id が '4' のオブジェクトを返す固定条件がありました。ただし、コールバック関数を呼び出すときに基準を渡したいという要件がある場合があります。コールバック関数で this の値としてオブジェクトを渡すことができます。次のリストに示すように、同じタスク配列をもう一度考えてみましょう

var tasks = [
         { 'Id': '1', 'Title': 'Go to Market 99', 'Status': 'done' },
         { 'Id': '2', 'Title': 'Email to manager', 'Status': 'pending' },
         { 'Id': '3', 'Title': 'Push code to GitHub', 'Status': 'done' },
         { 'Id': '4', 'Title': 'Go for running', 'Status': 'done' },
         { 'Id': '5', 'Title': 'Go to movie', 'Status': 'pending' },
];

次に、以下のリストに示すように、コールバック関数 FindTaskById を作成しましょう。

function FindTaskById(task) {        
   console.log(this);
}

お気づきのように、コールバック関数内に "this" の値を出力しています。次に、次のリストに示すように、タスク配列の find メソッドで FindByTask コールバック関数を渡します。

var task = tasks.find(FindTaskById,['4','67']);

この場合、この内部コールバック関数の値は、4 と 67 の 2 つの値を持つオブジェクトに設定されています。コンソールでは、次のように出力が表示されます。

タスク配列には 5 つの要素があるため、この値は 5 回出力されます。Id が 4 に設定されたオブジェクトを返すには、以下のリストに示すようにコールバック関数を変更する必要があります

   function FindTaskById(task) {

        if (task.Id === this[0]) {
            return task;
        }
    }

    var task = tasks.find(FindTaskById, ['4', '67']);
    console.log(JSON.stringify(task));

コールバック関数では、最初のプロパティを 4 に設定して、このオブジェクトの値を渡しています。したがって、タスクかどうかを確認します。id が this[0] と等しいかどうかは、id が 4 のオブジェクトを返します。

結論

この投稿では、JavaScript の Array find メソッドと、コールバック関数のさまざまなオプションについて学びました。findメソッドをよりよく理解することは、より生産的なJavaScript開発者になるために不可欠であり、楽しんで読んでいただけたでしょうか。

操作方法
デモを予約