Map之深入业务

今天讲一下Map深入业务时的用处

需求

更新模版数据
处理模版数据为理想状态下所需数据

模版数据结构(json格式)

解释一下: 数组里面每一个json代表一个页面的所有数据，id为页面唯一标示，数组中index为0的是首屏页面，例如：当前数据中，游戏页面为首屏渲染页面，抽奖页面和结束页面根据不同功能事件来渲染。

var list = [
    {
        nav: { text: '游戏页面' },
        view: {},
        id: 2
    },
    {
        nav: { text: '抽奖页面' },
        view: {},
        id: 3
    },
    {
        nav: { text: '结束页面'}，
        view: {},
        id: 4    
    }
];

业务场景

正常操作

1:获取首页数据

let page = list[0]

2:获取抽奖页面数据

let page = list.filter(json=>json.id == 3)[0]

思考一下，如果我要频繁的获取抽奖页面，是不是频繁的执行list.filter操作

第一种优化：增加空间

1:提前通过id映射list

let list2 = {};
list.forEach(json => {
    !list2[json.id] && (list2[json.id] = json);
});

2:查找抽奖页面

let page = list2[3]

思考一下，每次获取首页的时候操作list，获取id指定页面的时候操作list2，增加空间复杂的同时，让代码变得更加复杂,不利于维护

第二种优化：Map

增加newList，每次业务操作的时候只需要操作newList即可
1:获取newList

let newList = new Map();
list.forEach(json => {
    newList.set(json.id, json);
});

2:获取首页

let page = [...newList.values][0]

3:获取抽奖页面

let page = newList.get(3)

通过简单业务场景，解释一下Map的用法。