#javascript reduce 連想配列の合計計算覚えよう

忘れぽい人は苦痛で仕方ない javascript あるある reduce 編。
javascript の sum 計算で今まで reduce で配列の合計を求めて来ましたが、連想配列になるとあっれどうだったっけの自分に、さようならしたいので、今更 reduce を書きまとめました。

#Reduce(リデュース)とは

Reduce(リデュース)とは、製品をつくる時に使う資源の量を少なくすることや廃棄物の発生を少なくすること
↑ リユース検定試験に必ず出題される項目です。ここの javascript とは無関係

英語は一緒で自己流の理解からすると、javascript の reduce とは配列の資源を再利用するための関数です。配列分解して処理するなら foreach も map も filter もできますが、reduce は引数にアキュムレータ(容器)を用意していて、配列の合計などでよく使われます。

reduce 関数の構文

arr.reduce(callback[, initialValue])

reduce 関数 コールバックの4 つの引数

callback(アキュムレータ,現在値,現在のインデックス,ソース配列)

現在のインデックスとソース配列はオプション

#一般配列 合計計算



 





const array = [1, 2, 3, 4];

const sum = array.reduce((accumulator, current) => accumulator + current);

console.log(sum);

// output: 10

#連想配列 合計計算









 





const items = [
  { id: 1, name: "apple", price: 100 },
  { id: 2, name: "orange", price: 200 },
  { id: 3, name: "tomato", price: 300 },
  { id: 4, name: "banana", price: 400 },
  { id: 5, name: "grape", price: 500 }
];

const total = items.reduce((sum, i) => sum + i.price, 0);

console.log(total);

// output: 1500

構文:arr.reduce(callback[, initialValue])ですが、連想配列で reduce 使う場合はinitialValue必須です。
なぜなら、initialValue 設定しなかった場合、配列の最初の要素が使用されます
因みに、空の配列を initialValue なしで reduce() を実行すると TypeError を throw します。
連想配列だと1 つ目のオブジェクトが代入されるので、"[object Object]200300400500"みたいの出力されてしまいます。

なので、const total = items.reduce((sum, i) => sum + i.price, 0);initialValue 初期値ここではゼロにしていますがちゃんと設定するような習慣にしましょう!

#vuejs おまけ

  data() {
    return {
      items: [
        { id: 1, name: "apple", price: 100 },
        { id: 2, name: "orange", price: 200 },
        { id: 3, name: "tomato", price: 300 },
        { id: 4, name: "banana", price: 400 },
        { id: 5, name: "grape", price: 500 }
      ],
      postage: 500
    };
  },
  computed: {
    total() {
      return this.items.reduce(
        (sum, i) => sum + (i.price || 0),
        Number(this.postage)
      );
    }
  },

結果 total は 2000 になります。

reduce は自前の容器持ちの sum 合計計算に強い関数です。やってみて楽しい関数です。

2020-02-25
  • javascript

関連記事

javascript 日本語 shift-js 対応 CSV ダウンロード
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
ReferenceError: location is not defined
nodejs 使う時のエラーたち
vuejs i18n の html-lang と font 設定
正規表現一覧 よく使う検索・置換のパターン
開発時によく使うゼロ埋めパディング作業まとめ
javascript 面接問題のいろいろ
javascript で作る html から PDF 変換 pdfmake の日本語対応
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
nuxtjs と codeigniter で jwt システム構築
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay