Array.prototype.reduceRight() - 配列を後方から簡約化する
Array.prototype.reduceRight()は、配列の要素を後方から前方にかけて簡約化するメソッドです。各要素をコールバック関数にかけて最終的に1つの値にまとめます。
概要
説明
Array.prototype.reduceRight ( callbackfn [ , initialValue ] )
第1引数(callbackfn)にコールバック関数を指定します。最初に配列の[length-1]と[length-2]が引数に関数にかけられ、次にその返り値と[length-3]が関数にかけられ、次のその返り値と[length-4]が関数にかけられ…、といった形で各要素に処理が実行されて、最終的な1つの返り値を決定します。このコールバック関数は、前回の返り値、今回の値、今回の値のインデックス番号、元の配列、の4つの引数を受け取ります。
第2引数(initialValue)を指定すると、それが初期値に設定されます。最初に[length-1]と[length-2]ではなく、initialValueと[length-1]が関数にかけられます。
function callbackfn ( lastValue, value, index, array ) {
return lastValue + value ;
}
チュートリアル
例えば、配列の各要素を乗算する、というテーマでArray.prototype.reduceRight()を利用してみます。コールバック関数は、前回の値に、今回の値をかけた値を返すようにします。
// 6 * 5 * 4 * 3 * 2 * 1をしたい
var array = [ 1, 2, 3, 4, 5, 6, ] ;
var callbackfn = function ( lastValue, value, index, sourceArray ) {
return lastValue * value ;
}
array.reduceRight( checkFunc ) ; // 720
処理は内部で次のように繰り返されます。このように、各要素が1つの値に簡約化されていきます。
callbackfn( 6, 5, 4, array ) ; // 6 * 5 = 30 array[5] と array[4]
callbackfn( 30, 4, 3, array ) ; // 30 * 4 = 120 前回の返り値(30) と array[3]
callbackfn( 120, 3, 2, array ) ; // 120 * 3 = 360 前回の返り値(120) と array[2]
callbackfn( 360, 2, 1, array ) ; // 360 * 2 = 720 前回の返り値(360) と array[1]
callbackfn( 120, 1, 0, array ) ; // 720 * 1 = 720 前回の返り値(720) と array[0]
// → 720
デモ
Array.prototype.reduceRight()のデモです。
<!-- このコードは編集できます。 -->
<!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, ].reduceRight( callbackfn ) ;
var b = [ 1, 2, 3, 4, 5, 6, ].reduceRight( 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>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- Array.prototype.reduce()
- Array.prototype.reduce()は、配列の要素を前方から後方にかけて簡約化するメソッドです。各要素をコールバック関数にかけて最終的に1つの値にまとめます。
- Array.prototype.map()
- Array.prototype.map()は、配列の各要素に関数を実行し、その返り値で構成された新しい配列を作成するメソッドです。元の配列に変更はありません。
- Array.prototype.forEach()
- Array.prototype.forEach()は、配列の各要素を材料に処理を実行するメソッドです。一般的な配列のループ処理はこのメソッドで行ないます。
- Array.prototype.filter()
- Array.prototype.filter()は、配列から条件を満たさない要素を取り除くメソッドです。条件を満たす要素だけで構成された新しい配列を返します。