JavaScriptのfind()関数とは？配列から条件に合う最初の要素を取得する方法
JavaScriptのfind()メソッドは、配列の中から指定した条件を満たす最初の要素の値を返すために使用されます。条件を満たす要素がひとつも存在しない場合は、undefinedが返されます。
find()は配列全体を走査しますが、条件に一致する要素が見つかった時点で処理を終了するため、効率的に目的の要素を取得できるのが特徴です。
find()の基本構文
array.find(function(val, index, arr), thisValue)
パラメータの説明
- function：各要素に対して実行されるテスト関数
- val：現在処理中の要素の値（必須）
- index：現在処理中の要素のインデックス番号（省略可能）
- arr：対象となる配列そのもの（省略可能）
- thisValue：関数内で
thisとして参照される値（省略可能）
サンプルコード：条件を満たす最初の要素を取得する
以下の例では、配列の中から「400より大きい値」を持つ最初の要素を取得しています。
<!DOCTYPE html>
<html>
<body>
<h2>ランキングポイント</h2>
<p>400より大きい最初のポイントを取得します...</p>
<button onclick="display()">結果を表示</button>
<p id="demo"></p>
<script>
var pointsArr = [50, 100, 200, 300, 400, 500, 600];
function pointsFunc(points) {
return points > 400;
}
function display() {
document.getElementById("demo").innerHTML = pointsArr.find(pointsFunc);
}
</script>
</body>
</html>実行結果
上記のコードを実行し、「結果を表示」ボタンをクリックすると、次のように500が表示されます。これは、配列の中で最初に「400より大きい」という条件を満たした要素だからです。
条件を満たす要素が存在しない場合
次に、条件に一致する要素がひとつもないケースを見てみましょう。この場合、戻り値はundefinedになります。
サンプルコード：undefinedが返される例
<!DOCTYPE html>
<html>
<body>
<h2>ランキングポイント</h2>
<p>400より大きい最初のポイントを取得します...</p>
<button onclick="display()">結果を表示</button>
<p id="demo"></p>
<script>
var pointsArr = [50, 100, 200, 300, 400];
function pointsFunc(points) {
return points > 400;
}
function display() {
document.getElementById("demo").innerHTML = pointsArr.find(pointsFunc);
}
</script>
</body>
</html>実行結果
この例では、配列内に「400より大きい」要素が存在しないため、「結果を表示」ボタンをクリックすると画面にはundefinedと表示されます。
まとめ
- find()メソッドは、テスト関数を渡して配列を走査し、最初に条件を満たした要素の値のみを返す。
- 条件に一致する要素が見つからない場合は
undefinedを返す。 - filter()メソッドと似ていますが、filter()は一致するすべての要素を含む新しい配列を返す点が異なる。
-
JavaScriptのArray.prototype.find()メソッドとは？使い方をサンプルコードで解説
Array.prototype.find() メソッドは、配列の中から指定した条件（テスト関数）を満たす最初の要素の値を返します。 条件に一致する要素が見つかった時点で検索を終了するため、大きな配列でも効率的に動作します。また、どの要素も条件を満たさなかった場合は undefined を返すという点も重要な特徴です。 find()メソッドの基本構文 arr.find(callback(element[, index[, array]])[, thisArg]) callback：各要素に対して実行されるテスト関数。true を返した要素が結果となります。 thisArg（省略可）：callb
-
【JavaScript】関数から返された配列にアクセスする方法
JavaScriptでは、関数の戻り値として配列を返し、呼び出し元でその配列を受け取って自由に操作することができます。本記事では、関数から返された配列へアクセスする具体的な方法を、実際に動作するサンプルコードとともに解説します。 実装例：関数から配列を返してアクセスする 以下のサンプルでは、引数に渡された数値の1倍〜10倍の値を要素とする配列を生成して返すretTable()関数を定義しています。ボタンをクリックすると、この関数が返した配列を変数で受け取り、画面に表示します。 <!DOCTYPE html> <html lang=ja> <head> &l