配列の要素の合計を計算する

配列の要素にある数値を合算する

配列の要素に数値が入っていて合計値を計算したい場合、reduceメソッドかreduceRightメソッドを使うと手軽に実装することができます。

reduceメソッドは配列の先頭から末尾に向かって要素を1つずつ取り出して計算し、もう1つのreduceRightメソッドは配列の末尾から先頭に向かって要素を1つずつ取り出して計算を行います。

以下の例では、変数numbersに入っている数値を1つずつ取り出して合計値を計算して出力します。
パターン1はreduceメソッドを使い、パターン2ではreduceRightメソッドを使って計算します。

JS コード例

let numbers = [ 1, 5, 10, 100, 200];

// パターン1：reduceメソッド
let sum = numbers.reduce(function(a,b){
  return a + b;
});
console.log(sum);
// 316

// パターン2：reduceRightメソッド
let sum2 = numbers.reduceRight(function(a,b){
  return a + b;
});
console.log(sum2);
// 316

パターン1、2の計算結果は同じになりました。

reduceメソッド、reduceRightメソッドともに、計算する処理を渡しています。
計算処理には引数として、現在までの計算結果を変数aに渡し、続く要素の数値を変数bに渡しています。
それ以外にも要素の添字（インデックス）や元の配列を引数に渡すことができます。

以下の例はreduceメソッドの計算処理に渡す引数を全てconsole.logメソッドで出力して、配列の先頭から計算していく過程を確認していきます。
変数aは現在までの計算結果、計算する値を変数b、計算する値の添字（インデックス）を変数c、元の配列を変数dにそれぞれ渡します。

JS コード例

let numbers = [ 1, 5, 10, 100, 200];

let sum = numbers.reduce(function(a,b,c,d){
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
  return a + b;
});

// 1回目
// a：1
// b：5
// c：1
// d：(5) [1, 5, 10, 100, 200]

// 2回目
// a：6
// b：10
// c：2
// d：(5) [1, 5, 10, 100, 200]

// 3回目
// a：16
// b：100
// c：3
// d：(5) [1, 5, 10, 100, 200]

// 4回目
// a：116
// b：200
// c：4
// d：(5) [1, 5, 10, 100, 200]

console.log(sum);
// 316

配列の長さが5なので、全体で4回の計算が実行されます。
1回目は変数aには先頭の値が入り、次の値「5」を変数bより取得して計算します。
2回目は1回目の計算結果である「6」が変数aに入り、次の要素の数字「10」が変数bに入って再度計算します。
この計算を配列が終わるまで繰り返し、最終的な計算結果を変数sumに受け取るという流れです。

変数cに入る要素の添字（インデックス）は、変数bに入る要素の値が入る点に注意してください。

reduceRightメソッドで同じように引数を出力すると、配列の末尾から先頭に向かって計算していく過程を確認することができます。

JS コード例

let numbers = [ 1, 5, 10, 100, 200];

let sum2 = numbers.reduceRight(function(a,b,c,d){
  console.log(a);
  console.log(b);
  console.log(c);
  console.log(d);
  return a + b;
});

// 1回目
// a：200
// b：100
// c：3
// d：(5) [1, 5, 10, 100, 200]

// 2回目
// a：300
// b：10
// c：2
// d：(5) [1, 5, 10, 100, 200]

// 3回目
// a：310
// b：5
// c：1
// d：(5) [1, 5, 10, 100, 200]

// 4回目
// a：315
// b：1
// c：0
// d：(5) [1, 5, 10, 100, 200]

console.log(sum2);
// 316

1回目の引数をみてみると、に変数aには末尾の値「200」が入り、次の値「100」を変数bに取得して計算しています。
2回目は変数aに1回目の計算結果である「300」が入り、次の値「10」が変数bにセットされて計算され、この計算が3回、4回と続いていきます。

足し算以外の計算をする

reduceメソッドとreduceRightメソッドは足し算以外の計算も可能です。

以下の例はパターン1は引き算（減算）、パターン2は掛け算（乗算）、パターン3は割り算（除算）を行います。

JS コード例

let numbers = [ 1, 5, 10, 100, 200];

// パターン1：引き算（減算）
let calc1 = numbers.reduce(function(a,b){
  return a - b;
});
console.log(calc1);
// -314

// パターン2：掛け算（乗算）
let calc2 = numbers.reduce(function(a,b){
  return a * b;
});
console.log(calc2);
// 1000000

// パターン3：割り算（除算）
let calc3 = numbers.reduce(function(a,b){
  return a / b;
});
console.log(calc3);
// 0.000001

こちらの例では全てreduceメソッドを使っていますが、reduceRightメソッドでもそれぞれの計算を行うことができます。
reduceRightメソッドは末尾から先頭に向かって計算するため、最終的な計算結果の値がreduceメソッドとは異なります。

JS コード例

let numbers = [ 1, 5, 10, 100, 200];

// パターン1：引き算（減算）
let calc1 = numbers.reduceRight(function(a,b){
  return a - b;
});
console.log(calc1);
// 84

// パターン2：掛け算（乗算）
let calc2 = numbers.reduceRight(function(a,b){
  return a * b;
});
console.log(calc2);
// 1000000

// パターン3：割り算（除算）
let calc3 = numbers.reduceRight(function(a,b){
  return a / b;
});
console.log(calc3);
// 0.04

要素の値が文字列の場合

配列の要素に入っている値が数値（Number）ではなく文字列（String）の場合、足し算「+」をすると文字列連結を行います。
それ以外の四則演算では実行はできますが、計算結果は「NaN」となってしまいます。

reduceメソッドは配列の先頭から末尾に向かって要素を1つずつ取り出して計算し、もう1つのreduceRightメソッドは配列の末尾から先頭に向かって要素を1つずつ取り出して計算を行います。

以下の例では、変数numbersに入っている数値を1つずつ取り出して合計値を計算して出力します。
パターン1はreduceメソッドを使い、パターン2ではreduceRightメソッドを使って計算します。

JS コード例

let animals = [ 'lion', 'cat', 'dog', 'dolphin'];

// パターン1：足し算（加算）
let calc1 = animals.reduceRight(function(a,b){
  return a + b;
});
console.log(calc1);
// dolphindogcatlion

// パターン2：引き算（減算）
let cals2 = animals.reduceRight(function(a,b){
  return a - b;
});
console.log(cals2);
// NaN

パターン1の足し算は文字列連結になりますが、連結した結果を確認すると末尾から先頭の順に並んだ「dolphindogcatlion」（dolphin + dog + cat + lion）になります。

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。