Vue中map()的用法案例

2022-07-08 18:04:41

前言

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

一、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()的用法案例

目錄

前言

一、map()是什麼？

二、使用

1.案例一：取給定陣列的某一欄位組成新陣列

2.案例二：取給定陣列的某些欄位重新命名並組成新陣列

熱門文章