vue.js 当JS对象的键是数字时,按值排序

aelbi1ox  于 2023-06-24  发布在  Vue.js
关注(0)|答案(1)|浏览(177)

我正在做一个InertiaJS项目。
我有一个PHP数组,它将其作为一个 prop 传递给Vue,并将其显示为一个选择框。下面是JS中的对象:

{
  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"
}

我希望这个对象按值升序排序,从A到Z。
我尝试过其他的解决方案,比如这个Sort objects in an array alphabetically on one property of the array
但似乎都不管用无论我做什么,当我必须把它转换成一个对象时,顺序是按键的。
即使我在后端进行排序,在JS中,对象也是按ID排序的。
我知道在ES6中对象默认是排序的。
我也试过与lodash,但没有运气。

pw9qyyiw

pw9qyyiw1#

首先,我不知道你在服务器端做错了什么,传递的数据被打乱了。你应该提供更多的细节。你应该知道,像这样的Js对象并不能保证得到你期望的结果。
第二,无论你做什么,都不是有效或正确的。考虑使用数组。在惯性中,PHP数组默认会变成js数组。
但如果:
通过对对象进行排序,您的意思是:

let result = {
  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 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"
};

// Separate keys and values into separate arrays
const keys = Object.keys(obj);
const values = Object.values(obj);

// Sort the keys and values individually
keys.sort((a, b) => Number(a) - Number(b));
values.sort();

// Create a new object by joining the sorted keys and values
const result = {};
keys.forEach((key, index) => {
  result[key] = values[index];
});

console.log(result);

相关问题