javascriptで配列を並び替えするには？昇順・降順の指定方法

javascriptの配列に対して並び替えをしたい場合がありますが、javascript初心者だとfor文を使ってゴリゴリに並び替え関数を自作している事例をたまに見かけます。

for文を使って配列を並び替えすること自体は特に問題はないのですが、javascriptでは並び替え用のsort関数があるため、こちらを使ったほうが基本的にはシンプルになりコードの可読性も上がります。

そこでこの記事では、javascriptの基本である配列の並び替え方法についてまとめました。

昇順・降順ともの簡単に実現することができますので、基本をしっかり押さえましょう！

この方法を応用すると、少し複雑なオブジェクトの並び替えも同じように行うことができるようになります。

javascript配列の昇順並び替え方法

javascriptで配列を昇順で並び替えする場合、sort関数を利用します。

例えば配列内の要素が数値の場合、①部分のように使うと並び替えをすることができます。

let array = [2, 4, 30, 6, 3, 8];

//①昇順の並び替え
let result = array.sort();

console.log(result);

ただし、これではsort関数を使う場合は不十分です。

この処理を実行した結果、エラーとはなりませんが、結果の配列は[2, 3, 30, 4, 6, 8]となります。

3の後が30、その次が4となってしまうため、数値が小さい順（昇順）に並び替えされないのです。

これはJavaScriptのsort関数がデフォルトで、配列内の各要素を文字列に変換＆Unicodeの符号位置の順に比較し手並び替えをしているためです。

そのため、配列を昇順に並び替えする場合、次のようにsort関数に少し手を加えます。

let array = [2, 4, 30, 6, 3, 8];

let result = array.sort(function(a, b) {
  return (a < b) ? -1 : 1;  //昇順の並び替え
});

console.log(result);

こうすることで昇順に並び替えが行われ、[2, 3, 4, 6, 8, 30]という意図したとおりの配列の並び替えを得ることができました。

javascript配列の降順並び替え方法

配列内の要素を降順（数値が大きいものから小さいものへ）並び替えをする場合、先述の昇順のソース内の等号を逆にします。

let array = [2, 4, 30, 6, 3, 8];

let result = array.sort(function(a, b) {
  return (a > b) ? -1 : 1;  //降順の並び替え
});

console.log(result);

この結果は[30, 8, 6, 4, 3, 2]となりますので、配列を降順に並び替えすることができました。

配列内の要素に文字が含まれる場合の工夫

先述の例では配列内の要素が数値のみでしたが、数値と文字が混在している場合、並び替え時に少し工夫してあげるとGoodです。

例えば次のように、元の配列内に文字が入っているような場合です。

let array = [2, 3, '30', 20, '15', 40, 8];

let result = array.sort(function(a, b) {
  return (a < b) ? -1 : 1;  //昇順の並び替え
});

console.log(result);

この処理で昇順並び替えの結果は、[2, 3, 8, '15', 20, '30', 40]となり、並び替えとしては問題はありません

でもどうせなら並び替え後の要素は全部数値にしたいですよね。

そのような場合、map関数と組み合わせることで数値のみの並び替え後の配列を取得することができます。

例えば次の例では、sort関数を使って並び替えをする前に、元の配列に対してmap関数を利用してすべての要素を数値変換する処理を入れています。

let array = [2, 3, '30', 20, '15', 40, 8];

let result = array.map(function(val) {
  return Number(val);  //数値変換
  
}).sort(function(a, b) {
  return (a < b) ? -1 : 1;  //昇順の並び替え

});

console.log(result);

こうすることで要素がすべて数値の配列に対して並び替えが行われ、結果的に数値のみの配列を取得することができます。

このように、元の配列に文字列の数値が入っていたり、または並び替え時は除去したいような文字（undefined）などが入っているような場合、除去処理を入れてからsort関数で並び替えするとよいでしょう。

配列内の要素がオブジェクトの場合の並び替え

配列内の要素が数値ではなくオブジェクトの場合は、並び替えに少し工夫が必要です。

//配列内の要素がオブジェクトの例
let obj = {
  aaa : {date : '2020-02-20', memo : 'あいうえお'}
, bbb : {date : '2020-02-30', memo : 'かきくけこ'}
, ccc : {date : '2020-02-10', memo : 'さしすせそ'}
, ddd : {date : '2020-02-05', memo : 'たちつてと'}
};

とはいえ、考え方はこれまで説明した内容を応用すればできますので、別記事のjavascriptのオブジェクトを並び替えする方法もあわせてご確認ください。

配列の並び替え方法まとめ

javascriptの配列を並び替えする方法をご紹介しました。

基本的にはsort関数で昇順・降順の並び替えを行うことができます。

ただし、並び替え前に配列に対してデータの整形が必要なこともありますので、その場合はmap関数やfilter関数を使って必要なデータのみになるように変換してあげましょう。