【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

サンプルコード

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

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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次