[解決済み] オブジェクトのプロパティを値でソートする
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);
関連
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] 辞書を値で並べ替えるにはどうしたらいいですか?
-
[解決済み] JavaScriptのオブジェクトをループスルーまたは列挙するにはどうすればよいですか?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] List<T>をオブジェクトのプロパティでソートする方法
-
[解決済み】オブジェクトの配列を文字列のプロパティ値でソートする
-
[解決済み】未定義のオブジェクトプロパティを検出する
-
[解決済み】JavaScriptのオブジェクトの長さ
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptの関数この指摘の問題を説明
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
要素ツリー制御によるvueTreeテーブル
-
[解決済み] テスト
-
[解決済み】Node.js getaddrinfo ENOTFOUND
-
[解決済み】「X-Frame-Options」を「SAMEORIGIN」に設定したため、フレームでの表示を拒否された。
-
[解決済み] Web API エラー - このリクエストはブロックされました; コンテンツは HTTPS で提供されなければなりません
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】リクエストに失敗していないのに、「TypeError: failed to fetch」が表示される。
-
jq は html ページとデータを動的に分割する。