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

二、使用

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

后臺(tái)傳來(lái)的數(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}
]

前臺(tái)使用要為：

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

用到map()只需一行（我同學(xué)想要用到for循環(huán)遍歷出來(lái)）我就覺(jué)得很麻煩，只記得之前貌似用過(guò)map()?？旖莘椒ǔ鰜?lái)了學(xué)去吧。

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

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

新的接口傳來(lái)data（json）：

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

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

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

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

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

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

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