SYNCERのロゴ
アイキャッチ画像

Array.prototype.reduce() - 配列を前方から簡約化する

Array.prototype.reduce()は、配列の要素を前方から後方にかけて簡約化するメソッドです。各要素をコールバック関数にかけて最終的に1つの値にまとめます。

概要

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

説明

Array.prototype.reduce ( callbackfn [ , initialValue ] )

第1引数(callbackfn)にコールバック関数を指定します。最初に配列の[0]と[1]が引数に関数にかけられ、次にその返り値と[2]が関数にかけられ、次のその返り値と[3]が関数にかけられ…、といった形で各要素に処理が実行されて、最終的な1つの返り値を決定します。このコールバック関数は、前回の返り値、今回の値、今回の値のインデックス番号、元の配列、の4つの引数を受け取ります。

第2引数(initialValue)を指定すると、それが初期値に設定されます。最初に[0]と[1]ではなく、initialValueと[0]が関数にかけられます。

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

チュートリアル

例えば、配列の各要素を乗算する、というテーマでArray.prototype.reduce()を利用してみます。コールバック関数は、前回の値に、今回の値をかけた値を返すようにします。

// 1 * 2 * 3 * 4 * 5 * 6をしたい
var array = [ 1, 2, 3, 4, 5, 6, ] ;

var callbackfn = function ( lastValue, value, index, sourceArray ) {
	return lastValue * value ;
}

array.reduce( checkFunc ) ;	// 720

処理は内部で次のように繰り返されます。このように、各要素が1つの値に簡約化されていきます。

callbackfn( 1, 2, 1, array ) ;	// 1 * 2 = 2		array[0] と array[1]
callbackfn( 2, 3, 2, array ) ;	// 2 * 3 = 6		前回の返り値(2) と array[2]
callbackfn( 6, 4, 3, array ) ;	// 6 * 4 = 24			前回の返り値(6) と array[3]
callbackfn( 24, 5, 4, array ) ;	// 24 * 5 = 120			前回の返り値(24) と array[4]
callbackfn( 120, 6, 5, array ) ;	// 120 * 6 = 720			前回の返り値(120) と array[5]

// → 720

デモ

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

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

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

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

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年9月26日 (火)
コンテンツを公開しました。