JSの配列のソート

  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>JSの配列のソート</title>
  6. </head>
  7. <body>
  8. <h1>JSの配列のソート</h1>
  9. <script type="text/javascript">
  10.   // 数字でソート
  11.   ary = new Array("3", "2", "1", "10", "6", "5");
  12.   ary.sort();
  13.   document.write("<h2>数字を数字(文字として)でソート。xxx.sort()</h2>");
  14.   for (i=0; i<ary.length; i++)
  15.   {
  16.     document.write(ary[i] + " - ");
  17.   }
  18.   
  19.   // 数値でソート
  20.   ary = new Array("3", "2", "1", "10", "6", "5");
  21.   ary.sort(function(a,b){return a-b;});
  22.   document.write("<h2>数字を数値でソート。xxx.sort(function(a,b){return a-b;})</h2>");
  23.   for (i=0; i<ary.length; i++)
  24.   {
  25.     document.write(ary[i] + " - ");
  26.   }
  27.   
  28.   // 数値でソート:逆順
  29.   ary = new Array("3", "2", "1", "10", "6", "5");
  30.   ary.sort(function(a,b){return b-a;});
  31.   document.write("<h2>数字を数値でソート:逆順。xxx.sort(function(a,b){return b-a;})</h2>");
  32.   for (i=0; i<ary.length; i++)
  33.   {
  34.     document.write(ary[i] + " - ");
  35.   }
  36.   
  37.   // 文字のソート
  38.   ary = new Array("b", "d", "a", "c", "z", "x");
  39.   ary.sort();
  40.   document.write("<h2>文字のソート。xxx.sort()</h2>");
  41.   for (i=0; i<ary.length; i++)
  42.   {
  43.     document.write(ary[i] + " - ");
  44.   }
  45.   
  46.   // 文字のソート:逆順
  47.   ary = new Array("b", "d", "a", "c", "z", "x");
  48.   ary.reverse(ary.sort());
  49.   document.write("<h2>文字のソート:逆順。ary.reverse(xxx.sort());</h2>");
  50.   for (i=0; i<ary.length; i++)
  51.   {
  52.     document.write(ary[i] + " - ");
  53.   }
  54.   
  55.   // 連想配列(指定したキーの値が数値)のソート
  56.   ary = new Array(
  57.     {id: 1,  item: "ねぎ間",         price: 168},
  58.     {id: 2,  item: "ハツ",           price: 136},
  59.     {id: 3,  item: "レバー",         price: 136},
  60.     {id: 4,  item: "ぼんちり",       price: 136},
  61.     {id: 5,  item: "はらみ",         price: 136},
  62.     {id: 6,  item: "うずら玉子",     price: 136},
  63.     {id: 7,  item: "なんこつ",       price: 136},
  64.     {id: 8,  item: "手羽先",         price: 168},
  65.     {id: 9,  item: "せせり",         price: 136},
  66.     {id: 10, item: "白レバー",       price: 168},
  67.     {id: 11, item: "丸ごとシマウマ", price: 290}
  68.   );
  69.   ary.sort(function(a,b){return a.price-b.price;});
  70.   document.write("<h2>連想配列のソート(指定したキーの値が数値)。xxx.sort(function(a,b){return a.price-b.price;})</h2>");
  71.   for (i=0; i<ary.length; i++)
  72.   {
  73.     document.write("( ");
  74.     document.write(ary[i]["id"] + " - ");
  75.     document.write(ary[i]["item"] + " - ");
  76.     document.write(ary[i]["price"]);
  77.     document.write(" )<br>");
  78.   }
  79.   
  80.   // 連想配列(指定したキーの値が数値)のソート:逆順
  81.   ary = new Array(
  82.     {id: 1,  item: "ねぎ間",         price: 168},
  83.     {id: 2,  item: "ハツ",           price: 136},
  84.     {id: 3,  item: "レバー",         price: 136},
  85.     {id: 4,  item: "ぼんちり",       price: 136},
  86.     {id: 5,  item: "はらみ",         price: 136},
  87.     {id: 6,  item: "うずら玉子",     price: 136},
  88.     {id: 7,  item: "なんこつ",       price: 136},
  89.     {id: 8,  item: "手羽先",         price: 168},
  90.     {id: 9,  item: "せせり",         price: 136},
  91.     {id: 10, item: "白レバー",       price: 168},
  92.     {id: 11, item: "丸ごとシマウマ", price: 290}
  93.   );
  94.   ary.sort(function(a,b){return b.price-a.price;});
  95.   document.write("<h2>連想配列のソート(指定したキーの値が数値)。xxx.sort(function(a,b){return b.price-a.price;})</h2>");
  96.   for (i=0; i<ary.length; i++)
  97.   {
  98.     document.write("( ");
  99.     document.write(ary[i]["id"] + " - ");
  100.     document.write(ary[i]["item"] + " - ");
  101.     document.write(ary[i]["price"]);
  102.     document.write(" )<br>");
  103.   }
  104.   
  105.   // 連想配列(指定したキーの値が文字)のソート
  106.   ary = new Array(
  107.     {id: 1,  item: "ねぎ間",         price: 168},
  108.     {id: 2,  item: "ハツ",           price: 136},
  109.     {id: 3,  item: "レバー",         price: 136},
  110.     {id: 4,  item: "ぼんちり",       price: 136},
  111.     {id: 5,  item: "はらみ",         price: 136},
  112.     {id: 6,  item: "うずら玉子",     price: 136},
  113.     {id: 7,  item: "なんこつ",       price: 136},
  114.     {id: 8,  item: "手羽先",         price: 168},
  115.     {id: 9,  item: "せせり",         price: 136},
  116.     {id: 10, item: "白レバー",       price: 168},
  117.     {id: 11, item: "丸ごとシマウマ", price: 290}
  118.   );
  119.   ary.sort(
  120.     function(a,b)
  121.     {
  122.       var aChar = a.item;
  123.       var bChar = b.item;
  124.       if (aChar < bChar)
  125.       {
  126.         return -1;
  127.       }
  128.       else if (bChar < aChar)
  129.       {
  130.         return 1;
  131.       }
  132.       else
  133.       {
  134.         return 0;
  135.       }
  136.     }
  137.   );
  138.   document.write("<h2>連想配列のソート(指定したキーの値が文字)。xxx.sort(function(a,b){~~~})</h2>");
  139.   for (i=0; i<ary.length; i++)
  140.   {
  141.     document.write("( ");
  142.     document.write(ary[i]["id"] + " - ");
  143.     document.write(ary[i]["item"] + " - ");
  144.     document.write(ary[i]["price"]);
  145.     document.write(" )<br>");
  146.   }
  147.   
  148.   // 連想配列(指定したキーの値が文字)のソート:逆順
  149.   ary = new Array(
  150.     {id: 1,  item: "ねぎ間",         price: 168},
  151.     {id: 2,  item: "ハツ",           price: 136},
  152.     {id: 3,  item: "レバー",         price: 136},
  153.     {id: 4,  item: "ぼんちり",       price: 136},
  154.     {id: 5,  item: "はらみ",         price: 136},
  155.     {id: 6,  item: "うずら玉子",     price: 136},
  156.     {id: 7,  item: "なんこつ",       price: 136},
  157.     {id: 8,  item: "手羽先",         price: 168},
  158.     {id: 9,  item: "せせり",         price: 136},
  159.     {id: 10, item: "白レバー",       price: 168},
  160.     {id: 11, item: "丸ごとシマウマ", price: 290}
  161.   );
  162.   ary.sort(
  163.     function(a,b)
  164.     {
  165.       var aChar = a.item;
  166.       var bChar = b.item;
  167.       if (bChar < aChar)
  168.       {
  169.         return -1;
  170.       }
  171.       else if (aChar < bChar)
  172.       {
  173.         return 1;
  174.       }
  175.       else
  176.       {
  177.         return 0;
  178.       }
  179.     }
  180.   );
  181.   document.write("<h2>連想配列のソート(指定したキーの値が文字):逆順。xxx.sort(function(a,b){~~~})</h2>");
  182.   for (i=0; i<ary.length; i++)
  183.   {
  184.     document.write("( ");
  185.     document.write(ary[i]["id"] + " - ");
  186.     document.write(ary[i]["item"] + " - ");
  187.     document.write(ary[i]["price"]);
  188.     document.write(" )<br>");
  189.   }
  190. </script>
  191. <div style="font-size:10pt;text-align:right;margin-top:0.5em;">
  192. <a href="http://tips.recatnap.info/" target="_top">PCスキルの小技・忘却防止メモ</a> -
  193. <a href="http://tips.recatnap.info/wiki/" target="_top">PCスキルの小技・忘却防止メモのまとめ(wiki)</a>
  194. </div>
  195. <div style="font-size:10pt;text-align:center;margin-top:0.5em;padding:0.5em;border-top:1px solid #ccc;">
  196. Copyright &copy; 2009 by PCスキルの小技・忘却防止メモ. All rights reserved.
  197. </div>
  198. </body>
  199. </html>