快捷導(dǎo)航

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

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

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

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

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

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

注意： map() 不會(huì)對(duì)空數(shù)組進(jìn)行檢測(cè)。

注意： map() 不會(huì)改變?cè)紨?shù)組。

也就是對(duì)一個(gè)數(shù)組進(jìn)行一定的處理并返回處理的結(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;
})

三、一點(diǎn)小總結(jié)

寫(xiě)不寫(xiě)return 都會(huì)返回一個(gè)數(shù)組，需要一個(gè)值來(lái)接收這個(gè)數(shù)組。

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

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

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

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

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

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

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

find：返回符合條件的第一個(gè)對(duì)象。

附：map更新后不重新渲染頁(yè)面問(wèn)題

<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:{
     //使用計(jì)算屬性將map裝換為顯示的列表
     baseList2() {
      var x=this.myMapChangeTrucher //監(jiān)聽(tīng)到參數(shù)的變化  并改變map
      return Array.from(this.mapbasicList.values())
    }
  }

（升級(jí)：同上只需要在計(jì)算屬性中添加一些代碼）當(dāng)有兩個(gè)map，key相同，需要組合一起使用時(shí)：

computed:{
     //使用計(jì)算屬性將map裝換為顯示的列表
     baseList2() {
      var x=this.myMapChangeTrucher //監(jiān)聽(tīng)到參數(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())
    }
  }