JavaScriptでオブジェクトの値を数値順にソートして配列として取得する方法

JavaScriptでは、オブジェクトに格納された数値を昇順（または降順）に並べ替えて、配列として取り出したいケースがよくあります。本記事では、オブジェクトの値を数値順にソートし、新しい配列として返す方法を解説します。

前提となるオブジェクト

まず、次のようなオブジェクトを想定します。

const obj = {
    key1: 56,
    key2: 67,
    key3: 23,
    key4: 11,
    key5: 88
};

このオブジェクトを受け取り、値を数値順に並べ替えた次のような配列を返す関数を作成します。

const arr = [11, 23, 56, 67, 88];

つまり、オブジェクトの各値を抽出し、それらを昇順にソートした結果を配列として格納するという処理です。

実装コードの例

以下がその実装例です。

const obj = {
    key1: 56,
    key2: 67,
    key3: 23,
    key4: 11,
    key5: 88
};
const sortObject = obj => {
    const arr = Object.keys(obj).map(el => {
        return obj[el];
    });
    arr.sort((a, b) => {
        return a - b;
    });
    return arr;
};
console.log(sortObject(obj));

コードのポイント

この実装には、重要なポイントが2つあります。

1. Object.keys()とmap()で値を抽出する
Object.keys(obj)はオブジェクトのキー一覧を配列で返します。これに対してmap()を使うことで、各キーに対応する値だけを抽出した新しい配列を作成できます。

2. sort()に比較関数を渡す
JavaScriptのArray.prototype.sort()は、比較関数を指定しない場合、要素を文字列として辞書順に並べ替えます。そのため、数値を正しくソートするには(a, b) => a - bのように比較関数を必ず渡す必要があります。この書き方により昇順ソートとなり、降順にしたい場合はb - aとします。

出力結果

上記のコードを実行すると、コンソールに以下の出力が表示されます。

[ 11, 23, 56, 67, 88 ]

このように、Object.keys()・map()・sort()を組み合わせることで、オブジェクトの値を簡単に数値順の配列へ変換できます。