【JavaScript】バラバラの曜日を曜日順にソートする方法

配列なり、オブジェクトのキーなりに曜日がバラバラに入っていた。
画面に表示する際には、やっぱり曜日順に表示したい、ということで配列、オブジェクトのソート方法をまとめる。
（ES5に読みかえるのはさほど難しくないと思うので、ES2015/ES6で書いていく）

曜日順にソートする方法

配列の場合

const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

const unsortedList = ['Fri', 'Mon', 'Sat', 'Sun', 'Thu', 'Tue', 'Wed'];
unsortedList.sort((a, b) => daysOfWeek.indexOf(a) > daysOfWeek.indexOf(b));

console.log(unsortedList);

配列の場合にかぎらず、daysOfWeekにソート情報を定義しておいて、そのindexの大小でソートする。たとえば、'Fri'なら5、'Mon'なら1といった具合だ。


今は曜日の省略形を使っているが、略さないパターンや日本語の場合は、その都度ソート情報の定義が必要だ。
また、ソート情報はすべて小文字で持っておき、toLowerCaseを使ってindexを取得する方法もある。

配列にオブジェクトが入っている場合

const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

const unsortedObjInArray = [
    { dayOfWeek: 'Fri', value: '金曜日だよー' },
    { dayOfWeek: 'Mon', value: '月曜日だよー' },
    { dayOfWeek: 'Sat', value: '土曜日だよー' },
    { dayOfWeek: 'Sun', value: '日曜日だよー' },
    { dayOfWeek: 'Thu', value: '木曜日だよー' },
    { dayOfWeek: 'Tue', value: '火曜日だよー' },
    { dayOfWeek: 'Wed', value: '水曜日だよー' }
];

unsortedObjInArray.sort((a, b) => daysOfWeek.indexOf(a.dayOfWeek) > daysOfWeek.indexOf(b.dayOfWeek));

console.log(unsortedObjInArray);

配列の中の、オブジェクトのdayOfWeekをキーにソートする場合も、「配列の場合」とほとんど変わりない。

オブジェクトの場合

オブジェクトをソートするというシチュエーションがあまり思い浮かばないが、こういう場合もあるのでとりあえず。

const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

const unsortedObject = {
    'Fri': { value: '金曜日だよー' },
    'Mon': { value: '月曜日だよー' },
    'Sat': { value: '土曜日だよー' },
    'Sun': { value: '日曜日だよー' },
    'Thu': { value: '木曜日だよー' },
    'Tue': { value: '火曜日だよー' },
    'Wed': { value: '水曜日だよー' }
};

// これか
const sortedKeys = Object.keys(unsortedObject).sort((a, b) => daysOfWeek.indexOf(a) > daysOfWeek.indexOf(b));
sortedKeys.forEach((key) => { console.log(unsortedObject[key]); });

// もしくは
daysOfWeek.forEach((key) => { console.log(unsortedObject[key]); });

オブジェクトはそもそもソートという概念がない気がするけど、Object.keys()でキー情報だけを抽出してソートすれば、曜日順にオブジェクトを参照することができる。

キー情報はdaysOfWeekで定義しているので、それを使うのもアリ！

参考サイト

• Array.prototype.sort() - JavaScript | MDN

以上

written by @bc_rikko