【JavaScript】オブジェクト(連想配列)を昇順・降順に並び替える方法

本記事では、JavaScriptのオブジェクト(連想配列)を昇順・降順に並び替える方法について解説しています。

sortメソッドの使い方・仕組みを知らない方は、先に下記の記事をご覧になることをオススメします。

JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門　～モダンスタイルによる基礎から現場での応用まで

本書情報
出版社	技術評論社
著者	山田祥寛
発売日	2023/2/13
ページ数	624ページ
レビュー (Amazon)	(4件)

先輩くん

10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！

後輩ちゃん

最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！

【送料無料】改訂3版JavaScript本格入門 -モダンスタイルによる基礎から現場での応用まで / 山田祥寛【本】

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック

本書情報
出版社	オライリージャパン
著者	Dustin Boswell / Trevor Foucher
発売日	2012/6/23
ページ数	260ページ
レビュー (Amazon)	(620件)

先輩くん

より良いコードを書きたい人におすすめの本だよ！

後輩ちゃん

10以上前の書籍ですが、内容は今でも役に立つものばかりです！

【中古】リーダブルコード —より良いコードを書くためのシンプルで実践的なテクニック (Theory in practice)／Dustin Boswell、Trevor Foucher、須藤功平、角征典

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

Contents

1 サンプルコード
2 オブジェクト(連想配列)を昇順・降順に並び替える
- 2.1 名前(文字列)で昇順・降順に並び替え
- 2.2 金額(数値)で昇順・降順に並び替え

サンプルコード

以降の解説では、下記のサンプルコードを使用しています。実際に手を動かして確認したい人はコピペしてお使いください。

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のように記述せずに済みます。