JavaScript对象按值排序的策略与实践

const obj = {
  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"
};

const originalObj = {
  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"
};

// 将对象转换为一个包含 { id: key, name: value } 结构的对象数组
const dataArray = Object.entries(originalObj).map(([key, value]) => ({
  id: Number(key), // 将键转换为数字类型
  name: value
}));

console.log("原始对象转换后的数组：", dataArray);
/*
[
  { id: 1, name: "Vexapa" },
  { id: 5, name: "Linga & Satro" },
  // ...
  { id: 20, name: "Whatever" }
]
*/

// 对数组按 name 属性进行字母升序排序
dataArray.sort((a, b) => a.name.localeCompare(b.name));

console.log("按值排序后的数组：", dataArray);
/*
[
  { 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" }
]
*/

<select>
  <option v-for="item in sortedDataArray" :key="item.id" :value="item.id">
    {{ item.name }}
  </option>
</select>

const originalObj = { /* ... 同上 ... */ };

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

// 2. 对数组按值进行排序
entries.sort(([, valA], [, valB]) => valA.localeCompare(valB));

// 3. 使用排序后的数组创建 Map
const sortedMap = new Map(entries);

console.log("按值排序后的 Map：", sortedMap);
/*
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'
}
*/

const obj = { /* ... 同上 ... */ };

const keys = Object.keys(obj);
const values = Object.values(obj);

keys.sort((a, b) => Number(a) - Number(b)); // 键本身已经是数字排序的
values.sort(); // 值按字母排序

const result = {};
keys.forEach((key, index) => {
  result[key] = values[index]; // ⚠️ 这里的 key 和 value 已经不再是原始的配对！
});

console.log("错误示范：独立排序键和值并重新组合的对象", result);
/*
{
  '1': 'Abbaga, Sort and Try', // 原始 '1' 对应 'Vexapa'，现在对应 'Abbaga...' (原始 '7' 的值)
  '5': 'Ankels\' Camel',      // 原始 '5' 对应 'Linga & Satro'，现在对应 'Ankels...' (原始 '12' 的值)
  // ... 原始键值关联已丢失
}
*/