企業の値引き広告を見た時に、そんだけ値引いても利益が出るって、どんだけ暴利やねん！！！と意味なく腹が立ってくる、ユゲタです。
連日のjavascriptネタですが・・・、そうです、今現在はフロントコーディングの真っ最中です。
配列データのソート機能を便利に手動で複雑なものにも対応できる事がわかったので、自分用の備忘録を残しておきます。
配列の標準ソート機能
単純な一元配列であれば、sort関数だけで、昇順に並べ替えてくれます。
var arr = [1,3,5,7,9,2,4,6,8,0];
arr.sort();
> [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
var strings = ["a","c","e","b","e","f"];
strings.sort();
> ["a", "b", "c", "e", "e", "f"]
数値でも、文字列でもイケます。
var strings2 = ["a","C","e","b","E","f"];
strings2.sort();
> ["C", "E", "a", "b", "e", "f"]
そのかわり、stringの場合は、文字コードでソートされるため、気をつけなければいけません。
大文字小文字を区別せずに文字列の配列をabc順でソートしたい場合は、以下のように書きます。
var strings2 = ["a","C","e","b","E","f"];
strings2.sort(function(a,b){
if(String(a).toLowerCase() < String(b).toLowerCase()){return -1}
if(String(a).toLowerCase() > String(b).toLowerCase()){return 1}
return 0
});
> ["a", "b", "C", "E", "e", "f"]
ちょっと気になったので、数値と文字列の混在した状態で以下のようなケースでソートしてみました。
var arr2 = [1,"2",3,"4",5,"6"];
arr2.sort();
> [1, "2", 3, "4", 5, "6"]
数値が文字列で登録されていても、ちゃんと変換されるんですね。
でも、こんな状態になるソートの前に、変数型を整える作業が必要なんですけどね・・・
データ配列のソート
単純な数値や文字列だけの配列ではなく、配列のそれぞれの値がobjectデータになっているようなケースがあります。
※むしろこっちのほうがシステムで使うケースは多いですけどね。
var datas = [
{id:2 , num:100},
{id:1 , num:300},
{id:3 , num:500},
{id:4 , num:200},
{id:5 , num:400}
];
datas.sort();
> Responce
[
{
"id": 2,
"num": 100
},
{
"id": 1,
"num": 300
},
{
"id": 3,
"num": 500
},
{
"id": 4,
"num": 200
},
{
"id": 5,
"num": 400
}
]
予想通り、sort関数は全く機能していません。
こうした場合は以下のように処理しましょう。
単一key（任意の値）によるソート
var datas = [
{id:1 , num:100},
{id:2 , num:300},
{id:3 , num:500},
{id:4 , num:200},
{id:5 , num:400}
];
datas.sort(function(a,b){
if(a.id < b.id){return -1}
if(a.id > b.id){return 1}
return 0
});
> Responce
[
{
"id": 1,
"num": 300
},
{
"id": 2,
"num": 100
},
{
"id": 3,
"num": 500
},
{
"id": 4,
"num": 200
},
{
"id": 5,
"num": 400
}
]
var datas = [
{id:1 , num:100},
{id:2 , num:300},
{id:3 , num:500},
{id:4 , num:200},
{id:5 , num:400}
];
datas.sort(function(a,b){
if(a.num < b.num){return -1}
if(a.num > b.num){return 1}
return 0
});
> Responce
[
{
"id": 2,
"num": 100
},
{
"id": 4,
"num": 200
},
{
"id": 1,
"num": 300
},
{
"id": 5,
"num": 400
},
{
"id": 3,
"num": 500
}
]
さらに、昇順ではなく降順にしたい場合は、returnの"-1"と"1"を逆にするだけです。
複数のkeyによるソート
そして、ソートをする場合にidとnumを両方一緒にソートしたい場合には以下のようにします。
var datas2 = [
{id:2 , num:100},
{id:1 , num:300},
{id:3 , num:500},
{id:4 , num:200},
{id:5 , num:400},
{id:2 , num:550},
{id:1 , num:120},
{id:3 , num:340},
{id:4 , num:780},
{id:5 , num:560}
];
datas2.sort(function(a,b){
if(a.id < b.id){return -1}
if(a.id > b.id){return 1}
if(a.num < b.num){return -1}
if(a.num > b.num){return 1}
return 0
});
> Responce
[
{
"id": 1,
"num": 120
},
{
"id": 1,
"num": 300
},
{
"id": 2,
"num": 100
},
{
"id": 2,
"num": 550
},
{
"id": 3,
"num": 340
},
{
"id": 3,
"num": 500
},
{
"id": 4,
"num": 200
},
{
"id": 4,
"num": 780
},
{
"id": 5,
"num": 400
},
{
"id": 5,
"num": 560
}
]
id,numの順番でソートを行いましたが、順番を入れ替えたい場合は、sort/function内のif文の順番を変更することで、ソート優先順位を切り替えられます。
連想配列のkey値でのソート
最後に、javascriptでは、連想配列のソート機能が無かったので、以下のような関数を作ってみました。
Object.prototype.ksort = function(){
var objects = this;
var keys = [];
for(var i in objects){
keys.push(i);
}
keys.sort();
var datas = {};
for(var i=0; i<keys.length; i++){
datas[keys[i]] = objects[keys[i]];
}
return datas;
};
var objects = {a:5 , c:4 , e:3 , b:2 , d:1};
Object(objects).ksort();
> Responce
{
"a": 5,
"b": 2,
"c": 4,
"d": 1,
"e": 3
}
おまけですが、keyソートを流用してvalueソートも作っておきました。
Object.prototype.vsort = function(){
var objects = this;
var keys = [];
for(var i in objects){
keys.push({
key : i,
value : objects[i]
});
}
keys.sort(function(a,b){
if(a.value < b.value){return -1}
if(a.value > b.value){return 1}
return 0;
});
var datas = {};
for(var i=0; i<keys.length; i++){
datas[keys[i].key] = keys[i].value;
}
return datas;
};
var objects = {a:5 , c:4 , e:3 , b:2 , d:1};
Object(objects).vsort();
> {d: 1, b: 2, e: 3, c: 4, a: 5}
連想配列単体の内部でのソートってあんまりニーズは無いかもしれないですが、ググってもこうしたコードが出てこなかったので作っておきました。
javascriptの配列ソートを極めてHappyCoding！！！
