Array.prototype.find() - 配列から条件を満たす値を取得する

2017/09/26

Array.prototype.find()は、配列から条件を満たす値を取得するメソッドです。前方から後方にかけて検索し、条件を満たす一番最初の要素だけが返ります。条件を満たす要素が1つもない場合、undefinedが返ります。なお、findIndex()は、値ではなく、インデックス番号が返ります。

概要

名前: find
所属: Array.prototype
仕様書: https://tc39.github.io/ecma262/#sec-array.prototype.find

説明

Array.prototype.find ( predicate [ , thisArg ] )

第1引数(predicate)にコールバック関数を指定します。このコールバック関数がtrueを返せばその値が検索にヒットした値として返されます。それ以外なら条件を満たしていないと判断され、次の要素のチェックに移ります。配列の全ての要素がこのコールバック関数にかけられます。コールバック関数は、値、インデックス番号、配列そのもの、の3つの引数を受け取ります。

第2引数(thisArg)を指定すると、それがコールバック関数内におけるthisの値となります。省略した場合、thisの値はundefinedです。

function predicate ( value, index, array ) {
	return true ;
}

チュートリアル

例えば、配列から6より大きい値を検索したい、というテーマでArray.prototype.find()を利用してみます。コールバック関数は、引数で受け取った値(value)が6より大きければ条件を満たすのでtrue、それ以外なら条件を満たさないのでfalseを返すようになっています。

var array = [ 3, 6, 9, 4, 7, 8 ] ;

var predicate = function ( value, index, sourceArray ) {
	if( value >= 6 ) {
		return true ;

	} else {
		return false ;

	}
}

array.find( predicate ) ;	// 9

処理は内部で次のように繰り返されます。trueが返った時点でその値がメソッドの返り値に決定して処理は終了します。

predicate( 3, 0, array ) ;	// false
predicate( 6, 1, array ) ;	// false
predicate( 9, 2, array ) ;	// true (この時点で処理を終了)
predicate( 4, 3, array ) ;	// false
predicate( 7, 4, array ) ;	// true
predicate( 8, 5, array ) ;	// true

デモ

Array.prototype.find()のデモです。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
	<style>
body {
	white-space: pre-wrap ;
}
	</style>
</head>
<body>
<script>
/** try it! **/
var predicate = function ( value, index, sourceArray ) {
	if ( value > 6 ) {
		return true ;
	} else {
		return false ;
	}
}

var a = [ 4, 6, 2, 7, 4, 9, ].find( predicate ) ;
var b = [ 11, 5, 9, 3, 5, 4, ].find( predicate ) ;
/** try it! **/

var results = { a:a, b:b, } ;

for( var name in results ) {
	console.log( name, results[name] ) ;
	document.body.appendChild( new Text( name + " = " + JSON.stringify( results[name] ) + "\n" ) ) ;
}
</script>
</body>
</html>