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