在实际项目中，有时会遇到后端传的字段值需要通过字典转换，比如这样一个字典

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    res:
    [
        {
            code: 'apple',
            codeName: '苹果'
        },
        {
            code: 'banana',
            codeName: '香蕉'
        },
        {
            code: 'watermalon',
            codeName: '西瓜'
        },
    ]
}

当后端存储和返回的是 code 的时候，为了在页面上展示对应的中文名称，可以通过 Map 数据结构来进行高效的键值转换。具体要如何使用 Map 呢？

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
// 通过接口获取的字典
const fruit = [
        {
            code: 'apple',
            codeName: '苹果'
        },
        {
            code: 'banana',
            codeName: '香蕉'
        },
        {
            code: 'watermalon',
            codeName: '西瓜'
        },
]

// 使用 get(key) 就可以获 code 对应的值
get fruitMap() {
    const map = new Map();
    for (let item of this.fruit) {
        map.set(item.code, item.codeName)
    }
    return map;
}

console.log(fruitMap.get('watermalon')); // '西瓜'

获得了需要的 Map 对象后，除了使用 get 获取值对应的名称，也可以进行其他操作
put(key, value)：向散列表添加一个新的项（也能更新散列表）。
remove(key)：根据键值从散列表中移除值。
get(key)：返回根据键值检索到的特定的值。
entries()：返回散列表中的所有键值对。