Array.prototype.filter() - 配列から条件を満たさない要素を取り除く

2017/09/26

Array.prototype.filter()は、配列から条件を満たさない要素を取り除くメソッドです。条件を満たす要素だけで構成された新しい配列を返します。

概要

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

説明

Array.prototype.filter ( callbackfn [ , thisArg ] )

第1引数(callbackfn)にフィルターの役目を果たすコールバック関数を指定します。このコールバック関数がtrueを返せば条件をクリア、それ以外なら条件を満たしていないと判断され、その要素が取り除かれます。配列の全ての要素がこのコールバック関数にかけられます。コールバック関数は、値、インデックス番号、配列そのもの、の3つの引数を受け取ります。

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

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

チュートリアル

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

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

var checkFunc = function ( value, index, sourceArray ) {
	if( value >= 5 ) {
		return true ;

	} else {
		return false ;

	}
}

array.filter( checkFunc ) ;	// [ 6, 9, 7, 8 ]

処理は内部で次のように繰り返されます。falseが返った要素は、メソッドの返り値である新しい配列には含まれません。

checkFunc( 3, 0, array ) ;	// false
checkFunc( 6, 1, array ) ;	// true
checkFunc( 9, 2, array ) ;	// true
checkFunc( 4, 3, array ) ;	// false
checkFunc( 7, 4, array ) ;	// true
checkFunc( 8, 5, array ) ;	// true

デモ

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

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

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

var a = [ 4, 6, 2, 7, 4, 9, ].filter( callbackfn ) ;
var b = [ 11, 5, 9, 3, 5, 4, ].filter( callbackfn ) ;
/** 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>