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 的用法。