先來(lái)看一下對(duì)數(shù)組map()方法的定義：map() 方法返回一個(gè)由原數(shù)組中的每個(gè)元素調(diào)用一個(gè)指定方法后的返回值組成的新數(shù)組。
大家要注意map在這里并不是地圖的意思，確切的解釋?xiě)?yīng)該是映射借笙！也就是說(shuō)通過(guò)該方法你可以經(jīng)過(guò)一些自己的邏輯處理泻云，映射出來(lái)一個(gè)新的數(shù)組切平，而對(duì)原數(shù)組沒(méi)有影響。
先來(lái)看一個(gè)示例脆诉，對(duì)arr的元素值乘以2，并生成一個(gè)新的數(shù)組newArr:
var arr=[1,3,4,5,7,9];
var newArr=arr.map((v)=>{
return v*2;
})
//newArr為arr元素值的2倍
console.log(newArr);//[ 2, 6, 8, 10, 14, 18 ]
//arr的值并沒(méi)有發(fā)生變化
console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]
如果你要你想對(duì)奇數(shù)乘以2的話贷币，你可以這樣：
var arr=[1,3,4,5,7,9];
var newArr=arr.map((v)=>{
if(v%2==1)
return v*2;
return v;
})
//newArr中只有元素值為4的偶數(shù)沒(méi)有發(fā)生變化
console.log(newArr);//[ 2, 6, 4, 10, 14, 18 ]
//arr的值并沒(méi)有發(fā)生變化
console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]
map方法中的回調(diào)必須要有返回值击胜，否則會(huì)被映射為undefined：
var arr=[1,3];
var newArr=arr.map((v)=>{})
// 沒(méi)有return 映射出來(lái)的值為undefined
console.log(newArr);//[ undefined, undefined ]
// arr的值并沒(méi)有發(fā)生變化
console.log(arr);//[ 1, 3 ]
在實(shí)際使用中，咱們一般都會(huì)通過(guò)該方法取到原數(shù)組中的一些特定值役纹，比如：
var arr=[
{
userName:"xiaozhang",
phoneNum:"151098765**"
},{
userName:"laowang",
phoneNum:"158984736**"
}
];
var phoneArr=arr.map((item)=>{
//只提取其中的手機(jī)號(hào)碼
return item.phoneNum
});
console.log(phoneArr);//[ '151098765**', '158984736**' ]
map方法與forEach使用起來(lái)類(lèi)似：都是循環(huán)遍歷數(shù)組中的每一項(xiàng)偶摔；每次執(zhí)行匿名函數(shù)都支持3個(gè)參數(shù)，參數(shù)分別是item（當(dāng)前每一項(xiàng)）促脉、index（索引值）辰斋、arr（原數(shù)組）；匿名函數(shù)中的this都是指向window：都只支持?jǐn)?shù)組瘸味。
不同點(diǎn)在于forEach運(yùn)行后的返回值為undefined宫仗。并不像map方法一樣會(huì)映射一個(gè)新的數(shù)組：
var arr=[1,3,4,5,7,9];
var newArr=arr.forEach((v)=>{
return v*2;
})
//undefined
console.log(newArr);//undefined
//arr的值并沒(méi)有發(fā)生變化
console.log(arr);//[ 1, 3, 4, 5, 7, 9 ]
