JavaScript で配列内をソートしたときの挙動について

JavaScript でデータの並べ替えを利用してみたいと思い、ミネラルウォーター (無発泡) 成分比較表を作って .sort() 関数の実験をしてみたので、今回は作ってみて理解したことをメモしておきます。

sort() メソッドの機能

sort() メソッドはそのまま使用した場合、配列内を文字列とみなして昇順(小→大)に並べ替えます。

例題として以下の配列があるとします。

  • var array = [
    • [2,6,43,15,32,25],
    • [13,'Gh',9,'ACQ',7,'bbb'],
    • [8,103,'zzz',92,'吾輩','あああ']
  • ];

この多次元配列の、1つ目の配列の sort() した際の表示をしてみると以下のようになります。

  • document.write(array[0].sort());
  • 15,2,25,32,43,6

数値として並べ替えするには、sort() 内で比較する文字列を関数に渡し、return の際に計算を行うことで数値として判別されるようになります。

  • document.write(array[0].sort(function(a,b){return a-b;}));
  • 2,6,15,25,32,43

降順にする場合は、return の値を b-a に変更します。

ここで問題なのが、2つ目の配列のように文字列が混ざっている場合で、このままでは数値に変換されないためにうまく動きません。

  • document.write(array[1].sort(function(a,b){return a-b;}));
  • Gh,ACQ,7,9,13,bbb

ということで、数値で並べ替えしつつ文字列を後ろに abc 順に並べ替えたい場合は、if 文と文字列を小文字か大文字かに揃えることで可能になります。

下の例では、最初に a-b が可能なら数値として、そうでないなら toString() で文字列化し toLowerCase() で小文字化してから比較を行っています。

  • document.write(array[1].sort(function(a,b){
    • var a_s = a.toString().toLowerCase();
    • var b_s = b.toString().toLowerCase();
    • if(a-b){
      • return a-b;
    • }else if(a_s > b_s){
      • return 1;
    • }else if(a_s < b_s){
      • return -1;
    • }else{
      • return 0;
    • }
  • });
  • 7,9,13,ACQ,bbb,Gh

なお、JavaScript では大文字小文字は別々の文字なので、一方に揃えないと分けて並べ替えされてしまいます。

多次元配列間でのソート

最後に、多次元配列間で配列ごと並べ替える場合は、比較したい場所を指定することでその値で比較して、配列ごと並べ替えることができます。

ここでは、配列をすべて横に表示すると長くなってしまううえ見づらいので、改行を加えて連結してから表示してみます。

  • array = array.sort(function(a,b){
    • var a_s = a[2].toString().toLowerCase();
    • var b_s = b[2].toString().toLowerCase();
    • if(a[2]-b[2]){
      • return a[2]-b[2];
    • }else if(a_s > b_s){
      • return 1;
    • }else if(a_s < b_s){
      • return -1;
    • }else{
      • return 0;
    • }
  • }));
  • for(i=0;i<array.length;i++){
    • array[i] = array[i].join() + '<br />';
  • };
  • array = array.join('');
  • document.write(array);
結果
  • 13,Gh,9,ACQ,7,bbb
  • 2,6,43,15,32,25
  • 8,103,zzz,92,吾輩,あああ

この例題では、配列ごとに [2] の場所を指定しているので、(43)と(9)と('zzz')を比較してから配列ごと並べ替えています。

なお、連想配列の場合も多次元配列と同様の方法でソート可能です。(表示するときが面倒ですが。)

スポンサードリンク

inserted by FC2 system