Vue中map()的用法案例
前言
記錄vue常用得map()，喜歡在前臺處理數(shù)據(jù)，但是map()用得也不熟悉。這兩天頻繁用，也沒看到好的參考樣例(可能好的我沒找到)。就自己試著寫琢磨出來，自己記錄一下。省的以后用再去翻找(自己腦子記不住哇 T_T ).
一、map()是什么？
其實我也不清楚，會用就好啦。數(shù)組操作是前端最重要的數(shù)據(jù)操作，構(gòu)造數(shù)組數(shù)據(jù)，重構(gòu)解析數(shù)組又是數(shù)組操作中很常見的。下面我將寫出我得心得和map()在Vue項目中的使用。
二、使用
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()?？旖莘椒ǔ鰜砹藢W(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()可這么用??，還有更多等我們一起探索
三、總結(jié)
方便太多了同學(xué)都來向我請教了,寫的明白易懂吧相信也會用了(小白教程)。
以上就是今天要記錄的內(nèi)容，本文僅僅簡單介紹了map()在vue中數(shù)據(jù)處理的一點皮毛，而map()提供了大量能使我們快速便捷地處理數(shù)據(jù)的函數(shù)和方法還等待我去使用發(fā)現(xiàn)
到此這篇關(guān)于Vue中map()用法的文章就介紹到這了,更多相關(guān)Vue map()用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件
本篇文章主要介紹了詳解windows下vue-cli及webpack 構(gòu)建網(wǎng)站(三)使用組件，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了Vue?github用戶搜索案例分享，文章基于Vue的相關(guān)資料展開對主題的詳細(xì)介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-04-04
微信H5項目，ios端出現(xiàn)了軟鍵盤輸完隱藏后頁面不會回彈，下方會有一大塊留白。這篇文章主要介紹了決微信H5頁面軟鍵盤彈起后頁面下方留白的問題（iOS端） ,需要的朋友可以參考下2019-06-06
VueQuillEditor富文本上傳圖片(非base64)
這篇文章主要介紹了VueQuillEditor富文本上傳圖片(非base64),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了vue計算屬性computed的使用方法,結(jié)合實例形式分析了vue計算屬性computed的基本用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
這篇文章主要為大家詳細(xì)介紹了vue基于echarts實現(xiàn)立體柱形圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue如何基于es6導(dǎo)入外部js文件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
今天小編就為大家分享一篇關(guān)于vue組件事件屬性穿透詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了vue中@click綁定事件點擊不生效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue圖片上傳本地預(yù)覽組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02