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

时间 2019-12-01

原文原文链接

不少时候咱们在作页面的时候会遇到这样的一个状况，咱们须要显示一个下拉框，而后须要把选择的值传到后台，而页面须要显示咱们选择的数据项的名称，咱们可能会这样实现：javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>Title</title>
</head>
<body>
<div id="app">
  <p>用Array实现：</p>
  <el-select v-model="selectId" @change="changeItem">
    <el-option v-for="(item,index) in showList" :value="item.id" :label="item.name" :key="index"></el-option>
  </el-select>
  <p v-show="selectId">{{`当前选择：${showText},id为${selectId}`}}</p>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script> var vm = new Vue({ el:"#app", data: function () { return { selectId:'', showText:'', selectMapId:'', showList: [ {name: '西游记', id: 1}, {name: '三国演义', id: 2}, {name: '水浒传', id: 3}, {name: '红楼梦', id: 4} ] } }, methods: { changeItem() { for (let i in this.showList) { if (this.showList[i].id == this.selectId) { this.showText = this.showList[i].name break } } } } }) </script>
</html>
复制代码

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <title>Title</title>
</head>
<body>
<div id="app">
  <p>用Map实现：</p>
  <el-select v-model="selectId">
    <el-option v-for="(val,key) in showMap" :value="key" :label="val" :key="key"></el-option>
  </el-select>
  <p v-show="selectId">{{`当前选择：${showMap[selectId]},id为${selectId}`}}</p>
</div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script> var vm = new Vue({ el:"#app", data: function () { return { selectId:'', showText:'', selectMapId:'', showList: [ {name: '西游记', id: 1}, {name: '三国演义', id: 2}, {name: '水浒传', id: 3}, {name: '红楼梦', id: 4} ] } }, methods: {}, computed: { showMap(){ let map = {} this.showList.forEach(row =>{ map[row.id] = row.name }) return map } }, }) </script>
</html>

复制代码

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

全部代码的源码能够在github上下载的到：下载地址，点击可查看运行效果：线上地址最后能够关注个人我的公众号，实时查看更多更好的文章: vue