通过Map结构数据来处理业务逻辑中的response data？

Question

在业务开发过程中，会有很大概率在与后台对接数据的时候，遇到这种数据格式{...data:[{...id:10000,name:'中国电信',...},],...}假设我们已经将这个data渲染为一个列表，然后现在有一个需求:在一个Input组件中输入id,之后对data中对应的id那一项进行某些业务处理。按之前的习惯，就直接这样了//处理Input组件输入事件handleInput(id){data.forEach(item=>{if(item.id===id){//拿到item，然后处理业务逻辑}})}但是这样的话感觉每次都得将整个data遍历一遍，感觉太浪费性能了。所以在想可不可以用Map来处理一下，比如//将data转换成类似Map的数据结构，或者newMap()貌似也可以？toMap(data,mainKey='id'){constmap={};data.forEach(item=>{map[mainKey]=item;});returnmap;}constmap=toMap(data);这样转换之后，后续就可以在handleInput(id)方法中直接用map[id]或者如果使用Map的话map.get(id)来获取到对应的item了。不知道这样做在实际的业务开发中是否具有可行性。。。

Answer 1

我并不清楚js，所以我从c/c++的角度回答下。
用map是个不错的选择，首先复杂度就已经从n降到logn了，如果你的数据量级在上千以上的话，可以作个测试，比对下n和logn的时间差距（量级越大，差距越大）。
再者，就是你用了map后的这句代码，
data.forEach(item=>{
map[mainKey]=item;
});
其中的forEach，我不清楚js是怎么实现的，至少在map中如果你要根据key找一个数据，应该用这个map提供的类似find的接口，这个接口的实现复杂度是logn。
用forEach，它实现的机制，可能是中序遍历（利用左右孩子指针，具体参考线索二叉树），也就是说，它的查找复杂度是n，一般用这种方法的目的，就是按序输出所有数据。
所以，js的map容器的接口，是用find这种的，还是forEach，得去看文档说明，或者谷歌，看下它们具体的内部实现机制。
-----------------------------分割-----------------
看了下上面的回答，如果你的data可以O(1)索引取值的话，建一个哈希映射也可以，但内存的代价自己估量，我说的哈希不是用map，它是一个整型数组，把id作为数组下标，data索引作为数组的值。
                            

Answer 2

可以啊，但是你写的都太麻烦了
过滤直接用`filter：
[{id:1,name:'1'},{id:2,name:'2'}].filter(({id})=>id===1)
转化直接用map：
[{id:1,name:'1'},{id:2,name:'2'}].map(d=>({[d.id]:d}))
```
写成公用的toMap：
functiontoMap(data,key){
returndata.map(d=>({[d[key]]:d}))
}
想要获取原始列表：
Object.values(toMap(data))