質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • JavaScript

    20405questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

javascriptで配列したデータを整数順に並び変えた上で、任意のデータだけを表示するにはどうすれば良い?

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 173

TreesShimi

score 10

<script>
function fnckeisan() {
// 入力された数値(sss)
var sss = (document.querySelector('#sss').value);
// 1番または2番の選択
var asall={"a1":1,"a2":2};
var selecas= asall[document.querySelector('#as').value];
// カンマの定義
var conma = new Intl.NumberFormat();
// 各種 関数の定義
var x1;
var x2;
var x3;
var x4;
var x5;
var word ='数値の小さな順に並べ替え';
var wordx1 =`<a href="#">回答(1)</a>`;
var wordx2 =`<a href="#">回答(2)</a>`;
var wordx3 =`<a href="#">回答(3)</a>`;
var wordx4 =`<a href="#">回答(4)</a>`;
var wordx5 =`<a href="#">回答(5)</a>`;
var wordx6 =`<a href="#">回答(6)</a>`;
var wordx7 =`<a href="#">回答(7)</a>`;
var wordx8 =`<a href="#">回答(8)</a>`;
var wordx9 =`<a href="#">回答(9)</a>`;
var wordx10 =`<a href="#">回答(10)</a>`;
var wordx11 =`<a href="#">回答(11)</a>`;
var wordx12 =`<a href="#">回答(12)</a>`;
var wordx13 =`<a href="#">回答(13)</a>`;
var wordx14 =`<a href="#">回答(14)</a>`;
var wordx15 =`<a href="#">回答(15)</a>`;
var table1 =`<table><td>`;
var table2 =`</td></table>`;
// 選択(1番または2番)によってx1~x5の数値が変わる
switch (selecas)
            {
                case 1:
                    x1 = 10.5 , x2 = 20.6 , x3 = 30.9 , x4 = 40.8 , x5 = 50.7;
                    break;
                case 2:
                    x1 = 150.8 , x2 = 250.7 , x3 = 350.3 , x4 = 450.6 , x5 = 550.8;
                    break;
               }
// 入力されたsssの値(100未満または100以上)によってans1~ans15の計算式および結果が変わる
if (sss >= 100){
 ans1 = (sss - 300) * x1;
 ans2 = (sss - x2);
 ans3 = (sss - x3) * x3;
 ans4 = (sss - x4) * x4; 
 ans5 = (sss - 300) * x5;
 ans6 = (sss - 20) * x1;
 ans7 = (sss - x2 - 30);
 ans8 = (sss - x3) * x1 + 400;
 ans9 = (sss - x4) * x2 * x2; 
 ans10 = (sss - 300) * x5 * x1;
 ans11 = (sss - 100) * x1 + 400;
 ans12 = (sss - x2 + x5);
 ans13 = (sss - x3) * x3;
 ans14 = (sss - x2) * x4 + 1000; 
 ans15 = (sss - 300) * x3 * x3;
  }else if (sss < 100){  
 ans1 = (sss - 100) * x5;
 ans2 = (sss - x4) * x4;
 ans3 = (sss - x3) * x3;
 ans4 = (sss - x2);
 ans5 = (sss - 100) * x1;
 ans6 = (sss - 300) * x1 * x1;
 ans7 = (sss - x2) * x2;
 ans8 = (sss - x3) * x3 + 2100;
 ans9 = (sss - x4) * x4 + 6000; 
 ans10 = (sss - 300) * x5 + 100;
 ans11 = (sss - 300) * x1 - 300;
 ans12 = (sss - x2) + 4000;
 ans13 = (sss - x3) * x3 * x4;
 ans14 = (sss - x4) * x4 * x5 + 100; 
 ans15 = (sss - 300) * x5 - 30;
 }
// 計算結果の表示(2番を選んだ場合は、こちらで指定した結果については表示されない)
document.querySelector('#ansall').innerHTML = word +("\n")+
[
  wordx1+conma.format(ans1),
  selecas==2?'':(wordx2+conma.format(ans2)),
  wordx3+conma.format(ans3),
  selecas==2?'':(wordx4+conma.format(ans4)),
  wordx5+conma.format(ans5),
  selecas==2?'':(wordx6+conma.format(ans6)),
  wordx7+conma.format(ans7),
  selecas==2?'':(wordx8+conma.format(ans8)),
  wordx9+conma.format(ans9),
  selecas==2?'':(wordx10+conma.format(ans10)),
  wordx11+conma.format(ans11),
  selecas==2?'':(wordx12+conma.format(ans12)),
  wordx13+conma.format(ans13),
  selecas==2?'':(wordx14+conma.format(ans14)),
  wordx15+conma.format(ans15),
  ].filter(function(x){
    return x.match(/\d/);
  }).sort(function(x,y){
    return (x.match(/(\d+)/)[1])>(y.match(/(\d+)/)[1]);
  }).join("\n");
}
</script>
<form>
<td>数値を入力してください(1~300)</td>
<input type="text" id="sss" type="number" min="0" max="300" value="0">
<td>1番~5番の計算式を選んでください</td>
<select id="as">
<option value="a1">1番</option>
<option value="a2">2番</option>
</select>
 <br>
<input type="button" value="計算" onclick="fnckeisan();">
 <br>
<input type="reset" value="リセット">
<div id="ansall" style="white-space:pre;"></div>
</form>

上記のプログラムにおいて、計算されたans1~ans15の結果に応じて、それぞれを数値の小さな順に並び替えた上で、任意の結果だけを表示できるようにしたいと考えています。

(具体的には、ans1~ans15の計算結果の最小値から順に、5個だけ表示できるようにしたり、9個表示できるようにしたり、または全部を表示できるようにしたい)

しかし、現行のプログラムでは15個の結果すべてを表示することしかできず、さらに3つの問題点があり、どう改善すれば良いか分かりません。

① 出力されるans1~ans15の数値はカンマ付きで表示をしたいが、カンマ付きにすると並び替えがうまく機能しない。どうすると良いか?

② 出力するansの数が10個以内であれば、とりあえず並び替えは機能するが、10個を超えると機能しない。(\n)の扱いをどうすると良いか?

③ 並び替えの際に、負の整数のマイナスを無視して並び替えてしまう。どうすると良いか?

丸投げのように思われるかもしれませんが、改善の仕方をご教授いただけると大変ありがたく思います。

決して丸投げにはしていませんが、サンプルないし改善プログラムを提供いただけましたら、こちらで頑張って解読しながら学ばせていただきますので、どうぞよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

① 出力されるans1~ans15の数値はカンマ付きで表示をしたいが、カンマ付きにすると並び替えがうまく機能しない。どうすると良いか?

カンマをとってparseInt(or parseFloat)して処理するか
カンマを付ける前の数値を配列にいれておく

② 出力するansの数が10個以内であれば、とりあえず並び替えは機能するが、10個を超えると機能しない。(\n)の扱いをどうすると良いか?

10個とか数量ではなく別の理由だと思います

③ 並び替えの際に、負の整数のマイナスを無視して並び替えてしまう。どうすると良いか? 

そもそもマイナスがあるという話ではなかった

 そもそも

拡張する予定があるなら、データの持ち方をかえてください

document.querySelector('#ansall').innerHTML = word +("\n")+
[
  {val:ans1 ,text:wordx1+conma.format(ans1)},
  {val:ans2 ,text:selecas==2?'':(wordx2+conma.format(ans2))},
  {val:ans3 ,text:wordx3+conma.format(ans3)},
  {val:ans4 ,text:selecas==2?'':(wordx4+conma.format(ans4))},
  {val:ans5 ,text:wordx5+conma.format(ans5)},
  {val:ans6 ,text:selecas==2?'':(wordx6+conma.format(ans6))},
  {val:ans7 ,text:wordx7+conma.format(ans7)},
  {val:ans8 ,text:selecas==2?'':(wordx8+conma.format(ans8))},
  {val:ans9 ,text:wordx9+conma.format(ans9)},
  {val:ans10,text:selecas==2?'':(wordx10+conma.format(ans10))},
  {val:ans11,text:wordx11+conma.format(ans11)},
  {val:ans12,text:selecas==2?'':(wordx12+conma.format(ans12))},
  {val:ans13,text:wordx13+conma.format(ans13)},
  {val:ans14,text:selecas==2?'':(wordx14+conma.format(ans14))},
  {val:ans15,text:wordx15+conma.format(ans15)},
  ].filter(function(x){
    return x.text.match(/\d/);
  }).sort(function(x,y){
    /* return x.val>y.val; */ //訂正
    return x.val>y.val?1:-1;
  }).map(function(x){
  }).map(function(x){
    return x.text
  }).join("\n");
}

 切り捨ててからカンマをつける

document.querySelector('#ansall').innerHTML = word +("\n")+
[
  {val:ans1 ,text:wordx1+conma.format(Math.floor(ans1))},
  {val:ans2 ,text:selecas==2?'':(wordx2+conma.format(Math.floor(ans2)))},
  {val:ans3 ,text:wordx3+conma.format(Math.floor(ans3))},
  {val:ans4 ,text:selecas==2?'':(wordx4+conma.format(Math.floor(ans4)))},
  {val:ans5 ,text:wordx5+conma.format(Math.floor(ans5))},
  {val:ans6 ,text:selecas==2?'':(wordx6+conma.format(Math.floor(ans6)))},
  {val:ans7 ,text:wordx7+conma.format(Math.floor(ans7))},
  {val:ans8 ,text:selecas==2?'':(wordx8+conma.format(Math.floor(ans8)))},
  {val:ans9 ,text:wordx9+conma.format(Math.floor(ans9))},
  {val:ans10,text:selecas==2?'':(wordx10+conma.format(Math.floor(ans10)))},
  {val:ans11,text:wordx11+conma.format(Math.floor(ans11))},
  {val:ans12,text:selecas==2?'':(wordx12+conma.format(Math.floor(ans12)))},
  {val:ans13,text:wordx13+conma.format(Math.floor(ans13))},
  {val:ans14,text:selecas==2?'':(wordx14+conma.format(Math.floor(ans14)))},
  {val:ans15,text:wordx15+conma.format(Math.floor(ans15))},
  ].filter(function(x){
    return x.text.match(/\d/);
  }).sort(function(x,y){
    return x.val>y.val?1:-1;
  }).map(function(x){
    return x.text
  }).join("\n");
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/21 11:01

    追記しました参考にしてください
    ソート用にval、表示用にtextを用意しました

    キャンセル

  • 2018/09/21 14:20

    yambejpさん、さっそくご教授いただきありがとうございます!参考にさせてもらってます!

    出力結果のうち、任意のデータを表示するためにはmapを使うということでしょうか?
    追記していただいたプログラムだけでは機能しなかったので、やはり何かしらの追加ないし修正が必要ということですよね。。。

    ちなみに、迷惑かけついでにもう一つ質問なのですが、数値の表示の際に、カンマ付きと小数点以下を切り捨て表示を同時に行うにはどうすれば良いでしょうか?
    conma.formatだけでは小数点以下が表示され、Math.floorだと小数点以下は表示されませんが、カンマ付きにならないので、ちょっと困ってます。。。

    キャンセル

  • 2018/09/21 14:38

    > 出力結果のうち、任意のデータを表示するためにはmapを使うということでしょうか?

    うまく理解しているか微妙ですが
    今回表示用に用意した配列の中身がobjectなのでfilterしてsortした後で
    objectの中のtextだけを抽出するのがmapです。
    最終的にはtextだけが入った配列ができあがるのでjoinで改行で繋いだ文字列を返しています

    キャンセル

  • 2018/09/21 14:39

    > 追記していただいたプログラムだけでは機能しなかった

    命題の
    「// 計算結果の表示(2番を選んだ場合は、こちらで指定した結果については表示されない)」
    以下を私のソースに書き換えるだけです。

    キャンセル

  • 2018/09/21 14:40

    > カンマ付きと小数点以下を切り捨て表示を同時に行う

    切り捨ててからカンマをつければよいでしょう

    キャンセル

  • 2018/09/21 15:33

    お返事ありがとうございます!
    ということは、15個の結果を並び替えた上で、例えば8個だけ表示するというのは、また別のプログラムを組まなければならないということですね。。。

    あと、教わったプログラムの並び替えの結果なんですが、例えば500を入力して1番の選択で計算すると、15個の表示がされますが、上から5つは並び替えが出来ておらず、その下10個についてはうまく並び替えられているという状況なんです。。。

    切り捨ててからカンマをつけるというのも、今も色々と調べながら試しているのですが、なかなかうまくいきません(××)

    何度もアドバイスを求めてしまい申し訳ありません。

    キャンセル

  • 2018/09/21 15:40

    ああ、ごめんなさいsortが中途半端でした
    1箇所修正したので再確認ください

    キャンセル

  • 2018/09/21 15:47

    「切り捨ててからカンマをつける」も対応版書いておきました

    キャンセル

  • 2018/09/21 18:29

    yambejpさん、返事が遅くなりました(汗)
    何度もご対応いただき本当にありがとうございます!
    教えていただいたプログラムでうまく機能しています!

    このプログラムはサンプルみたいなものなので、これからも拡張する予定ではありますが、また色々と学ばせてもらいながら頑張ります!!
    ありがとうございました!感謝です!!

    キャンセル

同じタグがついた質問を見る

  • JavaScript

    20405questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。