js技巧用Map集合代替Array遍历

很多时候我们在做页面的时候会遇到这样的一个情况，我们需要显示一个下拉框，然后需要把选择的值传到后台，而页面需要显示我们选择的数据项的名称，我们可能会这样实现：

  
  
  



  
用Array实现：
  
    
  
  
{{`当前选择：${showText},id为${selectId}`}}

可以看到，我们通过绑定change事件来遍历this.showList数组，来获取当前下拉框选择的值。
我们再看看用对象来实现：

  
  
  



  
用Map实现：
  
    
  
  
{{`当前选择：${showMap[selectId]},id为${selectId}`}}

可以看到，我们用computed计算属性来根据this.showList来得到一个新的变量showMap，这样讲数组转换成了我们需要的对象，然后页面上遍历的是这个对象，最后我们取值就不需要绑定change事件通过遍历来获取选中的值了，直接通过对象取值${showMap[selectId]}就ok了.
可以看到，讲数据转换为对象之后，再来取值等一系列操作，就省了很多代码了。
最后们看一下运行截图。

运行

所有代码的源码可以在github上下载的到：下载地址，
点击可查看运行效果：线上地址