Hapicode

# 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 のメモ

javascript async await 使って非同期処理のいろいろ...

Nuxtjs 3 に Ant design Vue を使う

Ant-design-vue 4.x使うためのNuxt plugin 設定...

Nuxt.js と Ant Design Vue 2 テーマカスタマイズ

Nuxt.jsとAnt Design Vue 2を使用してテーマカスタマイズしてみました。...

JavaScript ライブラリ aos.js 使ってスクロール連動アニメーション

aos.js ライブラリ使ってHTML要素がスクロールと連動してアニメーションをします。...

Cookie localStorage sessionStorage の違い

Cookie とWeb Storage localStorage sessionStorageの違い...

大きいファイルをスライス分割してアップロード

大きいファイルを分割アップロードする方法、並行処理と失敗した際の自動アップロードします。...

Javascript DataTables で excel 風 table 作る

JQueryでエクセル風テーブルの一部だけ横スクロールできるようにDataTables使ってみました...

javascript 配列 重複排除

javascriptで配列重複排除の複数やり方をまとめ、よく使うfilterとEcmaScript ...

bootstrap vuejs 使って generate する際に babel が icons ファイル max 500KB エラー
開発時によく使うゼロ埋めパディング作業まとめ

mysql twig phpとjavascriptでよく使うゼロ埋めのいろいろ...

nuxtjs と codeigniter で jwt システム構築

nuxtjsとcodeigniterでシステム構築する際のメモ...

javascript 日本語 shift-js 対応 CSV ダウンロード

javascript shift-jsエンコード CSVダウンロードが必要になったので、作ってみまし...

開発におけるコーディングルール・規約

コーディングルールと規約を大事にする、複数人で開発しても、一人で開発してもメンテナンスやコードのわか...

laravel に vuejs 使うための初期設定

PHPフレームワークlaravelにvuejs入れる時の初期設定まとめ、備忘録的...

javascript 　指定場所にスムーズにスクロールする方法

クリックして指定のアンカーにスクロールするjavascript作成しました。scrollToとscr...

react 強制的にレンダリングする方法

React使って値は変更されるけど、画面描写されないトラブルの対応方法...

Jsconfig と Tsconfig

javascriptで開発する際に使うjsconfigとtsconfigのjsonファイルとはなにか...

Javascript var let const 変数宣言の違い

javascript varとlet 違い これからはvarよりlet constを書くようにすべき...

Javascript 電話番号フォーマット

固定電話 携帯電話 フリーダイヤルなどの電話番号をハイフォン入で自動フォーマットしてくれるjavas...

国際化 i18n と地域化 L10N

i18n が internationalization の略で国際化という意味で、地域化は L10n...

javascript 文字列と配列検索 indexOf findIndex find some includes 関数の違い

よく使う文字列と配列検索関数比較 javascript 文字列と配列検索 indexOf findI...

vuejs back to top button component 作成

vue でトップに戻るボタンを作ることがよくありますが、ライブラリー使わずに実現してみました。...

Nuxtjs 動的なルーティング静的ページ自動生成

Nuxtjs 動的なルーティング使ってAPIとJSONで静的ページ一括生成してSEO対策...

キーコード取得 ＆ キーコード一覧

javascriptで Tabキー 無効化をする仕事があり、キーコードの一覧を備忘録的にメモ...

Sweet Alert swal に複数 content

javascriptアラートを綺麗に表示する粋なライブラリSweetAlertのswalの中のcon...

moment.js 使って日本語曜日対応

momentjsの日本語表示、曜日の日本語表示と略称表示について...

vuejs v-if と v-show の違い

vuejs ifとshowの条件分岐について詳しく解説 よく使われる v-if と v-show の...

javascript 開発で出会った TypeError

vuepress で Cannot read property 0 of undefinedのタイプ...

ReferenceError: location is not defined

ssrレンダリングする時に出る location is not defined エラー##...

vuejs で omisejapan の決済フォーム作成した時のメモ

フロント開発 omisejapan カードペイメント vuejs でフォーム開発する時のメモ...

vuejs vuex が難しいわけではないけど覚えるのに時間かかる

vuejsの魅力であるvuexのいろいろメモしました。モジュール型のgettersの使い方とか引数の...

ブラウザーで動く javascript のクッキー操作ライブラリ js-cookie

フロントのブラウザー側で動くjs cookieについて...

vuejs スクロールでナビバー表示非表示

vuejsで上にスクロールするとナビメニューが表示、下にスクロールすると非表示の切り替えをやってみま...

nuxtjs vue router params query ルートから取得できるもの

nuxtjs使うなら必ずvueルーターのパラメータやクエリーを取得したいときがくる。...

vuejs 開発時に遭遇したエラーリスト

改めてvuejsのドキュメント読みながら只管エラーを出しまくっています。...

値段をカンマと円マーク表示 vuejs money-format filter 自作

vuejsで円マークカンマ区切りのフィルター作りました。...

vuejs-datepicker 使ってカレンダー表示 日本語多言語対応

bootstrap-vue2.5 カレンダーコンポーネントがでるまでの辛抱でvuejs-datepi...

スクロールバー自由にカスタマイズできる vue-perfect-scrollbar について

スクロールイベント監視、発火の時に使える便利ツールvue-perfect-scrollbarについて...

nodejs 使う時のエラーたち

node学習しながらエラーの原因などを調べてメモります。...

javascript で作る html から PDF 変換 pdfmake の日本語対応

html pdf 変換する際に使っていたjavascriptライブラリpdfmakについて調べたこと...

javascript 楽しく遊ぼう!メッセージつぶやくウシ cowsay

楽しくjavascriptを遊ぶ用のパッケージcowsayについてのメモ...

vue hook 使って vuejs コンポーネントライフサイクル監視

vuejsのhook使って開発を便利にしていこう...

Javascript vuejs の validation 正規表現でフォームチェック作ったときのメモ

電話番号チェック・メールアドレスチェック・文字チェック・郵便番号のチェックに使えるjavascrip...

正規表現一覧 よく使う検索・置換のパターン

よく使う正規表現、文字検索・置換をまとめてみました。...

javascript password generator ランダム文字列パスワード作成

javascriptで大文字・小文字・数字・記号対応のランダムパスワードつくることがありますが、vu...

nuxt cordova web ハイブリッドアプリ作成した時のメモ

vueのnuxtjsのSPAでハイブリッドアプリを作る、コールドバーという神使って...

chartjs でチャートコンポネント作ってみた時のメモ bar+line+pie
polyfill という宝物で開発時の ie11 対応した時のメモ