0%

对象内url链接太多时的优化

背景

在滴滴实习过程中,在一个需求中发现了一个问题

有一块轮播图。这块轮播图展示的就是该司机城市所参与的保司,如果司机还没参与计划,城市就获取不到,这个时候就展示所有参与的保司

不同城市参与的保司一直在更新,这就需要去手动维护,但是这一点是给我们前端去维护的,我们把保司上传到一个平台上,我们接口是去请求的这个平台的数据。

最初的格式

最初的格式是,一个大对象。这个对象的key是id,代表城市id,value是logo链接。

这样,我们每次维护的时候,很麻烦。

1
2
3
4
5
6
7
8
9
10
11
12
13
{
0:[
'url','url','url'
],
1:[
'url','url','url'
],
2:[
'url','url','url'
],

.......
}

这样的对象有这些缺点:

​ url链接太多,看起来非常杂乱

​ 完全看不出来,在某个城市id中,到底包含的是哪些保险公司,只能通过有几个url来判断有几个保险公司

​ 最初,我们得手动去一个一个修改,而且还得对着xlsx文件看,而且整个对象看起来会非常复杂,因为key是id。value是一堆url链接,每次找对应的城市id会很麻烦,而且找到后也不能很明显的看出来,我们找到的城市的id对不对,只能看一下保司logo数量对不对。

改造后的格式

可以将这个对象改造,改造成如下格式:

有几个保司就加几个companyXXX,然后在每个城市id对应的value,将url换成对应的保司名字

这样的好处是,能清晰的看出,某个城市id,包含的到底是哪些保险公司

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"company1": [
"中华联合财产保险股份有限公司",
"url"
],
"company2": [
"众诚汽车保险股份有限公司",
"url"
],
......
"2": [
"中华联合财产保险股份有限公司",
"众诚汽车保险股份有限公司",
"中国太平洋财产保险股份有限公司",
"中国大地财产保险股份有限公司"
],
"3": [
"中国大地财产保险股份有限公司",
"中华联合财产保险股份有限公司",
"众诚汽车保险股份有限公司"
],
......
}

将对象这样改造后,整体可读性大大提升,不会像之前那样杂乱无章

问题解析

相信有些同学肯定想到:

1、为什么要用数组格式,用对象不是很方便吗

解答

这里的配置之所以不把各个保司写成对象形式,是因为这个数据是要通过后端返回给我的,后端对数据格式做了限制,必须是数组形式

2、为什么要用一维数组,不可以把多个保司以及对应的logo合并成一个数组吗

解答

也是因为后端做的限制,必须是一维数组

其他

业务那边会给我们一个xlsx文件,里面就是需要修改的每个城市以及对应的保司,我们需要去读取出数据,这里我写了另外一篇文章,感兴趣的同学可以去看看

node读取xlsx文件

当然,我们拿到配置后,也可以把他转成对象,转换方法就是:

1
2
3
4
5
6
7
8
9
10
11
const keysNumbers = Object.keys(newCityInsuranceLogo3And4)
// 遍历出keysNumbers里面所有包含'company'的key
const companyKeys = keysNumbers.filter(item => item.includes('company'))
// 然后遍历companyKeys,然后把newCityInsuranceLogo3And4里面的值取出来,然后放到company数组里面,拼接成一个数组
const company = []
const companyObj = {}
// 这里把companyKeys里面的值取出来,然后放到companyObj,这个对象的key是保司名字,value是这个保司的logo的url
companyKeys.forEach(item => {
const companyValue = newCityInsuranceLogo3And4[item]
companyObj[companyValue[0]] = companyValue[1]
})
-------------本文结束感谢您的阅读-------------
技术原创:姚渐新,您的支持将鼓励我继续创作