アフィテク

アフィ収入月10万円以下の初心者を対象に『アフィリエイトで稼ぐテクニック』を発信!

【Javascript】オブジェクト(連想配列)内の文字列をソートする方法【sortメソッド/比較関数】

   

Javascriptのsortメソッドは便利な機能ですが、クセがあるので使い慣れていないと混乱することがあるかと思います。

個人的に「これどうやるんだっけ?」と思うことがあったので、今回まとめて記録用にまとめます。

オブジェクト(連想配列)内の文字列をソートする方法

今回解説するのはオブジェクト(連装配列)内の文字列をソートする方法です。

基本的な配列のソート方法

オブジェクトを使わない単純な数値や文字列の配列であれば、下記のようにsortメソッドを実行するだけでソートは完了します。

var num_array = [2,5,3,1,4];
num_array.sort(); //出力:1,2,3,4,5

var str_array = ["e","b","a","d","c"];
str_array.sort(); //出力:a,b,c,d,e

しかし、オブジェクト内の数値や文字列をソートしたい場合はこの方法は使えません。この方法ではオブジェクト自体がソートされてしまうからです(ソートしたいのはオブジェクトの中の要素)。

オブジェクト内の数値をソートする方法

オブジェクト内の数値や文字列をソートするには比較関数を使います。

文字列のソートは応用が必要なので、まずは例として、オブジェクト内の数値をソートするサンプルを記します。

var num_array = [
  {obj:2},
  {obj:5},
  {obj:3},
  {obj:1},
  {obj:4}
];

num_array.sort(function(a,b){
  return a.obj - b.obj;
});

//出力:{obj:1},{obj:2},{obj:3},{obj:4},{obj:5}

このようにsortメソッドには比較関数を引数として渡すことが可能です(例では無名関数を渡しています)。

比較関数のaとbはインデックス前後の要素です。全要素を比較するまでループします(例えば、1周目ではaには {obj:2} 、bには {obj:5} が入ります)。

各要素を減算して return しているのは、戻り値に数値を渡す必要があるからです。戻り値は以下のような挙動をもたらします。

0未満の場合
aはbより小さいインデックスにソートされる
0の場合
aとbは互いにインデックスを変更しない
0より大きい場合
aはbより大きいインデックスにソートされる

オブジェクト内の文字列をソートする方法

本題のオブジェクト内の文字列のソートですが、若干工夫が必要です。

まずはサンプルコードをご覧ください。

var str_array = [
  {obj:"e"},
  {obj:"b"},
  {obj:"a"},
  {obj:"d"},
  {obj:"c"}
];

str_array.sort(function(a,b){
 if(a.obj > b.obj){
  return 1;
 }else{
  return -1;
 }
});

//出力:{obj:"a"},{obj:"b"},{obj:"c"},{obj:"d"},{obj:"e"}

数値の場合は減算すれば良かったわけですが、文字列ではそうはいきません(文字列の減算結果はNaNになる)。

文字列の比較には比較演算子(< や >)を使います。

ただ、比較関数は戻り値に数値を指定する必要がある為、サンプルのように比較結果に応じて return に指定する数値を変えているという事です。

 - Web制作テクニック