原生Object.keys()遍历导致前后端数据顺序不一致？这锅我不背！

前端

2023-09-28 06:01:05

导读

在前后端数据交互中，有时会遇到这样的问题：明明后端传来的数据顺序是确定的，但到了前端展示出来却乱了套。这种情况下，罪魁祸首往往是原生方法Object.keys() 。

问题背景

小明同学遇到了一个棘手的 bug：客服反馈后端上送的原始数据与报表展示的数据顺序不一致。他百思不得其解，明明后端传来的数据是按照日期升序排列的，可到了前端，日期却乱七八糟了。

罪魁祸首：Object.keys()

小明深入调查后，终于发现了问题所在——Object.keys() 。Object.keys() 是 JavaScript 中一个用于获取对象自身可枚举属性键名的原生方法。然而，它有个坑爹的特性：枚举顺序不可靠 。

在大多数情况下，Object.keys() 返回的键名顺序与对象的创建顺序或属性添加顺序一致。但是，当对象包含Symbol类型键名时，Object.keys() 的枚举顺序就会变得不可预测，甚至可能导致前端展示数据的顺序错乱。

解决之道

既然罪魁祸首找到了，解决办法就很简单了：不要使用Object.keys() 。我们可以采用其他可靠的遍历方式，例如：

for...in 循环 ：可以遍历对象的自身可枚举和不可枚举属性。
Object.getOwnPropertyNames() ：返回对象自身可枚举和不可枚举属性键名的数组。
Object.values() ：返回对象自身可枚举属性值的数组，然后通过索引访问键名。

技术指南

如果你需要遍历对象并保持键名顺序，可以使用以下技术指南：

// 使用 for...in 循环
for (const key in object) {
  // ...
}

// 使用 Object.getOwnPropertyNames()
const keys = Object.getOwnPropertyNames(object);
for (const key of keys) {
  // ...
}

// 使用 Object.values()
const values = Object.values(object);
for (const [i, value] of values.entries()) {
  const key = keys[i];
  // ...
}