1. ホーム
  2. javascript

[解決済み] オブジェクトのプロパティを値でソートする

2022-03-22 02:14:31

質問

というようなJavaScriptのオブジェクトがあった場合。

var list = {
  "you": 100, 
  "me": 75, 
  "foo": 116, 
  "bar": 15
};

プロパティを値に基づいてソートする方法はありますか?そうすれば、最終的に

list = {
  "bar": 15, 
  "me": 75, 
  "you": 100, 
  "foo": 116
};

解決方法は?

配列に移動して、その配列をソートして、その配列を目的に応じた使い方をします。これが解決策です。

var maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};
var sortable = [];
for (var vehicle in maxSpeed) {
    sortable.push([vehicle, maxSpeed[vehicle]]);
}

sortable.sort(function(a, b) {
    return a[1] - b[1];
});

//[["bike", 60], ["motorbike", 200], ["car", 300],
//["helicopter", 400], ["airplane", 1000], ["rocket", 28800]]


配列を手に入れたら、その配列から好きな順番でオブジェクトを再構築することで、やろうとしたことを正確に実現することができます。これは私が知っているすべてのブラウザで動作しますが、実装の癖に依存し、いつ壊れてもおかしくない状態です。JavaScriptのオブジェクトの要素の順番については、決して仮定してはいけないのです。

var objSorted = {}
sortable.forEach(function(item){
    objSorted[item[0]]=item[1]
})


ES8では Object.entries() を使用して、オブジェクトを配列に変換します。

const maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};

const sortable = Object.entries(maxSpeed)
    .sort(([,a],[,b]) => a-b)
    .reduce((r, [k, v]) => ({ ...r, [k]: v }), {});

console.log(sortable);


ES10では Object.fromEntries() を使用して配列をオブジェクトに変換します。そうすると、コードは次のように単純化されます。

const maxSpeed = {
    car: 300, 
    bike: 60, 
    motorbike: 200, 
    airplane: 1000,
    helicopter: 400, 
    rocket: 8 * 60 * 60
};

const sortable = Object.fromEntries(
    Object.entries(maxSpeed).sort(([,a],[,b]) => a-b)
);

console.log(sortable);