技術筆記

由於我js17 Q2用到了map()，雖然每次都覺得它很好用，但我每次要用它時，就是估狗再估狗，完全不熟練，不複習我怕code review實在是講不出來...

map()

• map()是個很典型的高階函式，遍歷陣列並根據其內之函式執行創造出新陣列
• 舉例

const arr = [3, 5, 8, 6, 4]

// double
let output = []
for (let i = 0; i < arr.length; i++) {
  output.push(arr[i] * 2)
}
console.log(output);

// triple
let output2 = []
for (let i = 0; i < arr.length; i++) {
  output2.push(arr[i] * 3)
}
console.log(output2);

devtool結果

但以上的程式幾乎重複，唯一不一樣的地方只有arr[i] * 2 ＆arr[i] * 3 ，所以該如何優化？

• 優化後的程式碼

const arr = [3, 5, 8, 6, 4]

function double(x) {
  return x * 2
}

function triple(x) {
  return x * 3
}

function mapWay(array, multiple) {
  let output = []
  for (let i = 0; i < array.length; i++) {
    output.push(multiple(array[i]))
  }
  console.log(output);
}

mapWay(arr, double)
mapWay(arr, triple)

可得相同結果
上述是以土法煉鋼方式弄出來的類似map語法

//回到map語法

const arr = [3, 5, 8, 6, 4]

function double(x) {
  return x * 2
}

function triple(x) {
  return x * 3
}

console.log(arr.map(double));
console.log(arr.map(triple));

還可以用箭頭函式加以簡化

const arr = [3, 5, 8, 6, 4]

console.log(arr.map(x => x * 2))
console.log(arr.map(x => x * 3))

心得

今天自己從頭到尾推敲一次，過程中完全沒有翻找資料，卡住就慢慢想，雖然花了整個下午的時間，但覺得自己功力好像有增加，開心自己竟然寫出來了，自我感覺良好XD高手們看了可能會笑出來

參考資料

• map, filter & reduce 🙏 Namaste JavaScript Ep. 19
• 書 JavaScript概念三明治：基礎觀念、語法原理一次帶走！（第5章）

童言童語

努力看完天書後，來點輕鬆的吧！分享我兒子的童言童語，調劑身心一下

5歲樂咖+2歲嗨啾 = 我的神奇寶貝 皮咖啾

2021/09/10
我：吼～我今天上班超認真的啦～都沒起來坐到屁股都平了！
咖：那你肚子有變平嗎？
爸爸大笑