如何在JS中对数字键对象按值升序排序（InertiaJS项目）

核心问题是：JS中键为可转换整数的对象，会被引擎自动按数值升序排列，所以直接用对象存排序结果是行不通的，必须转为数组来维护自定义顺序。下面给两种可行方案：

前端Vue处理方案 #

通过计算属性把传入的对象转为数组，再按值排序：

<script setup>
import { computed } from 'vue'

const props = defineProps({
  options: Object
})

const sortedOptions = computed(() => {
  // 将对象转为[id, label]的数组，再映射为结构化对象
  return Object.entries(props.options)
    .map(([id, label]) => ({ id: Number(id), label }))
    // 按label字符串A-Z排序，localeCompare支持多语言字符排序
    .sort((a, b) => a.label.localeCompare(b.label))
})
</script>

<template>
  <select>
    <option 
      v-for="option in sortedOptions" 
      :key="option.id" 
      :value="option.id"
    >
      {{ option.label }}
    </option>
  </select>
</template>

后端PHP处理方案 #

在PHP层直接把数组转为结构化的索引数组，排序后传给前端，前端直接渲染即可：

// 原始关联数组
$options = [
  1 => "Vexapa",
  5 => "Linga & Satro",
  6 => "Feearlees",
  // ... 其他选项
];

// 转换为带id和label的数组并按值排序
$sortedOptions = collect($options)
  ->map(fn($label, $id) => ['id' => $id, 'label' => $label])
  ->sortBy('label')
  ->values() // 重置索引为连续数字，确保转成JS数组而非对象
  ->toArray();

// 传给Inertia页面
return Inertia::render('YourPage', [
  'options' => $sortedOptions
]);

这样前端拿到的是已经排好序的数组，直接用v-for渲染选择框即可，无需再处理排序逻辑。

内容的提问来源于stack exchange，提问作者eripanci