通过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))