前端Object的属性自动排序问题

前言

今天碰到个问题，在后端的Map,在前端自动被转换成Object对象，因为我的Key是数字ID，所以被自动的排序，导致展示出现了一定的问题。

下面是对这一现象的深入的分析。

我们知道，HTML中，对象的属性是无序的，但是为什么前端给我们可以展示一个有序的属性列表呢？

一 . 现象

这里我们可以看到，后台顺序和前台打印的顺序是不一样的，原因在于前端的Object是无序的，当我们的key是以数字有序的时候，会被自动排序一次。

为了证明这一点，我们进行其他的尝试。

当我们使用字符串作为key时候，这种是自动排序被修复了，并没有因为数字的不同而发生变化，12a也没有插入的11a的前面。

这里我们使用的是数字配置字符的形式，发现还是被自动排序了。

另外一篇博客中说与ASC码同样无关，测试后证实确实如此。

我们调整顺序得到另外一种结果，测试在前则在前输出

二 . 分析

我们大概可以得到如下几条结论：

• JS存在Key自动排序机制
• JS对象自动排序与ASC码无关
• JS排序的依据已知有两种：
  • 如果是数字，则按照数字排序
  • 如果是数字+字符串，先排序数字,然后依次按照初始放入顺序放入字符串key

三 , 衍生

之所以发现了这个是因为需要做一个前台数据排序的时候，发现后台传的数据是乱的。
解决思路：
1 。 后台准备专门的排序字段，此字段作为对象的key值，这样的好处就是以后调整顺序方便
2 。 将key拼成字符串再前台解开，此方法麻烦，但是无需后台太多操作

总结

参考博客

https://blog.csdn.net/bobobocai/article/details/78028497