本記事では、JavaScriptのオブジェクト(連想配列)を昇順・降順に並び替える方法について解説しています。
sortメソッドの使い方・仕組みを知らない方は、先に下記の記事をご覧になることをオススメします。
あわせて読みたい
【JavaScript】配列内の数値を小さい順(昇順)・大きい順(降順)に並び替える方法
本記事では、JavaScriptで配列内の数値を小さい順(昇順)・大きい順(降順)に並び替える方法について解説しています。 【配列内の数値を小さい順(昇順)に並び替える】 配…
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著: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のように記述せずに済みます。
