为什么写

别问，问就是闲的，问就是行情不好。最近刷b站的时候，刷到一点不错的视频，地址在这里：结构设计，有兴趣的朋友可以去看看

map

Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值。

回忆下基本使用方法：

const map1 = new Map();

map1.set('a', 1); map1.set('b', 2); map1.set('c', 3);

console.log(map1.get('a')); // Expected output: 1

map1.set('a', 97);

console.log(map1.get('a')); // Expected output: 97

console.log(map1.size); // Expected output: 3

map1.delete('b');

console.log(map1.size); // Expected output: 2

实际案例 前端有时候会根据后端返回的某个状态值：1|2 ....，去展示对应的状态：未开始，进行中....

列表数据：list_data

list_data =[
    {
        name:"王二",
        age:23,
        status:1
    },
    {
        name:"李四",
        age:19,
        status:2
    },
    {
        name:"小红",
        age:23,
        status:3
    },
    {
        name:"小白",
        age:25,
        status:4
    },
    {
        name:"李逛",
        age:23,
        status:5
    }
]

状态列表list_status

list_status= [
    {
        status:1,
        value:'状态1'
    },
    {
        status:2,
        value:'状态2'
    },
    {
        status:3,
        value:'状态3'
    },
    {
        status:4,
        value:'状态4'
    },
    {
        status:5,
        value:'状态5'
    },
]

在页面做对应的状态展示时，我们一部分人可能是这样做的：

<div v-for="(item,index) in list_data" :key="index">
  <p>姓名：{{item.name}}</p>
  <p>状态：{{getstatus(item.status)}}</p>
</div>

getstatus(val) {
  let str = ''
  this.list_status.forEach(item => {
    if (item.status === val) {
      str = item.value
    }
  })
  return str
}

展示结果如下：

这样一看是确实是一点毛病没有，但是我们的标题是性能，这只是部少的数据，如果是大数组，每个状态都要走一次函数，这就太那啥了

利用map处理的方式就简单多了

定义一个简单的对象；mapStatus，通过键值对去查找对应的状态字符

<div v-for="(item,index) in list_data" :key="index">
  <p>姓名：{{item.name}}</p>
  <p>状态：{{mapStatus.get(item.status)}}</p>
</div>

let Obj1 = {};
this.list_status.forEach(item => {
  Obj1[item.status] = item.value
})
console.log(Obj1)
this.mapStatus = Obj1

巧妙利用结构设计，提高网站性能

为什么写

map