JavaScript配列のfind()メソッド

概要: このチュートリアルでは、JavaScriptのfind()メソッドを使用して、配列内でテストを満たす最初の要素を検索する方法を学習します。

配列のfind()メソッドの紹介

ES5では、配列内の要素を見つけるには、indexOf()またはlastIndexOf()メソッドを使用します。ただし、これらのメソッドは、最初に一致する要素のインデックスのみを返すため、非常に限定的です。

ES6では、Array.prototypeオブジェクトに追加されたfind()という新しいメソッドが導入されました。

find()メソッドは、テスト関数に合格する配列内の最初の要素を返します。find()メソッドの構文を以下に示します。

find(callback(element[, index[, array]])[, thisArg])Code language: CSS (css)

引数

find()は、コールバック関数と、callback関数内でthisに使用するオプションの値の2つの引数を受け取ります。

1) callback

callbackは、配列の各要素を実行する関数です。3つの引数を取ります。

• elementは現在の要素です。
• indexは現在の要素のインデックスです。
• arrayは、find()が呼び出された配列です。

2) thisArg

thisArgは、callback内でthisとして使用されるオブジェクトです。

戻り値

find()は、callbackが真の値を返すまで、配列の各要素に対してcallback関数を実行します。

コールバックが真の値を返した場合、find()はすぐに要素を返し、検索を停止します。そうでない場合は、undefinedを返します。

見つかった要素のインデックスを見つけたい場合は、findIndex()メソッドを使用できます。

JavaScript find()の例

次の例では、find()メソッドを使用して、数値の配列から最初の偶数を検索します。

let numbers = [1, 2, 3, 4, 5];

console.log(numbers.find(e => e % 2 == 0));Code language: JavaScript (javascript)

出力

2

nameとcreditプロパティを持つ顧客オブジェクトのリストが次のようにあるとします。

let customers = [{
    name: 'ABC Inc',
    credit: 100
}, {
    name: 'ACME Corp',
    credit: 200
}, {
    name: 'IoT AG',
    credit: 300
}];Code language: JavaScript (javascript)

次のコードでは、find()メソッドを使用して、クレジットが100を超える最初の顧客を見つけます。

console.log(customers.find(c => c.credit > 100));Code language: JavaScript (javascript)

出力

{ name: 'ACME Corp', credit: 200 }Code language: CSS (css)

まとめ

• 指定されたテスト関数に合格する配列の最初の要素を見つけるには、find()メソッドを使用します。