vue中map()快速使用方法小結(jié)

更新時間：2023年12月18日 09:35:19 作者：巧巧里

map()函數(shù)是在JS的數(shù)組中定義的,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于vue中map()快速使用的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一、map()定義和用法(菜鳥教程)

map() 方法返回一個新數(shù)組，數(shù)組中的元素為原始數(shù)組元素調(diào)用函數(shù)處理后的值。

map() 方法按照原始數(shù)組元素順序依次處理元素。

注意： map() 不會對空數(shù)組進行檢測。

注意： map() 不會改變原始數(shù)組。

也就是對一個數(shù)組進行一定的處理并返回處理的結(jié)果。

二、map()使用

const data = res.map(item => item.id);
const data = res.map(item => return item.id);
const data = res.map(item => { name: item.name, id: item.id })
const data = res.map(item => { text: item.id + item.name });
const data = res.map(item => {
const temp = find(options, { code: item });
return temp;
})

三、一點小總結(jié)

寫不寫return 都會返回一個數(shù)組，需要一個值來接收這個數(shù)組。

某種程度上和foreach差不多，但是foreach不會返回。

四、foreach map every some find區(qū)別

foreach遍歷數(shù)組，不會有返回值。

map遍歷數(shù)組，返回處理后的新數(shù)組。

every判斷數(shù)組中每一個元素是否符合某個條件，返回一個布爾值。

some判斷數(shù)組中是否有元素符合某個條件，返回一個布爾值。

filter篩選數(shù)組中滿足條件的元素，返回篩選后的新數(shù)組。

find：返回符合條件的第一個對象。

附：map更新后不重新渲染頁面問題

<el-row :gutter="12">
      <el-col class="m10-right1" :span="8" v-for="items in baseList2" :key="items.id">
     </el-col>
</el-row>

data () {
    return {
      myMapChangeTrucher：0,
      mapbasicList:new Map(),//存放基站基本信息的map
    };
},
  methods: {
    getBaseData(ret){
      this.mapbasicList.set(ret.baseId,ret)
      this.myMapChangeTrucher+=1  //改變參數(shù)
    },
  }
computed:{
     //使用計算屬性將map裝換為顯示的列表
     baseList2() {
      var x=this.myMapChangeTrucher //監(jiān)聽到參數(shù)的變化  并改變map
      return Array.from(this.mapbasicList.values())
    }
  }

（升級：同上只需要在計算屬性中添加一些代碼）當有兩個map，key相同，需要組合一起使用時：

computed:{
     //使用計算屬性將map裝換為顯示的列表
     baseList2() {
      var x=this.myMapChangeTrucher //監(jiān)聽到參數(shù)的變化  并改變map
      var arr=[] //返回列表的數(shù)組
      this.mapstateList.forEach(element => {
        element.online=this.mapOnline.get(element.bsid) //將在線不在線的數(shù)據(jù)循環(huán)添加到map的新字段中
        arr.push(element)
      });
      return arr
      // return Array.from(this.mapbasicList.values())
    }
  }