# 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 非同期処理 async と await のメモ
Nuxtjs 3 に Ant design Vue を使う
javascript  指定場所にスムーズにスクロールする方法
Nuxt.js と Ant Design Vue 2 テーマカスタマイズ
react 強制的にレンダリングする方法
JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション
Jsconfig と Tsconfig
Cookie localStorage sessionStorage の違い
Javascript var let const 変数宣言の違い
Javascript 電話番号フォーマット
国際化 i18n と地域化 L10N
大きいファイルをスライス分割してアップロード
javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い
Javascript DataTables で excel 風 table 作る
javascript 配列 重複排除
vuejs back to top button component 作成
bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
Nuxtjs 動的なルーティング静的ページ自動生成
キーコード取得 & キーコード一覧
Sweet Alert swal に複数 content
moment.js 使って日本語曜日対応
vuejs v-if と v-show の違い
javascript 開発で出会った TypeError
開発時によく使うゼロ埋めパディング作業まとめ
ReferenceError: location is not defined
vuejs で omisejapan の決済フォーム作成した時のメモ
vuejs vuex が難しいわけではないけど覚えるのに時間かかる
ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie
vuejs スクロールでナビバー表示非表示
nuxtjs vue router params query ルートから取得できるもの
vuejs 開発時に遭遇したエラーリスト
値段をカンマと円マーク表示 vuejs money-format filter 自作
vuejs-datepicker 使ってカレンダー表示 日本語多言語対応
スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について
nuxtjs と codeigniter で jwt システム構築
nodejs 使う時のエラーたち
javascript で作る html から PDF 変換 pdfmake の日本語対応
javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay
vue hook 使って vuejs コンポーネントライフサイクル監視
Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ
正規表現一覧 よく使う検索・置換のパターン
javascript password generator ランダム文字列パスワード作成
javascript 日本語 shift-js 対応 CSV ダウンロード
nuxt cordova web ハイブリッドアプリ作成した時のメモ
chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
開発におけるコーディングルール・規約
laravel に vuejs 使うための初期設定
polyfill という宝物で開発時の ie11 対応した時のメモ