JSON 对象在浏览器中顺序与后端接口返回不一致的问题
一、问题描述
后端接口返回一个字典表的JSON对象，页面展示排序与预期排序不一致。
在浏览器调试面板Response中看到接口原始响应字符串，是期望顺序：
在Preview中看到， key “22” 被提到最前，顺序发生变化：
页面展示排序与Preview中看到的一致，与后端返回的不一致。
二、原因
问题发生在浏览器将接口返回的JSON对象格式字符串解析为JSON对象的过程中， JavaScript 引擎解析JSON对象时，遵循 ECMAScript 标准定义（ES6+ 开始统一行为）的 对象属性枚举顺序 的内部规范，JavaScript 对象属性的 对象属性枚举顺序 规则如下：
1. 整数索引属性
键为非负整数的字符串（例如 “0”, “1”, “22”）会被优先枚举，按数值升序排列。
2. 普通字符串键（非整数）
如 “Ent01”, “abc”, “@type” 等,按插入顺序枚举，排在所有整数属性之后。
3. Symbol 类型键（不常见）
不参与常规的 for…in 和 Object.keys() 遍历。
因此，JSON对象字符串被JavaScript解析为JSON对象后，对象属性名为纯数字的排序在前，非数字字符排序在后，JSON对象的属性的顺序可能发生变化。
三、总结
这是一个由 JavaScript 对象内部规范引起的浏览器行为问题。
后端返回的是JSON对象格式，根据JSON的官方标准，JSON 对象的定义是一组无序的键值对，所以对顺序有要求的场景不应该使用对象结构，应该使用JSON中的数组。
JSON对象 和 JSON数组 的区别
| 特性 | JSON对象 | JSON数组 |
|---|---|---|
| 语法 | 用 {} 包裹，键值对形式 | 用 [] 包裹，值的有序集合 |
| 键 | 必须是字符串（双引号包裹） | 无键，直接是值 |
| 值的顺序 | 无序 | 有序 |
| 用途 | 表示具有属性的数据（如对象、配置） | 表示列表型数据（如数组、集合） |
| 示例 | {“张三”: { “age”: 25 }, “李四”: { “age”: 30 }} | [ { “name”: “张三”, “age”: 25 }, { “name”: “李四”, “age”: 30 }] |
如果无法通过修改代码结构解决，只能在设计需要排序的字段时，避免使用纯数字字符串作为键名。