iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 13
1

javascript map() 使用方法
上一篇不小心介紹了 airbnb 風格不推薦的 for-of 語法,我們來仔細看看 ESLint airbnb 的規則到底是怎麼說的:

11.1 不要使用迭代器。更好的做法是使用 JavaScript 的高階函式,像是 map()reduce(),替代如for-of 的迴圈語法。

竟然這樣,今天就來練習 map() 處理陣列的用法唄!


map() 特色

  • 會透過函式內所回傳的值組合成一個新的陣列
  • 並不會改變原陣列
  • 回傳數量會等於原始陣列的長度
  • 如果不回傳則是 undefined

簡單來說就是我們若用陣列使用 map() 方法呼叫函式的話,就可以讓陣列中每個元素執行完該函式後,將每個元素的執行結果回傳到一個新的陣列

使用語法

const newArr = arr.map(function (value, index, array){
  //...
});

會使用回調函式(callback)與三個參數,說明如圖:
javascript map() 使用方法說明

範例

假如我是一個包租婆,陣列A儲存我每間房收的房租,但我最近比較缺錢所以打算漲個價斂財,每間房子直接改收兩倍的租金,這時候就可以使用 map() 方法快速計算每間房子漲價後的房租,並儲存在B陣列中:

let A = [9000, 8500, 5500, 6500];
let B = A.map(function (value, index, array) {
    return value*2;
});

console.log(A) // [9000, 8500, 5500, 6500] - 原陣列不會被修改
console.log(B) // [18000, 17000, 11000, 13000] - 發財摟 ^____^

使用箭頭函示的縮寫就會變這樣

let A = [9000, 8500, 5500, 6500];
let B = A.map(item => item*2);
console.log(B) // [18000, 17000, 11000, 13000] - 還是發財摟 ^____^

當啷~得到一樣的結果囉!是不是非常的簡短感覺好像很厲害呢!還沒使用過的朋友們下次可以試試看歐!


【小補充】

map() 方法使用起來跟 forEach() 方法非常類似,最大的區別就是 forEach() 會修改原本的陣列,而map() 方法可以回傳一個新的陣列,並保有原本的舊陣列,另外 forEach() 並不會回傳任何東西,所以寫在 return 裡的東西不會有作用哦!

foreach() 範例

沒有 return :

let A = [9000, 8500, 5500, 6500];
let B = A.map(function (value, index, array) {
    return value*2; // forEach 沒有在 return 的,所以不會有作用
});
console.log(B); // undefined

想要達到一樣的結果可以這樣寫:

let A = [9000, 8500, 5500, 6500];
A.forEach(function (value, index, array) {
    array[index] = value*2;
});
console.log(A); // [18000, 17000, 11000, 13000] - 發財摟 ^____^

參考文章
從ES6開始的JavaScript學習生活
卡斯伯:JavaScript 陣列處理方法 [filter(), find(), forEach(), map(), every(), some(), reduce()]


上一篇
Day12【ES6 小筆記】for 迴圈 vs. for...of - 陣列處理比一比
下一篇
Day14【ES6 小筆記】用 ES6 跟 CSS 做一個調皮的標題
系列文
透過 ESLint 練習 JavaScript ES630
0
huli
iT邦新手 5 級 ‧ 2019-09-15 02:31:24

箭頭函式的範例程式碼那邊:var B = A.map(count= (item) => item*2);
不知道為什麼多了個 count=
應該是 var B = A.map(item => item*2); 才對

江江好 iT邦新手 5 級 ‧ 2019-09-15 13:16:42 檢舉

對欸多寫了XDD!看來我箭頭函式要再加強~噗噗
非常感謝提醒!!
/images/emoticon/emoticon37.gif

forEach 沒有return

let B = A.map(function (value, index, array) {

應該是A.forEach?

0
hannahpun
iT邦新手 5 級 ‧ 2019-09-18 05:30:28

補充: 而且 forEach 並不會回傳任何東西,所以寫在 return 裡的東西不會有作用

江江好 iT邦新手 5 級 ‧ 2019-09-19 14:42:29 檢舉

哇!謝謝補充,我也同步分享範例在文章裡了~謝謝妳/images/emoticon/emoticon24.gif

0
阿展展展
iT邦好手 1 級 ‧ 2019-10-13 12:07:18

包租婆這個比喻好棒,簡單明瞭!!

江江好 iT邦新手 5 級 ‧ 2019-10-21 22:06:45 檢舉

謝謝鼓勵 >///<

我要留言

立即登入留言