JavaScript Array find()

定義と用法

find() 方法はテストを通過した最初の配列要素の値を返します（関数として提供されたものです）。

find() 方法は配列の中で存在する各要素に対して関数を実行します：

  • find() 関数が true 値を返す配列要素を見つけた場合、find() はその配列要素の値を返します（残りの値をチェックしません）
  • そうでない場合は undefined を返します

注記：find() 空の配列に対してこの関数を実行しません。

注記：find() 元の配列を変更しません。

例

例 1

配列の中で最初の値が 18 以上の要素の値を取得します：

var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

実際に試してみる

例 2

特定の数字より高い値を持つ配列の最初の要素の値を取得する：

<p>最低年齢：<input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">試す</button>
<p>年齢が以下より高い場合：<span id="demo"></span></p>
<script>
var ages = [4, 12, 16, 20];
function checkAdult(age) {
  return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
  document.getElementById("demo").innerHTML = ages.find(checkAdult);
}
</script>

実際に試してみる

文法

array.find(function(currentValue, index, arr, thisValue)

パラメータ値

パラメータ 説明
function(currentValue, index, arr) 必須。配列の各要素に実行される関数。

関数パラメータ：

パラメータ 説明
currentValue 必須。現在の要素の値。
index オプション。現在の要素の配列インデックス。
arr オプション。現在の要素が属する配列オブジェクト。
thisValue

オプション。関数に渡してその「this」値として使用する値。

この引数が空の場合、値「undefined」がその「this」値として伝達されます。

技術的詳細

返り値： 配列のいずれかの要素がテストを通過した場合、配列要素の値を返します。それ以外の場合、undefined を返します。
JavaScript バージョン： ECMAScript 6

ブラウザのサポート

テーブルの数字は、この方法を完全にサポートする最初のブラウザバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome 45 Edge 12 Firefox 25 Safari 7.1 Opera 32
2015年9月 2015年7月 2014年7月 2014年9月 2015年9月

注記：Internet Explorer はサポートしていません find() メソッド。

関連ページ

チュートリアル：JavaScript 配列

チュートリアル：JavaScript 配列 Const

チュートリアル：JavaScript 配列メソッド

チュートリアル：JavaScript 配列のソート

チュートリアル：JavaScript 配列のイテレーション