reduceRight()
メソッドは、隣り合う 2 つの配列要素に対して (右から左へ) 関数を適用して、単一の値にします。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
左から右へ適用する際は Array.prototype.reduce()
を参照してください。
構文
arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])
引数
callback
- 4 つの引数を取って、配列内の各値に対し実行するコールバック関数
accumulator
- 現在処理されている配列要素の 1 つ前の要素。もしくは、指定されていれば
initialValue
。(下記参照) currentValue
- 現在処理されている配列要素
index
省略可- 現在処理されている配列要素のインデックス
array
省略可reduceRight()
によって呼ばれる配列
initialValue
省略可callback
の最初の呼び出しのときに、最初の実引数として用いるためのオブジェクト。initialValue が渡されなかった際は、配列の最後の要素が適用されます。また、空の配列に対して、初期値なしで呼び出すとTypeError
になります。
返値
畳み込みによって得られた 1 つの値です。
解説
reduceRight
は、配列に存在する各要素に対して、callback
関数を一度だけ実行します。配列における穴は対象からはずされ、初期値(あるいは、直前の callback
呼び出し)、現在の要素の値、現在のインデックス、繰り返しが行われる配列の 4 つの引数を受け取ります。
reduceRight の callback
の呼び出しは、以下のように見えるでしょう。
array.reduceRight(function(accumulator, currentValue, index, array) {
// ...
});
関数が初めて呼び出されたとき、accumulator
と currentValue
は、2 つの値のいずれかになります。reduceRight
の呼び出しで initialValue
が指定された場合、accumulator
は initialValue
と等しくなり、currentValue
は配列の最後の値と等しくなります。initialValue
が指定されなかった場合、accumulator
は配列の最後の値に等しく、currentValue
は最後から 2 番目の値に等しくなります。
配列が空で、initialValue
が指定されていない場合、TypeError
が投げられます。配列に要素が 1 つしかなく(位置に関係なく)、initialValue
が指定されていない場合、または initialValue
が指定されているが配列が空の場合、callback
を呼び出さずに単独の値が返されます。
この関数を使用した場合について見てみましょう。
[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
return accumulator + currentValue;
});
コールバックは 4 回呼び出され、各コールの引数と戻り値は以下のようになります。
callback |
accumulator |
currentValue |
index |
array |
return value |
---|---|---|---|---|---|
初回の呼出し | 4 |
3 |
3 |
[0, 1, 2, 3, 4] |
7 |
2 回目の呼出し | 7 |
2 |
2 |
[0, 1, 2, 3, 4] |
9 |
3 回目の呼出し | 9 |
1 |
1 |
[0, 1, 2, 3, 4] |
10 |
4 回目の呼出し | 10 |
0 |
0 |
[0, 1, 2, 3, 4] |
10 |
reduceRight
の返値は、コールバック呼び出しの最後の返値である (10
) になります。
initialValue
を与えた場合、その結果は以下のようになります。
[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) {
return accumulator + currentValue;
}, 10);
callback |
accumulator |
currentValue |
index |
array |
return value |
---|---|---|---|---|---|
初回の呼出し | 10 |
4 |
4 |
[0, 1, 2, 3, 4] |
14 |
2 回目の呼出し | 14 |
3 |
3 |
[0, 1, 2, 3, 4] |
17 |
3 回目の呼出し | 17 |
2 |
2 |
[0, 1, 2, 3, 4] |
19 |
4 回目の呼出し | 19 |
1 |
1 |
[0, 1, 2, 3, 4] |
20 |
5 回目の呼出し | 20 |
0 |
0 |
[0, 1, 2, 3, 4] |
20 |
この場合の reduceRight
の返値は 20
になります。
ポリフィル
reduceRight
は ECMA-262 の第5版に追加されたもので、すべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に次のコードを挿入して、ネイティブにはサポートされていない実装でも reduceRight
を使用できるようにします。
// Production steps of ECMA-262, Edition 5, 15.4.4.22
// Reference: http://es5.github.io/#x15.4.4.22
if ('function' !== typeof Array.prototype.reduceRight) {
Array.prototype.reduceRight = function(callback /*, initialValue*/) {
'use strict';
if (null === this || 'undefined' === typeof this) {
throw new TypeError('Array.prototype.reduce called on null or undefined');
}
if ('function' !== typeof callback) {
throw new TypeError(callback + ' is not a function');
}
var t = Object(this), len = t.length >>> 0, k = len - 1, value;
if (arguments.length >= 2) {
value = arguments[1];
} else {
while (k >= 0 && !(k in t)) {
k--;
}
if (k < 0) {
throw new TypeError('Reduce of empty array with no initial value');
}
value = t[k--];
}
for (; k >= 0; k--) {
if (k in t) {
value = callback(value, t[k], k, t);
}
}
return value;
};
}
例
配列内のすべての値を合計する
var sum = [0, 1, 2, 3].reduceRight(function(a, b) {
return a + b;
});
// sum is 6
配列中の配列を平坦化する
var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
return a.concat(b);
}, []);
// flattened is [4, 5, 2, 3, 0, 1]
一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す
const waterfall = (...functions) => (callback, ...args) =>
functions.reduceRight(
(composition, fn) => (...results) => fn(composition, ...results),
callback
)(...args);
const randInt = max => Math.floor(Math.random() * max)
const add5 = (callback, x) => {
setTimeout(callback, randInt(1000), x + 5);
};
const mult3 = (callback, x) => {
setTimeout(callback, randInt(1000), x * 3);
};
const sub2 = (callback, x) => {
setTimeout(callback, randInt(1000), x - 2);
};
const split = (callback, x) => {
setTimeout(callback, randInt(1000), x, x);
};
const add = (callback, x, y) => {
setTimeout(callback, randInt(1000), x + y);
};
const div4 = (callback, x) => {
setTimeout(callback, randInt(1000), x / 4);
};
const computation = waterfall(add5, mult3, sub2, split, add, div4);
computation(console.log, 5) // -> 14
// same as:
const computation2 = (input, callback) => {
const f6 = x=> div4(callback, x);
const f5 = (x, y) => add(f6, x, y);
const f4 = x => split(f5, x);
const f3 = x => sub2(f4, x);
const f2 = x => mult3(f3, x);
add5(f2, input);
}
reduce
と reduceRight
の違い
var a = ['1', '2', '3', '4', '5'];
var left = a.reduce(function(prev, cur) { return prev + cur; });
var right = a.reduceRight(function(prev, cur) { return prev + cur; });
console.log(left); // "12345"
console.log(right); // "54321"
関数合計の定義
関数合成のコンセプトはシンプルで、n個の関数を組み合わせたものです。これは右から左へと流れ、最後の関数の出力を使用して各関数を呼び出します。
/**
* Function Composition is way in which result of one function can
* be passed to another and so on.
*
* h(x) = f(g(x))
*
* Function execution happens right to left
*
* https://en.wikipedia.org/wiki/Function_composition
*/
const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value)
// Increment passed number
const inc = (n) => n + 1
// Doubles the passed value
const double = (n) => n * 2
// using composition function
console.log(compose(double, inc)(2)); // 6
// using composition function
console.log(compose(inc, double)(2)); // 5
仕様
ブラウザーの互換性
BCD tables only load in the browser