【JavaScript】配列・連想配列のソート方法【昇順・降順】

2021年1月27日

JavaScriptで配列、連想配列（オブジェクト）の並び替えるソート関数についてまとめました。

JavaScriptのsort()の使い方

JavaScriptでソートを行う時は、配列.sort()の記述で簡単に並び替えが出来ます。

ソートは中の値で参照され、数値も文字列も同様に並び替えることが出来ます。

デフォルトは昇順（少ない順）になります。

var array = ['あ', 'え', 'い', 'お', 'う'];
array.sort();
console.log(array);

数値の配列が文字列としてソートされてしまう場合の対処法

JavaScriptの.sort()関数は、数値のみで構成された配列でも、ソートでは文字列として比較を行い並び替えされてしまいます。

例えば、以下のプログラムは、正しくは[1,5,7,10,200]と並び替えしたいのですが、そうはなりません。

var array = [1, 10, 5, 200, 7];
array.sort();
console.log(array);

数値型をしっかり順番通りに行いたい場合は、sort()関数の引数に比較の式を入れる必要があります。

var array = [1, 10, 5, 200, 7];
array.sort((a, b) => a - b); //aとbの数値を比較し、その順番を参照する式
console.log(array);

sort()で降順に並び替えたい場合の処理

sort関数で降順ソートを行いたい場合は、引数に式を入れる必要があります。

数値の配列は先ほどのa-bをb-aに置き換えるだけで数値としての逆順ソートが出来ます。

覚えやすく、a-bは昇順、b-aは降順と覚えておきましょう。

文字列の場合は演算子による比較の概念がなく、b-aでソートは出来ないので、昇順ソート後にreverse()関数で逆順にすることで、文字列の降順ソートが可能です。

var array = [1, 10, 5, 200, 7];
array.sort((a, b) => b - a);
console.log(array);

var array = ['あ', 'え', 'い', 'お', 'う'];
array.sort();
array.reverse();
console.log(array);

連想配列でソートを行う方法

連想配列（オブジェクト）で、sortによる並び替えを行う方法です。

連想配列は厳密には配列ではなく、オブジェクトで構成されているものなので、そのままではソートをすることが出来ません。

一度Object.keys()を使用してキーを抜きとり、mapで新たなキー入りの配列を生成する必要があります。

【JavaScript】配列を操作するmapの使い方

var obj = {
    'Apple' : 50,
    'Banana' : 80,
    'Cherry' : 50,
    'Orange' : 60,
    'Melon' : 100,
};

//キーを含んだ配列に変換
var array = Object.keys(obj).map((k)=>({ key: k, value: obj[k] }));

console.log(array);

そして、生成した配列でソート後、再度オブジェクトを代入する、といった作り方になります。

var obj = {
    'Apple' : 50,
    'Banana' : 80,
    'Cherry' : 50,
    'Orange' : 60,
    'Melon' : 100,
};

//キーを含んだ配列に変換 オブジェクト⇒配列
var array = Object.keys(obj).map((k)=>({ key: k, value: obj[k] }));

//値段順
array.sort((a, b) => a.value - b.value);

//配列⇒オブジェクト　で元に戻す
obj = Object.assign({}, ...array.map((item) => ({
    [item.key]: item.value,
})));

console.log(obj);

オブジェクト入り配列のソートを行う方法

配列の値にオブジェクトが含まれていて、特定のプロパティを対象にソートを行いたい場合の処理です。

こちらも.sort()関数に引数を付与することで対応できます。

var array = [
    {no : 1, name : 'Apple', price: 50},
    {no : 2, name : 'Banana', price: 80},
    {no : 3, name : 'Cherry', price: 50},
    {no : 4, name : 'Orange', price: 60},
    {no : 5, name : 'Melon', price: 100},
];
//priceの昇順
array.sort((a, b) => a.price - b.price);
console.log(array);

var array = [
    {no : 1, name : 'Apple', price: 50},
    {no : 2, name : 'Banana', price: 80},
    {no : 3, name : 'Cherry', price: 50},
    {no : 4, name : 'Orange', price: 60},
    {no : 5, name : 'Melon', price: 100},
];
//priceの降順
array.sort((a, b) => b.price - a.price);
console.log(array);

オブジェクトの参照は、a.priceでもa[‘price’]でも可能なので、ソートさせたいプロパティに変数を宛てたい場合は後者の書き方も覚えておきましょう。

var sort_target = 'price'; //ソート対象を変数で設定
var array = [
    {no : 1, name : 'Apple', price: 50},
    {no : 2, name : 'Banana', price: 80},
    {no : 3, name : 'Cherry', price: 50},
    {no : 4, name : 'Orange', price: 60},
    {no : 5, name : 'Melon', price: 100},
];
//priceの昇順
array.sort((a, b) => a[sort_target] - b[sort_target]);
console.log(array);

オブジェクト入り配列で複数のソートを行う方法

オブジェクトを含む配列でソートの条件を複数設定したい場合の方法です。

例えば下記の配列はpriceが同じ値となっていますが、その場合はまた別のプロパティを参照してソートを行うことが可能です。

複数のソート条件の例として、priceの昇順、同じ場合はnoの降順で設定してみましょう。

var array = [
    {no : 1, name : 'Apple', price: 50},
    {no : 2, name : 'Banana', price: 80},
    {no : 3, name : 'Cherry', price: 50},
    {no : 4, name : 'Orange', price: 60},
    {no : 5, name : 'Melon', price: 100},
];
//priceの昇順
array.sort((a, b) => {
    //priceの昇順
    if(a.price > b.price) return 1;
    if(a.price < b.price) return -1;
    //noの降順
    if(a.no > b.no) return -1;
    if(a.no < b.no) return 1;
    return 0;
});
console.log(array);

複数のソートが必要な場合の書き方として覚えておきましょう。