ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

JSON 对象在浏览器中顺序与后端接口返回不一致的问题

JSON 对象在浏览器中顺序与后端接口返回不一致的问题 一、问题描述后端接口返回一个字典表的JSON对象页面展示排序与预期排序不一致。在浏览器调试面板Response中看到接口原始响应字符串是期望顺序在Preview中看到 key “22” 被提到最前顺序发生变化页面展示排序与Preview中看到的一致与后端返回的不一致。二、原因问题发生在浏览器将接口返回的JSON对象格式字符串解析为JSON对象的过程中 JavaScript 引擎解析JSON对象时遵循 ECMAScript 标准定义ES6 开始统一行为的对象属性枚举顺序的内部规范JavaScript 对象属性的对象属性枚举顺序规则如下1. 整数索引属性键为非负整数的字符串例如 “0”, “1”, “22”会被优先枚举按数值升序排列。2. 普通字符串键非整数如 “Ent01”, “abc”, “type”, “001” 等,按插入顺序枚举排在所有整数属性之后。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 }]如果无法通过修改代码结构解决只能在设计需要排序的字段时避免使用纯数字字符串作为键名。
返回列表