快捷導(dǎo)航

Vue中map()的用法案例

更新時間：2022年07月08日 16:27:04 作者：?o????HHANG?????

map()函數(shù)定義在JS的array中,它返回一個新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于Vue中map()的用法案例,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

記錄vue常用得map()，喜歡在前臺處理數(shù)據(jù)，但是map()用得也不熟悉。這兩天頻繁用，也沒看到好的參考樣例(可能好的我沒找到)。就自己試著寫琢磨出來，自己記錄一下。省的以后用再去翻找(自己腦子記不住哇 T_T ).

一、map()是什么？

其實(shí)我也不清楚，會用就好啦。數(shù)組操作是前端最重要的數(shù)據(jù)操作，構(gòu)造數(shù)組數(shù)據(jù)，重構(gòu)解析數(shù)組又是數(shù)組操作中很常見的。下面我將寫出我得心得和map()在Vue項(xiàng)目中的使用。

二、使用

1.案例一：取給定數(shù)組的某一字段組成新數(shù)組

后臺傳來的數(shù)據(jù) data（json）：

[   //data的數(shù)據(jù)
    {"txt":"09:00-12:00","codId":"1","flgDel":"0","id":1},
    {"txt":"13:00-16:00","codId":"1","flgDel":"0","id":2},
    {"txt":"18:00-20:00","codId":"1","flgDel":"0","id":3}
]

前臺使用要為：

['09:00-12:00', '13:00-16:00', '18:00-20:00']

用到map()只需一行（我同學(xué)想要用到for循環(huán)遍歷出來）我就覺得很麻煩，只記得之前貌似用過map()。快捷方法出來了學(xué)去吧。

let time = data.map(item =>(item.txt))
console.log(time) 
//控制臺輸出如下
//['09:00-12:00', '13:00-16:00', '18:00-20:00']

2.案例二：取給定數(shù)組的某些字段重命名并組成新數(shù)組

新的接口傳來data（json）：

[  //新data數(shù)據(jù)
{"txt":"拜訪","flgDel":"0","id":1},
{"txt":"面試","flgDel":"0","id":2},
{"txt":"其他","flgDel":"0","id":3}
]

前臺使用數(shù)組結(jié)構(gòu)：

[{ name: '拜訪' }, { name: '面試' }, { name: '其他' }]
//這里看到相比于案例一有字段了，還新命名了

//只需一行map()
let resion = data.map(item =>({name: item.txt}))
console.log(resion) 
//控制臺輸出
//[{ name: '拜訪' }, { name: '面試' }, { name: '其他' }]

當(dāng)然，或許你要的這樣? :

[{ name: '拜訪',id:'1' }, { name: '面試',id:'2' }, { name: '其他',id:'3'}]
//要兩個字段的數(shù)據(jù)

let resion2 = data.map(item =>({name: item.txt, id: item.id}))
console.log(resion2) 
//控制臺輸出
//[{ name: '拜訪',id:'1' }, { name: '面試',id:'2' }, { name: '其他',id:'3'}]

又或許你想要這樣? :

[{ name: '拜訪1' }, { name: '面試2' }, { name: '其他3'}]
//要拼接的數(shù)據(jù)

let resion3 = data.map(item =>({name: item.txt + item.id}))
console.log(resion3) 
//控制臺輸出
//[{ name: '拜訪1' }, { name: '面試2' }, { name: '其他3'}]
//這數(shù)據(jù)看著好奇怪，沒這么用的。我只想說map()可這么用??，還有更多等我們一起探索