Javascriptで配列に入れたデータを元に円グラフを作成したかったのですが、円グラフを作る際に降順（大きい順）の方がグラフが見やすいと思い、ソートをしました。（※ちなみにデータ読み込み時にソートできるのであれば、それがベストだと思います）
ちょうど良い機会ですので、Javascriptで一次元配列および二次元配列をソートする方法について、メモしておこうかなと思います。
スポンサーリンク一次元配列のソート
一次元配列をソートする方法（昇順と降順）です。
昇順（小さい順）にソートする
let test = [5, 3, 4, 1, 2];
console.log(test); // ソート前
test.sort(function(me, you) {
return me - you;
});
console.log(test); // ソート後
下記の通り、昇順（小さい順）にソートできました。（※上がソート前、下がソート後）
降順（大きい順）にソートする
let test = [5, 3, 4, 1, 2];
console.log(test); // ソート前
test.sort(function(me, you) {
return you - me;
});
console.log(test); // ソート後
下記の通り、降順（大きい順）にソートできました。（※上がソート前、下がソート後）
二次元配列のソート
二次元配列をソートする方法（昇順と降順）です。
1つ目の要素に対して昇順（小さい順）にソートする
let test2 = [
[5, 2],
[3, 1],
[4, 4],
[1, 3],
[2, 5],
];
console.log(test2.concat()); // ソート前
test2.sort(function(me, you) {
return me[0] - you[0];
});
console.log(test2); // ソート後
下記の通り、1つ目の要素に対して昇順（小さい順）にソートできました。（※上がソート前、下がソート後）
1つ目の要素に対して降順（大きい順）にソートする
let test2 = [
[5, 2],
[3, 1],
[4, 4],
[1, 3],
[2, 5],
];
console.log(test2.concat()); // ソート前
test2.sort(function(me, you) {
return you[0] - me[0];
});
console.log(test2); // ソート後
下記の通り、1つ目の要素に対して降順（大きい順）にソートできました。（※上がソート前、下がソート後）
２つ目の要素に対して昇順（小さい順）にソートする
let test2 = [
[5, 2],
[3, 1],
[4, 4],
[1, 3],
[2, 5],
];
console.log(test2.concat()); // ソート前
test2.sort(function(me, you) {
return me[1] - you[1];
});
console.log(test2); // ソート後
下記の通り、２つ目の要素に対して昇順（小さい順）にソートできました。（※上がソート前、下がソート後）
２つ目の要素に対して降順（大きい順）にソートする
let test2 = [
[5, 2],
[3, 1],
[4, 4],
[1, 3],
[2, 5],
];
console.log(test2.concat()); // ソート前
test2.sort(function(me, you) {
return you[1] - me[1];
});
console.log(test2); // ソート後
下記の通り、２つ目の要素に対して降順（大きい順）にソートできました。（※上がソート前、下がソート後）
二次元配列（中身が連想配列）のソート
二次元配列（中身が連想配列）をソートする方法（昇順と降順）です。
1つ目の要素Aに対して昇順（小さい順）にソートする
let test3 = [
{
'A': 5,
'B': 2,
}, {
'A': 3,
'B': 1,
}, {
'A': 4,
'B': 4,
}, {
'A': 1,
'B': 3,
}, {
'A': 2,
'B': 5,
},
];
console.log(test3.concat()); // ソート前
test3.sort(function(me, you) {
return me['A'] - you['A'];
});
console.log(test3); // ソート後
下記の通り、1つ目の要素Aに対して昇順（小さい順）にソートできました。（※上がソート前、下がソート後）
1つ目の要素Aに対して降順（大きい順）にソートする
let test3 = [
{
'A': 5,
'B': 2,
}, {
'A': 3,
'B': 1,
}, {
'A': 4,
'B': 4,
}, {
'A': 1,
'B': 3,
}, {
'A': 2,
'B': 5,
},
];
console.log(test3.concat()); // ソート前
test3.sort(function(me, you) {
return you['A'] - me['A'];
});
console.log(test3); // ソート後
下記の通り、1つ目の要素Aに対して降順（大きい順）にソートできました。（※上がソート前、下がソート後）
２つ目の要素Bに対して昇順（小さい順）にソートする
let test3 = [
{
'A': 5,
'B': 2,
}, {
'A': 3,
'B': 1,
}, {
'A': 4,
'B': 4,
}, {
'A': 1,
'B': 3,
}, {
'A': 2,
'B': 5,
},
];
console.log(test3.concat()); // ソート前
test3.sort(function(me, you) {
return me['B'] - you['B'];
});
console.log(test3); // ソート後
下記の通り、２つ目の要素Bに対して昇順（小さい順）にソートできました。（※上がソート前、下がソート後）
２つ目の要素Bに対して降順（大きい順）にソートする
let test3 = [
{
'A': 5,
'B': 2,
}, {
'A': 3,
'B': 1,
}, {
'A': 4,
'B': 4,
}, {
'A': 1,
'B': 3,
}, {
'A': 2,
'B': 5,
},
];
console.log(test3.concat()); // ソート前
test3.sort(function(me, you) {
return you['B'] - me['B'];
});
console.log(test3); // ソート後
下記の通り、２つ目の要素Bに対して降順（大きい順）にソートできました。（※上がソート前、下がソート後）
まとめ
Javascriptで一次元配列、二次元配列を簡単にソートする方法をソースをあげて確認しました。
簡単には簡単なのですが、sortメソッドの引数で指定している「functionの戻り値」に関しては、分かるような分からないような…という感じが若干残ります。
今回は一次元配列、二次元配列をそれぞれ昇順・降順にソートする使用例までにしますが、今後「functionの戻り値」によって、どのようにソートされているか？、まとめてみたいなと思います。
→簡単にですが調べてまとめてみました「【Javascript】sortメソッドのソート方法について調べてみた。知ることで更に使いやすくなる」
それでは、最後までお読みいただきありがとうございました！
スポンサーリンク