如何确保JavaScript对象的属性遍历顺序与后端返回顺序一致

这个问题的核心在于JSON规范本身不保证对象属性的顺序，不同JavaScript引擎（比如不同浏览器、Node.js版本）在解析JSON时，可能会对属性进行重新排序（比如把以数字开头的键优先排序），这就导致你用Object.entries()遍历的时候，顺序和后端返回的不一致。

最可靠的解决方案：改用数组传递有序数据 #

后端返回数据时，不要用对象，而是返回一个有序数组，数组的每个元素包含键和对应的值。比如：

// 后端返回的数组格式示例
const dataFromBd = [
  ['1M', { name: 'anna' }],
  ['1Y', {}],
  ['2Y', {}],
  ['3M', {}],
  ['3Y', {}],
  ['4Y', {}],
  ['5Y', {}],
  ['6M', {}],
  ['7Y', {}],
  ['10Y', {}],
  ['14D', {}],
  ['15Y', {}],
  ['>20Y', {}]
];

然后遍历这个数组，顺序完全和后端一致，遇到'10Y'就停止：

let updatedData = {};
for (const [key, value] of dataFromBd) {
  updatedData[key] = 'hello';
  if (key === '10Y') break;
}
console.log('data', updatedData);

数组的顺序是JavaScript规范严格保证的，完全不会出现遍历顺序混乱的问题，这是最优解。

备选方案：后端额外返回属性顺序数组 #

如果后端无法修改返回的对象结构，可以让后端同时返回一个包含属性顺序的数组，比如：

// 后端返回的数据格式示例
const dataFromBd = {
  propertyOrder: ['1M', '1Y', '2Y', '3M', '3Y', '4Y', '5Y', '6M', '7Y', '10Y', '14D', '15Y', '>20Y'],
  values: { 
    '1M': { name: 'anna' }, 
    '1Y': {}, 
    '2Y': {}, 
    '3M': {}, 
    '3Y': {}, 
    '4Y': {}, 
    '5Y': {}, 
    '6M': {}, 
    '7Y': {}, 
    '10Y': {}, 
    '14D': {}, 
    '15Y': {}, 
    '>20Y': {} 
  }
};

然后遍历这个propertyOrder数组来更新数据：

let updatedData = {};
for (const key of dataFromBd.propertyOrder) {
  updatedData[key] = 'hello';
  if (key === '10Y') break;
}
console.log('data', updatedData);

这种方式也能严格保证遍历顺序，因为我们是按照后端指定的顺序数组来处理的。

为什么原来的代码会出问题？ #

你遇到的Object.entries()遍历顺序异常，本质是因为：

1. JSON规范没有定义对象属性的顺序，所以后端返回的JSON字符串在解析成JavaScript对象时，属性的插入顺序是不确定的（不同引擎可能有不同的排序逻辑）。
2. ES6虽然规定了对象自有属性的遍历顺序，但这个顺序依赖于属性的插入顺序，并且对于可以被转换为整数的字符串键（比如'123'）会优先按数值排序，而你的键（比如'14D'）虽然不是纯整数，但有些引擎可能会对以数字开头的键进行特殊处理，导致顺序混乱。

所以依赖对象的遍历顺序来处理业务逻辑是不可靠的，必须用数组来保证顺序。

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