背景

最近需要做一个大屏统计的功能，两个图标分别按照一天内每个小时统计数量、一年内每个月统计数量，前端要求返回有序的JSON。

首先往缓存中存放的时这样的结构(HASH)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

"01": 0,
"02": 0,
"03": 0,
"04": 0,
"05": 0,
"06": 0,
"07": 0,
"08": 0,
"09": 0,
"10": 0,
"11": 0,
"12": 0,
"13": 0,
"14": 0,
"15": 0,
"16": 0,
"17": 0,
"18": 0,
"19": 0,
"20": 0,
"21": 0,
"22": 0,
"23": 0,
"24": 0

后台代码取出的Map，不管是否有序都会使用TreeMap进行重新排序，最后返回前端的数据时这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
    "viewingCharts": {
        "01": 0,
        "02": 0,
        "03": 0,
        "04": 0,
        "05": 0,
        "06": 0,
        "07": 0,
        "08": 0,
        "09": 0,
        "10": 0,
        "11": 0,
        "12": 0,
        "13": 0,
        "14": 0,
        "15": 0,
        "16": 0,
        "17": 0,
        "18": 0,
        "19": 0,
        "20": 0,
        "21": 0,
        "22": 0,
        "23": 0,
        "24": 0
    }
}

问题

返回的数据看着没有问题，但是使用接口软件调用，和使用浏览器控制台请求发现返回的值就会变成这样的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
	"viewingCharts": {
		"10": 0,
		"11": 0,
		"12": 0,
		"13": 0,
		"14": 0,
		"15": 0,
		"16": 0,
		"17": 0,
		"18": 0,
		"19": 0,
		"20": 0,
		"21": 0,
		"22": 0,
		"23": 0,
		"24": 0,
		"01": 0,
		"02": 0,
		"03": 0,
		"04": 0,
		"05": 0,
		"06": 0,
		"07": 0,
		"08": 0,
		"09": 0
	}
}

坑点

一、接口软件自动美化JSON

即使返回结果是正常的有序的，但是经过部分软件格式化之后有可能顺序重新排列，如果可以尽量看原生的返回结果，比如这样：

错误的结果，默认美化。。。

image-20210726155606280

正确的返回结果：可以看到实际返回的是有序的

image-20210726155719271

再来看一下百度一些格式化网站的结果：

image-20210726161114473

二、将个位数像01、02等的小key换成像1、2的格式，无论如何美化都是按照原样输出

原生：

image-20210726164131717

美化后的：

image-20210726163929903

再来看一下百度一些格式化网站的结果：

image-20210726163205324

尾言

挺奇葩的，本来看这个半天摸不着头脑，为啥到返回过来就变了，直到让同事试了试，结果他返回的数据是按照正常顺序输出的。