# 【Day17】map()陣列處理的好方法 ! ###### tags: `JavaScript` `14th鐵人賽` 上一篇介紹高階函式`forEach`進行資料處理,`forEach`雖說比`for loop`好用,但他卻無法更改陣列中的內容,因此就必須學到本篇會說到的`map` ## map `map`的與`forEach`相似,同樣都是在`funtion`中加入三個參數:陣列值、陣列索引、陣列 但有幾個`map`的特性值得注意: - 可以透過`return`回傳值 - 回傳的值會組合成一個新陣列且不會改變原陣列 ### 語法使用 ```jsx let data = [data1,data2,data3]; let data2 = data.map(function(item, index, array){ /* 依陣列資料長度決定function跑幾次 而其中參數名稱也可以作替換 data 原先陣列 data2 經由map處理後的新陣列 item 值-取出陣列中的元素 index 索引-在陣列中的第幾筆資料 array 整個陣列內容 */ return(item,index,array); }) ``` 繼續使用上一回的小狗陣列作為範例: ```jsx var dogs = ["芒狗", "奇異狗", "蘋狗"]; var dogsString = dogs.map(function(item, num, arr) { item += " 是一種狗狗"; return item; }); console.log(dogs); // ['芒狗', '奇異狗', '蘋狗'] console.log(dogsString); // ['芒狗 是一種狗狗', '奇異狗 是一種狗狗', '蘋狗 是一種狗狗'] ``` 可以將較常見的`for loop`、`forEach`、`map`三者進行比較看看自己比較適合用哪一種! 若對本篇內容有任何問題都歡迎討論唷~