JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのArray.find()メソッドとは？使い方と実行例を解説

Array.find()メソッドの基本的な役割

Array.find()は、配列の中から指定されたテスト条件（ユーザーが定義した条件）を満たす最初の要素の値を返すメソッドです。ES6（ECMAScript 2015）で導入された機能の一つで、配列から特定の条件に合致する要素を簡単に検索できます。

もし配列内にテスト条件を満たす要素が一つも存在しない場合、Array.find()はundefinedを返します。

動作の仕組み

次の例では、配列内の価格要素が指定したテスト価格（12000以上）を満たしているかどうかをArray.find()でチェックしています。

  • 条件がtrueになった場合：テストに合格した最初の値が出力されます
  • 条件を満たす要素がない場合：undefinedが出力されます

コード例

<html>
<body>
<p id="price"></p>
<script>
    var price = [3000, 21000, 28000, 20000, 15500];
    function checkCost(cost) {
        return cost >= 12000;
    }
    document.getElementById("price").innerHTML = price.find(checkCost);
</script>
</body>
</html>

実行結果

21000

解説

この例では、配列[3000, 21000, 28000, 20000, 15500]の各要素に対してコールバック関数checkCost()が先頭から順番に適用されます。まず3000は12000未満のため不合格ですが、次の21000が条件を満たすため、検索はそこで終了し、結果として21000が返されます。その後ろにある28000や20000などの条件を満たす要素は評価されません。

ポイントまとめ

  • find()は条件に合致した最初の1つの値のみを返します（複数あっても最初だけ）
  • 見つからない場合はundefinedを返します
  • 類似メソッドのfindIndex()を使うと、値ではなくインデックス番号を取得できます
  1. JavaScriptのpopメソッドとは？基本の構文と使い方をわかりやすく解説

    JavaScriptの配列には、データを操作するためのさまざまなメソッドが用意されています。その中のひとつがpopメソッドです。Web開発者は、配列から最後の要素を取り除きたいときや、取り除いた要素を使って何か処理を行いたいときに、このメソッドを活用します。本記事では、popメソッドの基本的な使い方を具体例とともにわかりやすく解説します。 popメソッドの構文 popメソッドの構文は非常にシンプルです。定義上、popメソッドは配列の最後の要素を削除し、その削除した要素を返す働きを持ちます。 let frozen = [ Anna, Elsa, Olaf, Kristoff, Sven ]

  2. JavaScriptのWeakMapでclear()メソッドを使う方法とは？

    WeakMapのclear()メソッドとはWeakMapオブジェクトのclear()メソッドは、そのWeakMapに格納されているすべてのキーと値のペアを一括で削除するためのメソッドです。しかし、このメソッドは現在のECMAScriptの仕様からは削除されています。そのため、標準のWeakMapに対して直接clear()を呼び出すことはできません。とはいえ、WeakMapオブジェクトをラップするクラスを作成し、clear()メソッドに対応した処理を追加することで、同様の機能を簡単に実現できます。実装例：clear()メソッドを持つWeakMapラッパークラスclass ClearableWea