JavaScriptでreduce()を使用する方法

配列データの各要素を値に累積するには

reduce() が最適です。この記事では JavaScript での reduce() の使い方を詳しく紹介します。

具体的な内容を見ていきましょう。

次のような配列があるとします。

var numbers = [1,2,3,4,5,6,7,8,9];

var strings = ['苹果','香蕉','梨子','葡萄','荔枝'];

この例では、数値データを格納する配列と文字列データを格納する配列を準備しました。

reduce() を使用する最も明白な方法は、そのような配列に格納されているすべての値の値を計算することです。

数値の場合は合計値を計算でき、文字の場合は個々の文字列を連結できます。

reduce() の使用方法を見てみましょう。

reduce() は、ターゲット配列に対して任意の関数を実行できます。

数组.reduce(function(累积值, 元素) { })

第一引数の「累積値」は、配列要素を順番に処理して得られる値を表します。

2 番目のパラメーター「element」は、現在処理されている配列要素を表します。

この関数では「return」を使用し、任意の処理をリターンすることで結果を累積値に保持し、最終的に値を取得することができます。

具体的な例を見てみましょう

配列の各要素を合計します

コードは次のとおりです

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b) {
  return a + b;
})
console.log(result);

実行結果は次のとおりです

この例では、1 から 9 までの数値を格納する配列に対して、reduce() が実行されます。

関数では、累積された値が表示され、各要素が単純に追加されます。

は最初の処理で「1 2」となり、その合計を累積値に格納し、次の処理で「3 3」を実行します。

これにより、実行結果の出力はすべての値を合計すると「45」となります。

最後に 1 つ説明する必要があります。

reduce() 関数で「break」割り込み処理メソッドを使用することは許可されていないため、代わりに次のような割り込みがあります。配列のインデックス番号を使用します。 以下のメソッドを簡単に見てみましょう。

実際には、reduce() 関数には最大 4 つのパラメータを指定できます。

配列.reduce(function(累积值, 元素, 索引号, 数组) { })

3 番目のパラメータ「インデックス番号」は、現在処理されている配列のインデックス番号を表します。

4 番目のパラメーター「array」は、現在処理されている配列自体を表します。

このパラメータを使用すると、次のように割り込み処理を実装できます。

var numbers = [1,2,3,4,5,6,7,8,9];
var result = numbers.reduce(function(a, b, index, arr) {
  if(index >= 3) arr.splice(1);
  return a + b;
});
console.log(result);

実行結果は以下の通りです

reduce()関数のIF文に注目してください。

条件式に「index>=3」と記述することで、配列の3番目のインデックス番号になった場合に任意の処理を行うことができます。

プロセスは「arr.splice(1)」となり、3 番目のインデックス以降の配列要素をすべて削除します。

これでreduce()の処理が終了するので、breakと同じ機能が実行できるようになります。

以上がJavaScriptでreduce()を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。