一、問題描述

后端接口返回一個字典表的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 }]

如果無法通過修改代碼結構解決，只能在設計需要排序的字段時，避免使用純數字字符串作為鍵名。