Vue中map()的用法案例

Posted on by

前言

記錄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()可這麼用😁，還有更多等我們一起探索

三、總結

方便太多瞭同學都來向我請教瞭,寫的明白易懂吧相信也會用瞭(小白教程)。

以上就是今天要記錄的內容，本文僅僅簡單介紹瞭map()在vue中數據處理的一點皮毛，而map()提供瞭大量能使我們快速便捷地處理數據的函數和方法還等待我去使用發現

到此這篇關於Vue中map()用法的文章就介紹到這瞭,更多相關Vue map()用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：