Jerry Hong
August 28, 2019
2.5k

# Abstract Thinking - 從 Functional Programming 看見程式之美

August 28, 2019

## Transcript

10. ### Flow - Mihaly Csikszentmihalyi Boredom Anxiety Flow you should be

here challenge skills high high low low

Prepare

Q Y Z M

29. ### 1 2 3 4 5 6 7 8 9 10

……….… 100 … 1000 … 10000 … 100000000 ⼀一 ⼆二 三 四 五 六 七 八 九 ⼗十 …百 …… 千 …….. 萬 ………… 億
30. ### 1 2 3 4 5 6 7 8 9 10

11 !!<-> 20 …… 100 ……… 1000 …… 1000000 … 1000000000 one !!<-> ten eleven !!<-> twenty … hundred … thousand … million ……. billion

35. ### un deux trois quatre cinq six sept huit neuf dix

onze douze treize quatorze quinze seize 1 - 16 是獨立的單字

39. ### vingt et un trente et un quarante et un cinquante

et un soixante et un 20 和 1 30 和 1 40 和 1 50 和 1 60 和 1

+ 2 = 20

95. ### const sum = arr !=> arr.reduce((x, y) !=> x +

y, 0); const map = fn !=> arr !=> arr.map(fn); function onClick (value) { console.log(value); !// ['290', '123', '234']; } 計算使⽤用者輸入數字的總額
96. ### const sum = arr !=> arr.reduce((x, y) !=> x +

y, 0); const map = fn !=> arr !=> arr.map(fn); function onClick (value) { console.log(value); !// ['290', '123', '234']; const numArr = map(Number)(value); const result = sum(numArr); console.log(result); } 計算使⽤用者輸入數字的總額

98. ### const sum = arr !=> arr.reduce((x, y) !=> x +

y, 0); const map = fn !=> arr !=> arr.map(fn); function onClick (value) { console.log(value); !// ['290', '123', '234']; const numArr = map(Number)(value); const result = sum(numArr); console.log(result); } 計算使⽤用者輸入數字的總額
99. ### const sum = arr !=> arr.reduce((x, y) !=> x +

y, 0); const map = fn !=> arr !=> arr.map(fn); const compose = (!!...fns) !=> (args) !=> fns.reduceRight((args, f) !=> f.call(null, args), args) function onClick (value) { console.log(value); !// ['290', '123', '234']; const numArr = map(Number)(value); const result = sum(numArr); console.log(result); } 把 function 組合起來來
100. ### const sum = arr !=> arr.reduce((x, y) !=> x +

y, 0); const map = fn !=> arr !=> arr.map(fn); const compose = (!!...fns) !=> (args) !=> fns.reduceRight((args, f) !=> f.call(null, args), args) function onClick (value) { console.log(value); !// ['290', '123', '234']; const result = compose(sum, map(Number))(value); console.log(result); } 把 function 組合起來來
101. ### const sum = arr !=> arr.reduce((x, y) !=> x +

y, 0); const map = fn !=> arr !=> arr.map(fn) const compose = (!!...fns) !=> (args) !=> fns.reduceRight((args, f) !=> f.call(null, args), args) const sumArrayString = compose(sum, map(Number)); function onClick (value) { console.log(value) !// ['290', '123', '234']; const result = sumArrayString(value); console.log(result); } 把 function 組合起來來
102. ### import * as R from 'ramda'; const sumArrayString = R.compose(R.sum,

R.map(Number)); function onClick (value) { console.log(value) !// ['290', '123', '234']; const result = sumArrayString(value); console.log(result); } 改⽤用 Ramda

111. ### const add = (x: number) !=> (y: number): number !=>

x + y TypeScript

y = x + y 回傳值 參參數

116. ### !// map !:: (a !-> b) !-> Array a !->

Array b R.map(String)([1, 2, 3]) !// ['1', '2', '3']

118. ### !// map !:: (a !-> b) !-> Observable a !->

Observable b map(String)(Observable.of(1)) !// Observable.of('1')

121. ### import * as R from "ramda"; import * as Maybe

from 'folktale/maybe' R.map(String)(Maybe.Just(1)); !// Just('1') R.map(String)(Maybe.Nothing()); !// Nothing data Maybe a = Nothing | Just a map !:: (a !-> b) !-> Maybe a !-> Maybe b map _ Nothing = Nothing map f Just a = Just f a add x y = x + y add1 = add 1 map add1 (Just 1) !-- Just 2 map add1 (Nothing) !-- Nothing JavaScript Haskell

126. ### class Functor f where fmap !:: (a !-> b) !->

f a !-> f b Functor
127. ### fmap id = id fmap (f . g) = fmap

f . fmap g fmap 須滿⾜足
128. ### const id = x !=> x; const arr = [1,

2, 3]; !// fmap id = id R.map(id)(arr) !// [1, 2, 3] id(arr) !// [1, 2, 3] !// fmap (f . g) = fmap f . fmap g R.map( R.compose( R.add(1), R.add(2) ) )(arr); !// [4, 5, 6] R.compose( R.map(R.add(1)), R.map(R.add(2)) )(arr); !// [4, 5, 6]

M x M y M z

147. ### Reference • Learn How To Learn ❤ • 知識地圖 •

教你成為 IT 界的德魯魯伊 • Developer Roadmap • Flow: The Psychology of Optimal Experience ❤ • The 3 Zone Everyone Should Know About • 法語吐槽影片 • Haskell Book • Mostly Adequate Guide • 中⽂文版 • Why Functional Programming Matter • 抽象： 設計的藝術 • 封⾯面圖