関数・メソッド

【JavaScript】配列の値を後ろから検索する方法

更新日：2023/06/21

JavaScriptには配列内で条件に一致する値を先頭から検索して返すfind()と、そのインデックスを返すfindIndex()があります。
ECMAScript2023で、この二つの関数の後方検索版としてfindLast()とfindLastIndex()が追加されました。
今回は、この二つの関数についてお伝えします。

 

findLast()とfindLastIndex()の構文

findLast()は配列を後ろから検索して、条件に合う値を返します。
findLastIndex()は、値ではなくてインデックス番号を返します。

それぞれ、次のような構文で定義されています。

Array.prototype.findLast ( predicate [ , thisArg ] )
Array.prototype.findLastIndex ( predicate [ , thisArg ] )

どちらも受け付ける引数の数と内容は同じです。

  • predicate

    配列の値を受け取って条件判定するコールバック関数です。
    このコールバック関数は、次の形式で引数を受け取ります。

    function predicate( 判定する値 , 値のインデックス , 対象の配列 )

    コールバック関数が偽と判断できる値（false,null,undefined,0,NaN,""）ではないとき、処理を終了して現在の値またはインデックスを返します。

  • thisArg
    省略可能です。
    コールバック関数に、this値として渡されます

    thisArgを使用するときは、コールバック関数をfunctionキーワードを使って定義する必要があります。
    ※アロー関数は、thisを持っていないため

 

使用例

findLast()とfindLastIndex()の使用例をいくつか紹介します。

ある値以上の値を後ろから検索する

100以上の値を後ろから検索します。

const ary = [2,1,200,3,101,50,70];
console.log( ary2.findLast( e=> e >=100 ) ); // 結果: 101

最後の文字列を検索する

数値や文字列などが混在する配列から、最後の文字列を検索します。

const ary = [1,"hello",10,"abc",3];

console.log( ary.findLast( e=>typeof e === "string" ) ); // 結果: abc

後ろから合計してある値以上になるインデックスを検索する

後ろから合計して200以上になる位置を求めます。

const ary = [2,1,200,3,101,50,70];
console.log( ary.findLastIndex( 
    function(e){
        this.sum += e;
        return this.sum >= 200;
    }, {sum:0} ) );  // 結果: 4

findLastIndex()の２番目の引数thisArgを、合計を保持するための一時的なオブジェクトとして使用しています。

検索条件を動的に変更する

コールバック内の検索条件を、thisArgを使って動的に変更します。

const predicate = function(e){
     return this.min <= e && this.max >= e;
};

const ary = [2,1,200,3,101,50,70];
console.log( ary2.findLast( predicate , {min:30 , max:60} ) );  // 結果: 50
console.log( ary2.findLast( predicate , {min:90 , max:110} ) ); // 結果: 101

 

条件に合う値を後ろから全部取得する

findLast()とfindLastIndex()は、条件に合う値を最後から一つだけ取得します。
そうではなくて、全て取得したいケースがあります。

その場合は、filter()とreverse()を組み合わせます。

const ary = [2,1,200,3,101,50,70];
const result = ary.filter( e=>e % 2 ===1 ).reverse();
console.log( result ); // 結果: [ 101, 3, 1 ]

上のコードは、奇数値を取得しています。

更新日：2023/06/21

書いた人（管理人）：けーちゃん

関連記事

スポンサーリンク

記事の内容について

null

こんにちはけーちゃんです。
説明するのって難しいですね。

「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。

裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。

掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。

ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php

 

このサイトは、リンクフリーです。大歓迎です。