掌握JavaScript对象按值排序的技巧：兼顾数字键与数据结构优化

const originalObject = {
  1: "Vexapa",
  5: "Linga & Satro",
  6: "Feearlees",
  7: "Abbaga, Sort and Try",
  8: "Ollwether",
  10: "Domino Effect",
  11: "Sapata",
  12: "Ankels' Camel",
  18: "Katrina SHA",
  19: "Ulusy",
  20: "Whatever"
};

// 1. 分离键和值
const keys = Object.keys(originalObject);
const values = Object.values(originalObject);

// 2. 独立排序
// 对键进行数字排序
keys.sort((a, b) => Number(a) - Number(b));
// 对值进行字母排序
values.sort();

// 3. 创建新对象并重新组合
const remappedObject = {};
keys.forEach((key, index) => {
  remappedObject[key] = values[index];
});

console.log("原始对象:", originalObject);
console.log("重新映射并排序后的对象 (键按数字顺序，值按字母顺序，但原关联已打破):", remappedObject);

/*
输出结果示例:
{
  1: "Abbaga, Sort and Try",
  5: "Ankels' Camel",
  6: "Domino Effect",
  7: "Feearlees",
  8: "Katrina SHA",
  10: "Linga & Satro",
  11: "Ollwether",
  12: "Sapata",
  18: "Ulusy",
  19: "Vexapa",
  20: "Whatever"
}
*/

const originalObject = {
  1: "Vexapa",
  5: "Linga & Satro",
  6: "Feearlees",
  7: "Abbaga, Sort and Try",
  8: "Ollwether",
  10: "Domino Effect",
  11: "Sapata",
  12: "Ankels' Camel",
  18: "Katrina SHA",
  19: "Ulusy",
  20: "Whatever"
};

// 1. 将对象转换为 [key, value] 对的数组
const entries = Object.entries(originalObject);

// 2. 基于值（第二个元素）进行字母排序
entries.sort((a, b) => a[1].localeCompare(b[1]));

console.log("按值排序后的 [key, value] 数组 (保留原始关联):", entries);
/*
输出结果示例:
[
  ["7", "Abbaga, Sort and Try"],
  ["12", "Ankels' Camel"],
  ["10", "Domino Effect"],
  ["6", "Feearlees"],
  ["18", "Katrina SHA"],
  ["5", "Linga & Satro"],
  ["8", "Ollwether"],
  ["11", "Sapata"],
  ["19", "Ulusy"],
  ["1", "Vexapa"],
  ["20", "Whatever"]
]
*/

// 3. (可选) 转换为对象数组，更适合UI组件
const sortedArrayOfObjects = entries.map(([key, value]) => ({
  id: Number(key), // 将键转换为数字类型，如果需要
  name: value,
}));

console.log("按值排序后的对象数组 (适合UI组件):", sortedArrayOfObjects);
/*
输出结果示例:
[
  { id: 7, name: "Abbaga, Sort and Try" },
  { id: 12, name: "Ankels' Camel" },
  { id: 10, name: "Domino Effect" },
  { id: 6, name: "Feearlees" },
  { id: 18, name: "Katrina SHA" },
  { id: 5, name: "Linga & Satro" },
  { id: 8, name: "Ollwether" },
  { id: 11, name: "Sapata" },
  { id: 19, name: "Ulusy" },
  { id: 1, name: "Vexapa" },
  { id: 20, name: "Whatever" }
]
*/

// 如果你确实需要一个保持插入顺序的新对象（例如ES6 Map或特定环境下的普通对象），可以这样做：
const sortedMap = new Map(entries);
console.log("按值排序后的 Map 对象:", sortedMap);
/*
输出结果示例 (Map会保留插入顺序):
Map(11) {
  '7' => 'Abbaga, Sort and Try',
  '12' => 'Ankels' Camel',
  '10' => 'Domino Effect',
  '6' => 'Feearlees',
  '18' => 'Katrina SHA',
  '5' => 'Linga & Satro',
  '8' => 'Ollwether',
  '11' => 'Sapata',
  '19' => 'Ulusy',
  '1' => 'Vexapa',
  '20' => 'Whatever'
}
*/