ループ処理で出た値を配列に格納させたい

Question

目標：合計金額を出したい。

現状：totalpriceが一回一回のループ処理で出ている。

自分が考えた対策法：空の配列を作ってそこに、ループ処理の結果を一つずつ入れていき、popメソッドで最後の値だけ取り出す。

しかし、そのやり方が分からなく、調べても出てこない為、質問させていただきました。

'use strict';

$(function () {

        const tops = [
             {name: `UクルーT`, price: 1000},
             {name: `ワッフルクルーT`, price: 1500},
             {name: `ドライカノコポロシャツ`, price: 1990},
             {name: `UオーバーサイズクルーT`, price: 1500},
             {name: `UグラフィックT`, price: 1500},
             {name: 'エアリズムT', price: 990}

            ];
        // console.log(t[Math.floor(Math.random()*t.length)]);
        // result.textContent = t[Math.floor(Math.random()*t.length)].name;

        const bottoms = [
            {name: '感動パンツ', price: 3990},
            {name: 'ウルトラストレッチスキニージーンズ', price: 3990},
            {name: 'EZYアンクルパンツ', price: 2990},
            {name: 'チノハーフパンツ', price: 1990},
            ];
        
        $('#search').on('click', function() {
            let money = $('.main-top__content--money').val();
            let style = $('.main-top__content--style').val();

            let totalprice = 0;

            $('#result').empty();
            $('#totalPrice').empty();

            while (totalprice <= money) {
                let nonce = Math.floor(Math.random()*tops.length);
                let name = tops[nonce].name;
                let price = tops[nonce].price;

                totalprice += price;   
                
                if (totalprice > money) {
                    break
                };

                // 空の配列を作ってtotalpriceの値をひとつずつ入れていき、pop()で最後の値をとろうとした
                // let sum = [];
                // sum.push(totalprice);
                // console.log(sum);
                // let last = sum.pop();
                
                $('#result').append("商品名"+ "&nbsp"+ name + "&nbsp" + price + "円" + "<br>");
                $('#totalPrice').append("合計金額"+ totalprice + "円");
                // append(); 要素の追加
                //合計金額A円合計金額A＋B円合計金額A＋B+C円みたいになってしまう
            }
            
        });

});
コード

Answer 1

前提知識の説明

while(/* 条件 */) { /* 処理 */ } 構文は、繰り返し処理のための構文で、条件部分に記述した式が新となる限り、 処理の部分に記述したコードを 繰り返し 実行します。

質問のコードですと、以下の部分が while 構文の 処理 の部分として記述されているので、条件を満たす限り繰り返し実行される部分になります。

                let nonce = Math.floor(Math.random()*tops.length);
                let name = tops[nonce].name;
                let price = tops[nonce].price;

                totalprice += price;   

                if (totalprice > money) {
                    break
                };

                // 空の配列を作ってtotalpriceの値をひとつずつ入れていき、pop()で最後の値をとろうとした
                // let sum = [];
                // sum.push(totalprice);
                // console.log(sum);
                // let last = sum.pop();

                $('#result').append("商品名"+ "&nbsp"+ name + "&nbsp" + price + "円" + "<br>");
                $('#totalPrice').append("合計金額"+ totalprice + "円");
                // append(); 要素の追加
                //合計金額A円合計金額A＋B円合計金額A＋B+C円みたいになってしまう

そしてコード中に記述されている通り、

$('#totalPrice').append("合計金額"+ totalprice + "円");

は要素を 追加 するメソッドなので、実行するたびに文字列が要素に追加されていくことになります。

質問者様が考えられた解決法について

普通そんな方法はとりませんが、一応解説しますと、
ループ(while) より前で、

const arr = [];

などとし、ループの中で、

arr.push("合計金額"+ totalprice + "円")

として要素を追加していき、ループの後で、

 $('#totalPrice').append(arr.pop());

とすれば解決です。

調べるまでもないくらいそのままな記述で大丈夫です。

そもそも……

ループの度に出力を追加するコードが記載されていることが問題なのですから、ループを終えた後に一回だけ実行すればOKです。
つまり、

while (totalprice <= money) {
  // ... 省略 ... //
  $('#result').append("商品名"+ "&nbsp"+ name + "&nbsp" + price + "円" + "<br>");
  // $('#totalPrice').append("合計金額"+ totalprice + "円");
  // 上の一行を削除
}
$('#totalPrice').append("合計金額"+ totalprice + "円");
  // ↑代わりにここに記述

とすればOK なはずです。

Comments

[Kousukeh10969]

回答ありがとうございます。
一つ目の配列の指定した方法では無事解決しました。

回答者様の二つ目の方法は実際に試していたのですが、その方法でやるとwhile文の外に記述するため(?)、while文のifの制御構文が効かなくなり、totalprice >moneyという結果になってしまったので、どうしたらよいかということで今回質問させていただきました。

[R.Mizukami]

ああ失礼、見落としておりました。足した後に条件判定をしているので、意図するところと違う結果になるのですね。
二つ目の方法では、足した後の値の条件を確認してから実際に加算する、などの工夫が必要でした。
一つ目の方法でも結果は得られますが、足し合わせる回数が非常に多くなる場合には動作が遅くなり、メモリをがっつり占有するので気を付けてください。

[Kousukeh10969]

なるほど、ありがとうございます。