jsでmapとreduceで配列と合計の処理をする

やりたかったこととしては、
「クラス名で数をとってきて、その合計を出して、それの数に応じて何かする」です。

ただクラス名を指定するだけだと、111122121111みたいな感じで、それぞれのクラスにある文字列が全部つながって取得されてしまうので、それをmapとreduceで変換してます。



動作サンプル

See the Pen mapとreduceで配列と合計の処理をする by takapen (@takapen) on CodePen.

html

  
アレな剣:2個
  
実質良い剣:1個
  
アレな盾:2個

js（jQueryも必要です）

  function itemSum (){
  if($('#mochimono').length){//要素の有無を判定

    var arr = $('.num').map(function(){//配列に入れる
        return Number( $(this).text() );//Numberでテキストを数に変換
    }).get();

    var sum = arr.reduce((a,x) => a+=x);//配列から合計数を出す

    if (sum == 0) {
      $("#fix-num").html('何も持っていないねむい');
      $("#fix-num").css('color','#c00');
    } else if (sum < 11){
      var numAfter = 11 - sum;
      $("#fix-num").html('あと' + numAfter + '個まで持てるよ');
    } else if (sum == 11){
      $("#fix-num").html('限界まで持ってる');
    } else if (sum > 11){
      $("#fix-num").html('全部で11個まで。これ以上は持てない');
    }

  }
  };
  itemSum();