🌟

reduce を使って配列の値の合計値を出してみた

tata_jp

2023/05/02に公開1件

はじめに

配列にある値の合計値を取得したいという時によく for 文や forEach メソッドで値を取得していましたが、reduceメソッドを使ってスマートに取得できることを学んだので今回紹介したいと思います。

コード

下記のコードで配列の nums に格納されている値の合計値を取得して console.log に出力しています。

reduce の基本となる構文は以下のようになっています。

配列.reduce(function(累積値, 要素) { }, 初期値);

※初期値は省略可能ですが、空の配列を処理する可能性がある場合は、エラーを回避するために初期値を指定しておく必要があります(今回のコードでは空配列を操作することはありませんが、初期値の設定の例として0を指定しています)

let nums = [1, 2, 4, 8, 16, 32];
let total_num = nums.reduce((a, b) => {
  return a + b;
}, 0);

ポイントとして、各配列要素でコールバック関数を適用し、その結果を次の要素へと引き継ぎ、最終的な要素での計算結果が返り値となるプロセスが特徴です。
よって計算の流れはこのようになります。

計算1回目: 0 + 1 = 1
計算2回目: 1 + 2 = 3
計算3回目: 3 + 4 = 7
計算4回目: 7 + 8 = 15
計算5回目: 15 + 16 = 31
計算6回目: 31 + 32 = 63 // reduce関数として返す返り値

出力結果

total_num // 63

デモ

まとめ

reduce は配列の要素を単一の値に累積する便利な関数ですが、使ってみないとイメージが中々湧きづらいかと思いますので参考に使ってみていただけると幸いです。
公式Docも下記に載せているので良ければ読んでみてください。

GitHubで編集を提案

Rabee Tech blogPublication

Discussion

nap5

reduceを使ってこういったラッパ作ってもいいかもです。

定義側

const neat = (data: number[]) => {
  return data.reduce(
    (acc, cur, idx, arr) => {
      const max = Math.max(acc.max, cur);
      const min = Math.min(acc.min, cur);
      acc.min = min;
      acc.max = max;
      acc.sum = acc.sum + cur;
      return acc;
    },
    { min: Infinity, max: -Infinity, sum: 0 }
  );
};

使用側

import { test, expect } from "vitest";

import { neat } from ".";

test("[OK]neat", () => {
  const data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  expect(neat(data)).toStrictEqual({ min: 1, max: 10, sum: 55 });
});

demo code.

このあたりの実装等は参考になるかもです。

簡単ですが、以上です。