本記事では、JavaScriptのオブジェクト(連想配列)を昇順・降順に並び替える方法について解説しています。
sortメソッドの使い方・仕組みを知らない方は、先に下記の記事をご覧になることをオススメします。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
サンプルコード
以降の解説では、下記のサンプルコードを使用しています。実際に手を動かして確認したい人はコピペしてお使いください。
let fruitsArr = [
{
name: "Apple",
price: 150,
},
{
name: "Banana",
price: 100,
},
{
name: "Watermelon",
price: 1000,
},
{
name: "Strawberry",
price: 500,
},
{
name: "Melon",
price: 1500,
},
];
オブジェクト(連想配列)を昇順・降順に並び替える
名前(文字列)で昇順・降順に並び替え
// 昇順に並び替え
console.log(
fruitsArr.sort((x, y) => {
if (x.name > y.name) return 1;
if (x.name < y.name) return -1;
return 0;
})
);
/* コンソールログ *
* 0: {name: 'Apple', price: 150}
* 1: {name: 'Banana', price: 100}
* 2: {name: 'Melon', price: 1500}
* 3: {name: 'Strawberry', price: 500}
* 4: {name: 'Watermelon', price: 1000}
*/
// 降順に並び替え
console.log(
fruitsArr.sort((x, y) => {
if (x.name > y.name) return 1;
if (x.name < y.name) return -1;
return 0;
})
);
/* コンソールログ *
* 0: {name: 'Watermelon', price: 1000}
* 1: {name: 'Strawberry', price: 500}
* 2: {name: 'Melon', price: 1500}
* 3: {name: 'Banana', price: 100}
* 4: {name: 'Apple', price: 150}
*/
x.nameとy.nameを比較して、昇順・降順を入れ替えています。いや、名前って文字列なのにどうやって大きい・小さいを比較しているの?と思う人が多いと思います。コールバック関数で比較している文字列はUnicodeのポイントを基準にしています。
金額(数値)で昇順・降順に並び替え
// 昇順に並び替え
console.log(fruitsArr.sort((x, y) => x.price - y.price));
/* コンソールログ *
* 0: {name: 'Banana', price: 100}
* 1: {name: 'Apple', price: 150}
* 2: {name: 'Strawberry', price: 500}
* 3: {name: 'Watermelon', price: 1000}
* 4: {name: 'Melon', price: 1500}
*/
// 降順に並び替え
console.log(fruitsArr.sort((x, y) => y.price - x.price));
/* コンソールログ *
* 0: {name: 'Melon', price: 1500}
* 1: {name: 'Watermelon', price: 1000}
* 2: {name: 'Strawberry', price: 500}
* 3: {name: 'Apple', price: 150}
* 4: {name: 'Banana', price: 100}
*/
x.priceとy.priceを減算して、昇順・降順に入れ替えています。文字列と違い数値なので、減算することで正数or負数or0が求められるので、return -1のように記述せずに済みます。