Nice to Meet You

I’m Hannah, a Taiwanese front end developer.
Have experience on building projects from scratch and enjoy solving problems with a productive team.

Skills

  • HTML, RWD
  • JS, React Js, Vue Js, Angular Js, jQuery
  • CSS, SASS, SMACSS/MVCSS
  • PHP, Wordpress
  • Git, Gulp, webpack

Experience

  • 8+ years of working experience as a web developer
  • Sass / css lecturer for DD Studio
  • Host a conference at FEDC
Contact me
# | Oct 3 2016

從零開始認識 functional javaScript (二)

這是介紹 functional js 的第二章節
上一章節,我們看到善用 function 可以讓 code 更簡潔一點
在這一章節我會將這些技術應用在 list


Working with arrays and lists

上一章我們提到 DRY code
就是把你的 code 打包成 functions 避免重覆
那假如是需要執行一樣的 function 很多次呢?

addColour 這個 function 被執行很多次. 這違背了 DRY 準則.
為了解決,我會把這些需要呼叫的參數裝入一個陣列裡

這樣看起來好多了. 但並不是最好的.
我們需要告訴電腦非常明確的指示( index 多少, 長度多少 ),並檢查它是不是會停止這個迴圈

 

For-Each

*從這裡開始跟翻譯有些許不同,加入了許多自己的理解

其實 js 有一個內建的方法叫 forEach
可以用forEach 達到跟上面例子一樣的結果

是不是簡潔多了!
它會依序抓 colours 裡的值去執行 function!
關於 forEach 更多說明可以點連結

 

Map

forEach 方法很方便,但有它的限制. forEach 並不會回傳任何東西
所以我們無法得到一個新 list
這時可以用 map

想知道更多有關 map, 可以點此

 

Reduce

map 已經很好用了,但其實還有一個方法叫 Reduce
它讓我們可以輸入一個 list,最後只輸出一個值
在解釋之前,我們要先來看一個 function 是怎麼運作的
為了說明這一點,讓我們先來想以下兩個問題

  • 有一個數字組成的 array, 輸出他們的總和 ( ex [1, 3, 5] -> 9 )
  • 有一個字母組成的 array, 輸出通通變成一起並用空白隔開 ( ex [“h”, “a”, “n”, “n”, “a”, “h”] -> “h a n n a h” )

這兩個問題有點蠢,但卻可以顯示 reduce 的強大
你可以用很多方式去解決它(例如用 for 之類)
但這裡就用 reduce 來解決

reduce 是怎麼執行的,我們用一個例子來說明 [1, 3, 5] -> 9

 

previousValue currentValue currentIndex array return
first call 0 1 1 [1, 3, 5] 1
second call 1 3 2 [1, 3, 5] 4
third call 4 5 3 [1, 3, 5] 9

 
想知道更多有關 reduce, 可以點此

 
以下這張圖我覺得解釋得很好
functional_map
map 就像每一個基本食物素材加工後輸出我想要的樣子
reduce 就像這些素材一起變成一個完整的大亨堡

 
一旦你了解 map 跟 reduce 是如何運作的之後
會發現你再也不用 for-loop去做事了…
你可以挑戰自己在下一個 project 完全不要用 for-loop試試看

下面有一些運用 functional js 的 library 提供大家參考

推薦文章

 
下一篇: Functions for making functions

  • Wales Yu

    請問 third call 的previousValue是否為 4 呢?

    • hannahpun

      對!!謝謝指正