JavaScript

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

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

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

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

本書情報
出版社技術評論社
著者山田 祥寛
発売日2023/2/13
ページ数624ページ
レビュー
(Amazon)
(4件)
先輩くん
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!

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

本書情報
出版社オライリージャパン
著者Dustin Boswell / Trevor Foucher
発売日2012/6/23
ページ数260ページ
レビュー
(Amazon)
(620件)
先輩くん
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
後輩ちゃん
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のように記述せずに済みます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村