# 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
  • vuejs

関連記事

正規表現一覧 よく使う検索・置換のパターン
javascript 日本語 shift-js 対応 CSV ダウンロード
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
polyfill という宝物で開発時の ie11 対応した時のメモ
ReferenceError: location is not defined
moment.js 使って日本語曜日対応
nodejs 使う時のエラーたち
nuxt cordova web ハイブリッドアプリ作成した時のメモ
Sweet Alert swal に複数 content
javascript 開発で出会った TypeError
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
値段をカンマと円マーク表示 vuejs money-format filter 自作
vue hook 使って vuejs コンポーネントライフサイクル監視
vuejs v-if と v-show の違い
vuejs i18n の html-lang と font 設定
nuxtjs vue router params query ルートから取得できるもの
vuejs スクロールでナビバー表示非表示
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
vuejs 開発時に遭遇したエラーリスト
開発時によく使うゼロ埋めパディング作業まとめ
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
nuxtjs と codeigniter で jwt システム構築
laravel に vuejs 使うための初期設定
javascript で作る html から PDF 変換 pdfmake の日本語対応
vuejs で omisejapan の決済フォーム作成した時のメモ
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay