iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
1
Modern Web

被 React react 的後端工程師系列 第 10

[DAY 10] 地圖除了畫在床單上,程式裡要怎麼用 map 呢?

  • 分享至 

  • xImage
  •  

我想說的是
map() 方法會建立一個新的陣列,其內容為原陣列的每一個元素經由回呼函式運算後所回傳的結果之集合。

上一篇講了箭頭函數,這一篇來講講 map
根據 MDN 上的說明

map 會將所有陣列中的元素依序分別傳入直執行設定的程式碼,然後使用回傳的值建立一個新的陣列
所以 map 並不會修改呼叫它的原始陣列

如果有其他程式語言經驗,或是原本寫過 javascript 對以下程式碼應該不會感到陌生

使用 for 迴圈

var myArray = [ 1, 2, 3 ];

for (var index in myArray) {
    console.log(myArr[index]);
}

使用 array 的 forEach() 方法

var myArray = [ 1, 2, 3 ];

myArray.forEach(function(element) {
    console.log(element);
});

那為什麼要用 map 呢?簡單來說就是底下幾點

  • 能用forEach()做到的,map()也可以。反過來也是這樣。
  • map()會分配記憶體空間存儲新陣列並回傳,forEach()不會傳回資料
  • forEach() 允許callback 更改原始陣列元素;map()返回新的陣列

舉例來說,如果我們要把學生成績資料全部乘 3,因為大家真的考太爛了
用迴圈的寫法

var grade = [20, 30, 10];

for (var key in grade) {
    grade[key] = grade[key] * 10;
}

// [ 60, 90, 30]
console.log(grade);

這時候萬一,有學生還是被當要來申訴
想知道他原始的成績
因為原始的 grade 陣列已經被修改,我們拿不出原始的成績
就起爭議了,學生找家長來就會很大聲,把我們辦公室坐墊都拆掉

而如果使用 map 來處理的話
則是使用 map 遍歷 grade 所有元素做運算
最後完成後把結果賦值給一個新的陣列 newGrade

var grade = [20, 30, 10];

var newGrade = grade.map(function(element) {
    return element * 10;
});

// [ 60, 90, 30]
console.log(newGrade);

這時候萬一學生又想來拆座墊
我們就可以拿出原始的成績陣列 grade 來證明我們奉公守法坦蕩蕩

下一篇來講講解構


上一篇
[DAY09] 箭頭函數
下一篇
[DAY 11] 煉金術就是分解構築之大哥哥來寫 JavaScript 之 ES6 真會玩
系列文
被 React react 的後端工程師30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言