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

旧城等待， 2022-05-11 11:52 281阅读 0赞

# 前言 #

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

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

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

# 一 . 现象 #

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

为了证明这一点，我们进行其他的尝试。  
![在这里插入图片描述][70 1]  
当我们使用字符串作为key时候，这种是自动排序被修复了，并没有因为数字的不同而发生变化，12a也没有插入的11a的前面。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70]  
这里我们使用的是数字配置字符的形式，发现还是被自动排序了。

另外一篇博客中说**与ASC码同样无关**，测试后证实确实如此。  
![在这里插入图片描述][201811282138547.]

我们调整顺序得到另外一种结果，测试在前则在前输出  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70 1]

# 二 . 分析 #

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

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

# 三 , 衍生 #

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

# 总结 #

参考博客

[https://blog.csdn.net/bobobocai/article/details/78028497][https_blog.csdn.net_bobobocai_article_details_78028497]

[70]: /images/20220505/5ee6a843e9c9425796743ea7941c7c1f.png
[70 1]: /images/20220505/19b3ccad9b87456dbf7f6f086ce3a4cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70]: /images/20220505/a92fac62872145b29d8144d5cfab90df.png
[201811282138547.]: /images/20220505/1d7e5fe2593e4522995a122e3c875ca6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6ZzE5OTUwODI0_size_16_color_FFFFFF_t_70 1]: /images/20220505/72e1f7ccc7164aec85c5e0b60a2ec36d.png
[https_blog.csdn.net_bobobocai_article_details_78028497]: https://blog.csdn.net/bobobocai/article/details/78028497