Vue中map()怎么使用

本篇內容主要講解“Vue中map()怎么使用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Vue中map()怎么使用”吧!

一、map()是什么？

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

二、使用

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

后臺傳來的數據 data（json）：

[   //data的數據
    {"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()只需一行（我同學想要用到for循環遍歷出來）我就覺得很麻煩，只記得之前貌似用過map()。快捷方法出來了學去吧。

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

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

新的接口傳來data（json）：

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

前臺使用數組結構：

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

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

當然，或許你要的這樣? :

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

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'}]
//要拼接的數據

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

到此，相信大家對“Vue中map()怎么使用”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！