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

伊澤瑞爾發表於2018-11-07
JS

很多時候我們在做頁面的時候會遇到這樣的一個情況，我們需要顯示一個下拉框，然後需要把選擇的值傳到後臺，而頁面需要顯示我們選擇的資料項的名稱，我們可能會這樣實現：

<!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陣列，來獲取當前下拉框選擇的值。 我們再看看用物件來實現：

<!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了. 可以看到，講資料轉換為物件之後，再來取值等一系列操作，就省了很多程式碼了。 最後們看一下執行截圖。

執行

所有程式碼的原始碼可以在github上下載的到：下載地址， 點選可檢視執行效果：線上地址 最後可以關注我的個人公眾號，實時檢視更多更好的文章:

公眾號

相關文章