diff options
Diffstat (limited to 'files/ja/web/javascript')
| -rw-r--r-- | files/ja/web/javascript/reference/global_objects/array/reduceright/index.md | 466 |
1 files changed, 242 insertions, 224 deletions
diff --git a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md index 4d1055ccab..04be78ad80 100644 --- a/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md +++ b/files/ja/web/javascript/reference/global_objects/array/reduceright/index.md @@ -5,192 +5,227 @@ tags: - Array - ECMAScript 5 - JavaScript - - Method - - Prototype - - polyfill + - メソッド + - プロトタイプ + - ポリフィル +browser-compat: javascript.builtins.Array.reduceRight translation_of: Web/JavaScript/Reference/Global_Objects/Array/ReduceRight --- -<div>{{JSRef}}</div> +{{JSRef}} -<p><code><strong>reduceRight()</strong></code> メソッドは、隣り合う 2 つの配列要素に対して (右から左へ) 関数を適用して、単一の値にします。</p> +**`reduceRight()`** メソッドは、アキュームレーターと配列のそれぞれの値に対して (右から左へ) 関数を適用して、単一の値にします。 -<div>{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}}</div> +{{EmbedInteractiveExample("pages/js/array-reduce-right.html","shorter")}} -<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、<a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div> +左から右へ適用する際は {{jsxref("Array.prototype.reduce()")}} を参照してください。 -<p>左から右へ適用する際は {{jsxref("Array.prototype.reduce()")}} を参照してください。</p> +## 構文 -<h2 id="Syntax" name="Syntax">構文</h2> +```js +// アロー関数 +reduceRight((accumulator, currentValue) => { ... } ) +reduceRight((accumulator, currentValue, index) => { ... } ) +reduceRight((accumulator, currentValue, index, array) => { ... } ) +reduceRight((accumulator, currentValue, index, array) => { ... }, initialValue) -<pre class="syntaxbox notranslate"><var>arr</var>.reduceRight(<var>callback</var>(<var>accumulator</var>, <var>currentValue</var>[, <var>index</var>[, <var>array</var>]])[, <var>initialValue</var>])</pre> +// コールバック関数 +reduceRight(callbackFn) +reduceRight(callbackFn, initialValue) -<h3 id="Parameters" name="Parameters">引数</h3> +// コールバック畳み込み関数 +reduceRight(function callbackFn(accumulator, currentValue) { ... }) +reduceRight(function callbackFn(accumulator, currentValue, index) { ... }) +reduceRight(function callbackFn(accumulator, currentValue, index, array){ ... }) +reduceRight(function callbackFn(accumulator, currentValue, index, array) { ... }, initialValue) +``` -<dl> - <dt><code><var>callback</var></code></dt> - <dd>4 つの引数を取って、配列内の各値に対し実行するコールバック関数 - <dl> - <dt><code><var>accumulator</var></code></dt> - <dd>現在処理されている配列要素の 1 つ前の要素。もしくは、指定されていれば <code><var>initialValue</var></code>。(下記参照)</dd> - <dt><code><var>currentValue</var></code></dt> - <dd>現在処理されている配列要素</dd> - <dt><code><var>index</var></code>{{optional_inline}}</dt> - <dd>現在処理されている配列要素のインデックス</dd> - <dt><code><var>array</var></code>{{optional_inline}}</dt> - <dd><code>reduceRight()</code> によって呼ばれる配列</dd> - </dl> - </dd> - <dt><code><var>initialValue</var></code> {{optional_inline}}</dt> - <dd><code><var>callback</var></code> の最初の呼び出しのときに、最初の実引数として用いるためのオブジェクト。initialValue が渡されなかった際は、配列の最後の要素が適用されます。また、空の配列に対して、初期値なしで呼び出すと <code>TypeError</code> になります。</dd> -</dl> +### 引数 -<h3 id="Return_value" name="Return_value">返値</h3> +- `callbackFn` + - : 配列内のそれぞれの値に対して実行するコールバック関数であり、 4 つの引数を取ります。 + - `accumulator` + - : コールバック関数の前回の呼び出しで返された値、もしくは、指定されていれば `initialValue` です。(下記参照) + - `currentValue` + - : 配列内で現在処理中の要素です。 + - `index`{{optional_inline}} + - : 配列内で現在処理中の要素の位置です。 + - `array`{{optional_inline}} + - : `reduceRight()` が呼び出された配列です。 -<p>畳み込みによって得られた 1 つの値です。</p> +- `initialValue` {{optional_inline}} + - : `callbackFn` の最初の呼び出しのときに、アキュームレーターとして使用する値です。初期値がが渡されなかった場合は、配列の最後の要素が適用され、その要素が飛ばされます。また、 reduce または reduceRight を空の配列に対して初期値なしで呼び出すと `TypeError` になります。 -<h2 id="Description" name="Description">解説</h2> +### 返値 -<p><code>reduceRight</code> は、配列に存在する各要素に対して、<code>callback</code> 関数を一度だけ実行します。配列における穴は対象からはずされ、初期値（あるいは、直前の <code>callback</code> 呼び出し）、現在の要素の値、現在のインデックス、繰り返しが行われる配列の 4 つの引数を受け取ります。</p> +畳み込みによって得られた値です。 -<p>reduceRight の <code><var>callback</var></code> の呼び出しは、以下のように見えるでしょう。</p> +## 解説 -<pre class="brush: js notranslate">array.reduceRight(function(accumulator, currentValue, index, array) { +`reduceRight` は、配列内に存在するそれぞれの要素に対してコールバック関数を一度ずつ実行します。配列内の穴は対象外です。初期値 (あるいは直前のコールバックの呼び出し結果)、現在の要素の値、現在の位置、繰り返しが行われる配列の 4 つの引数を受け取ります。 + +reduceRight の `callbackFn` の呼び出しは、以下のように見えるでしょう。 + +```js +arr.reduceRight(function(accumulator, currentValue, index, array) { // ... }); -</pre> +``` -<p>関数が初めて呼び出されたとき、<code><var>accumulator</var></code> と <code><var>currentValue</var></code> は、2 つの値のいずれかになります。<code>reduceRight</code> の呼び出しで <code><var>initialValue</var></code> が指定された場合、<code><var>accumulator</var></code> は <code><var>initialValue</var></code> と等しくなり、<code><var>currentValue</var></code> は配列の最後の値と等しくなります。<code><var>initialValue</var></code> が指定されなかった場合、<code><var>accumulator</var></code> は配列の最後の値に等しく、<code><var>currentValue</var></code> は最後から 2 番目の値に等しくなります。</p> +関数が初めて呼び出されたとき、`accumulator` と `currentValue` は、2 つの値のいずれかになります。 `initialValue` を指定して `reduceRight` を呼び出した場合、`accumulator` は `initialValue` と等しくなり、`currentValue` は配列の最後の値と等しくなります。`initialValue` が指定されなかった場合、`accumulator` は配列の最後の値に等しく、`currentValue` は最後から 2 番目の値に等しくなります。 -<p>配列が空で、<code><var>initialValue</var></code> が指定されていない場合、{{jsxref("TypeError")}} が投げられます。配列に要素が 1 つしかなく（位置に関係なく）、<code><var>initialValue</var></code> が指定されていない場合、または <code><var>initialValue</var></code> が指定されているが配列が空の場合、<code><var>callback</var></code> を呼び出さずに単独の値が返されます。</p> +配列が空で、`initialValue` が指定されなかった場合は、{{jsxref("TypeError")}} が発生します。配列に (位置に関わらず) 要素が 1 つしかなく、`initialValue` が指定されなかった場合、または `initialValue` が指定されたが配列が空だった場合は、`callbackFn` を呼び出されずに単独の値が返されます。 -<p>この関数を使用した場合について見てみましょう。</p> +この関数を使用した場合について見てみましょう。 -<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { +```js +[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { return accumulator + currentValue; }); -</pre> +``` -<p>コールバックは 4 回呼び出され、各コールの引数と戻り値は以下のようになります。</p> +コールバックは 4 回呼び出され、ぞれぞれの呼び出しの引数と返値は次のようになります。 <table> - <thead> - <tr> - <th scope="col"><code><var>callback</var></code></th> - <th scope="col"><code><var>accumulator</var></code></th> - <th scope="col"><code><var>currentValue</var></code></th> - <th scope="col"><code><var>index</var></code></th> - <th scope="col"><code><var>array</var></code></th> - <th scope="col">return value</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">初回の呼出し</th> - <td><code>4</code></td> - <td><code>3</code></td> - <td><code>3</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>7</code></td> - </tr> - <tr> - <th scope="row">2 回目の呼出し</th> - <td><code>7</code></td> - <td><code>2</code></td> - <td><code>2</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>9</code></td> - </tr> - <tr> - <th scope="row">3 回目の呼出し</th> - <td><code>9</code></td> - <td><code>1</code></td> - <td><code>1</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>10</code></td> - </tr> - <tr> - <th scope="row">4 回目の呼出し</th> - <td><code>10</code></td> - <td><code>0</code></td> - <td><code>0</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>10</code></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col"> + <code><var>callback</var></code> + </th> + <th scope="col"> + <code><var>accumulator</var></code> + </th> + <th scope="col"> + <code><var>currentValue</var></code> + </th> + <th scope="col"> + <code><var>index</var></code> + </th> + <th scope="col"> + <code><var>array</var></code> + </th> + <th scope="col">返値</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">初回の呼び出し</th> + <td><code>4</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>7</code></td> + </tr> + <tr> + <th scope="row">2 回目の呼び出し</th> + <td><code>7</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>9</code></td> + </tr> + <tr> + <th scope="row">3 回目の呼び出し</th> + <td><code>9</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + <tr> + <th scope="row">4 回目の呼び出し</th> + <td><code>10</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>10</code></td> + </tr> + </tbody> </table> -<p><code>reduceRight</code> の返値は、コールバック呼び出しの最後の返値である (<code>10</code>) になります。</p> +`reduceRight` の返値は、コールバック呼び出しの最後の返値である (`10`) になります。 -<p><code>initialValue</code> を与えた場合、その結果は以下のようになります。</p> +`initialValue` を渡した場合、結果は次のようになります。 -<pre class="brush: js notranslate">[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { +```js +[0, 1, 2, 3, 4].reduceRight(function(accumulator, currentValue, index, array) { return accumulator + currentValue; }, 10); -</pre> +``` <table> - <thead> - <tr> - <th scope="col"><code><var>callback</var></code></th> - <th scope="col"><code><var>accumulator</var></code></th> - <th scope="col"><code><var>currentValue</var></code></th> - <th scope="col"><code><var>index</var></code></th> - <th scope="col"><code><var>array</var></code></th> - <th scope="col">return value</th> - </tr> - </thead> - <tbody> - <tr> - <th scope="row">初回の呼出し</th> - <td><code>10</code></td> - <td><code>4</code></td> - <td><code>4</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>14</code></td> - </tr> - <tr> - <th scope="row">2 回目の呼出し</th> - <td><code>14</code></td> - <td><code>3</code></td> - <td><code>3</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>17</code></td> - </tr> - <tr> - <th scope="row">3 回目の呼出し</th> - <td><code>17</code></td> - <td><code>2</code></td> - <td><code>2</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>19</code></td> - </tr> - <tr> - <th scope="row">4 回目の呼出し</th> - <td><code>19</code></td> - <td><code>1</code></td> - <td><code>1</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>20</code></td> - </tr> - <tr> - <th scope="row">5 回目の呼出し</th> - <td><code>20</code></td> - <td><code>0</code></td> - <td><code>0</code></td> - <td><code>[0, 1, 2, 3, 4]</code></td> - <td><code>20</code></td> - </tr> - </tbody> + <thead> + <tr> + <th scope="col"> + <code><var>callback</var></code> + </th> + <th scope="col"> + <code><var>accumulator</var></code> + </th> + <th scope="col"> + <code><var>currentValue</var></code> + </th> + <th scope="col"> + <code><var>index</var></code> + </th> + <th scope="col"> + <code><var>array</var></code> + </th> + <th scope="col">返値</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">初回の呼び出し</th> + <td><code>10</code></td> + <td><code>4</code></td> + <td><code>4</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>14</code></td> + </tr> + <tr> + <th scope="row">2 回目の呼び出し</th> + <td><code>14</code></td> + <td><code>3</code></td> + <td><code>3</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>17</code></td> + </tr> + <tr> + <th scope="row">3 回目の呼び出し</th> + <td><code>17</code></td> + <td><code>2</code></td> + <td><code>2</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>19</code></td> + </tr> + <tr> + <th scope="row">4 回目の呼び出し</th> + <td><code>19</code></td> + <td><code>1</code></td> + <td><code>1</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + <tr> + <th scope="row">5 回目の呼び出し</th> + <td><code>20</code></td> + <td><code>0</code></td> + <td><code>0</code></td> + <td><code>[0, 1, 2, 3, 4]</code></td> + <td><code>20</code></td> + </tr> + </tbody> </table> -<p>この場合の <code>reduceRight</code> の返値は <code>20</code> になります。</p> +この場合の `reduceRight` の返値は `20` になります。 -<h2 id="Polyfill" name="Polyfill">ポリフィル</h2> +## ポリフィル -<p><code>reduceRight</code> は ECMA-262 の第5版に追加されたもので、すべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に次のコードを挿入して、ネイティブにはサポートされていない実装でも <code>reduceRight</code> を使用できるようにします。</p> +`reduceRight` は ECMA-262 の第 5 版に追加されたもので、すべての実装には存在しない可能性があります。これを回避するには、スクリプトの最初に次のコードを挿入して、ネイティブには対応していない実装でも `reduceRight` を使用できるようにします。 -<pre class="brush: js notranslate">// Production steps of ECMA-262, Edition 5, 15.4.4.22 -// Reference: http://es5.github.io/#x15.4.4.22 +```js +// Production steps of ECMA-262, Edition 5, 15.4.4.22 +// Reference: https://es5.github.io/#x15.4.4.22 if ('function' !== typeof Array.prototype.reduceRight) { Array.prototype.reduceRight = function(callback /*, initialValue*/) { 'use strict'; @@ -200,19 +235,19 @@ if ('function' !== typeof Array.prototype.reduceRight) { 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) { + 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)) { + while (k >= 0 && !(k in t)) { k--; } - if (k < 0) { + if (k < 0) { throw new TypeError('Reduce of empty array with no initial value'); } value = t[k--]; } - for (; k >= 0; k--) { + for (; k >= 0; k--) { if (k in t) { value = callback(value, t[k], k, t); } @@ -220,132 +255,115 @@ if ('function' !== typeof Array.prototype.reduceRight) { return value; }; } -</pre> +``` -<h2 id="Examples" name="Examples">例</h2> +## 例 -<h3 id="Sum_up_all_values_within_an_array" name="Sum_up_all_values_within_an_array">配列内のすべての値を合計する</h3> +### 配列内のすべての値を合計する -<pre class="brush: js notranslate">var sum = [0, 1, 2, 3].reduceRight(function(a, b) { +```js +var sum = [0, 1, 2, 3].reduceRight(function(a, b) { return a + b; }); // sum is 6 -</pre> +``` -<h3 id="Flatten_an_array_of_arrays" name="Flatten_an_array_of_arrays">配列中の配列を平坦化する</h3> +### 配列中の配列を平坦化する -<pre class="brush: js notranslate">var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { +```js +var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) { return a.concat(b); }, []); // flattened is [4, 5, 2, 3, 0, 1] +``` -</pre> +### 一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す -<h3 id="Run_a_list_of_asynchronous_functions_with_callbacks_in_series_each_passing_their_results_to_the_next" name="Run_a_list_of_asynchronous_functions_with_callbacks_in_series_each_passing_their_results_to_the_next">一連のコールバックを使用して非同期関数のリストを実行し、それぞれの結果を次のコールバックに渡す</h3> - -<pre class="brush: js notranslate">const waterfall = (...functions) => (callback, ...args) => +```js +const waterfall = (...functions) => (callback, ...args) => functions.reduceRight( - (composition, fn) => (...results) => fn(composition, ...results), + (composition, fn) => (...results) => fn(composition, ...results), callback )(...args); -const randInt = max => Math.floor(Math.random() * max) +const randInt = max => Math.floor(Math.random() * max) -const add5 = (callback, x) => { +const add5 = (callback, x) => { setTimeout(callback, randInt(1000), x + 5); }; -const mult3 = (callback, x) => { +const mult3 = (callback, x) => { setTimeout(callback, randInt(1000), x * 3); }; -const sub2 = (callback, x) => { +const sub2 = (callback, x) => { setTimeout(callback, randInt(1000), x - 2); }; -const split = (callback, x) => { +const split = (callback, x) => { setTimeout(callback, randInt(1000), x, x); }; -const add = (callback, x, y) => { +const add = (callback, x, y) => { setTimeout(callback, randInt(1000), x + y); }; -const div4 = (callback, x) => { +const div4 = (callback, x) => { setTimeout(callback, randInt(1000), x / 4); }; const computation = waterfall(add5, mult3, sub2, split, add, div4); -computation(console.log, 5) // -> 14 +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); +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); -}</pre> +} +``` -<h3 id="Difference_between_reduce_and_reduceRight" name="Difference_between_reduce_and_reduceRight"><code>reduce</code> と <code>reduceRight</code> の違い</h3> +### `reduce` と `reduceRight` の違い -<pre class="brush: js notranslate">var a = ['1', '2', '3', '4', '5']; +```js +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"</pre> +console.log(right); // "54321" +``` -<h3 id="Defining_Composible_Function" name="Defining_Composible_Function">関数合計の定義</h3> +### 合成可能な関数の定義 -<p>関数合成のコンセプトはシンプルで、n個の関数を組み合わせたものです。これは右から左へと流れ、最後の関数の出力を使用して各関数を呼び出します。</p> +関数合成とは、各関数の出力を次の関数に渡し、最後の関数の出力を最終的な結果とする、関数を組み合わせるための仕組みです。この例では `reduceRight()` を使って、関数合成を実現しています。 -<pre class="brush: js notranslate">/** - * 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 - */ +Wikipedia の [Function composition](<https://en.wikipedia.org/wiki/Function_composition_(computer_science)>) も参照してください。 -const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) +```js +const compose = (...args) => (value) => args.reduceRight((acc, fn) => fn(acc), value) -// Increment passed number -const inc = (n) => n + 1 +// 渡された数値をインクリメントする +const inc = (n) => n + 1 -// Doubles the passed value -const double = (n) => n * 2 +// 渡された数値を 2 倍にする +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 -</pre> - -<h2 id="Specifications" name="Specifications">仕様</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">仕様書</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('ESDraft', '#sec-array.prototype.reduceright', 'Array.prototype.reduceRight')}}</td> - </tr> - </tbody> -</table> +``` + +## 仕様書 + +{{Specifications}} -<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> +## ブラウザーの互換性 -<div> -<p>{{Compat("javascript.builtins.Array.reduceRight")}}</p> -</div> +{{Compat}} -<h2 id="See_also" name="See_also">関連情報</h2> +## 関連情報 -<ul> - <li>{{jsxref("Array.prototype.reduce()")}}</li> -</ul> +- `Array.prototype.reduceRight` のポリフィルが [`core-js`](https://github.com/zloirock/core-js#ecmascript-array) で利用できます +- {{jsxref("Array.prototype.reduce()")}} |