（vue项目）巧用ES6中的数据类型Map

需求如下

表单添加项的某个选择器的选项,大致是这个格式，而且是可维护的，是从后端请求并返回的：

//存value的值
options: [
        {
          id:1,label: "设施",value: 0,
        },
        {
          id:2,label: "大田", value: 1,
        },
        {
          id:3,label: "养殖地",value: 2,
        },
        {
          id:4,label: "塘口",value: 3,
        },
      ],

表单列表的显示是要显示label，如下:

//获取的表单列表,其中breedType为上面选择器的值
list:[
   {
        id:1000,breedName: "品种名称1",breedType: 0,
   },
    {
        id:1001,breedName: "品种名称2", breedType: 1,
    },
    ...
]

页面展示的内容
第1行：品种名称1，设施
第2行：品种名称2，大田

这个时候也不方便用filter，因为选项是异步获取的

Map数据类型在这里的用法

//封装的axios请求方法
 DictionaryApi.getList(传给后台获取列表的值).then(res=>{
//中间省略的一些内容，就假设res是获取的列表，格式同上面的options
        let list = new Map()
        
       res.forEach(item=>{
          list.set(
            item.value,
            item.label
          )
        })
        this.options1 = list

这样option1就是我们最后处理完的数据

页面上（此处ui框架是element）：

//使用了Map数据类型自带的get方法，通过键获得值
 <el-table-column  label="品种类型">
        <template v-if="options1" slot-scope="scope">
          {{ options1.get(scope.row.breedType) }}
        </template>
 </el-table-column>

优点

Map是一组键值对的结构，具有极快的查找速度。