前言
在討論完一級函數及各種 JavaScript 之後準備來討論講師喜歡的主題【函數程式設計 (function Programmin)】
函數程式設計 (function Programmin)
以往我們很多人都會以為 JavaScript 會跟 Java 有關係,甚至看起來很像 C++、C#等,但講師是說 JavaScript 和函數程式語言比較有關係(Lisp、Scheme、ML),所以我們從範例來了解什麼是 函數程式設計 (function Programmin)。
1 2 3 4 5 6 7
| var arr1 = [1, 2, 3]; console.log(arr1); var arr2 = []; for (var i = 0; i< arr1.length; i++) { arr2.push(arr1[i] * 2); } console.log(arr2);
|
![圖片]()
通常身為程式設計師我們都會盡可能減少自己的工作量,所以都會將重複性較高的動作包裝至一個函數內,那如果在沒有一級函數的狀況下我們所做的事情是有限的,所以我們可以利用一級函數來製作函數程式設計,然後將上面這個範例做修改。
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| function mapForEach(arr, fu) { var newArr = []; for (var i = 0; i< arr1.length; i++) { newArr.push( fu(arr[i]) ); } return newArr; } var arr1 = [1, 2, 3]; var arr2 = mapForEach(arr1, function(item) { return item * 2; }); console.log(arr2)
|
![圖片]()
我們可以看到 函數程式設計 的強大,所以也可以拿來做比較。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| function mapForEach(arr, fu) { var newArr = []; for (var i = 0; i< arr1.length; i++) { newArr.push( fu(arr[i]) ); } return newArr; } var arr1 = [1, 2, 3]; var arr2 = mapForEach(arr1, function(item) { return item > 2; });
console.log(arr2);
|
![圖片]()
這樣就可以重複不停地利用函數,而這就是 函數程式設計 的經典例子。
那如果拿來檢查是否有超過特定數值呢?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| function mapForEach(arr, fu) { var newArr = []; for (var i = 0; i< arr1.length; i++) { newArr.push( fu(arr[i]) ); } return newArr; } var arr1 = [1, 2, 3];
var checkPastLimt = function (limiter, item) { return item > limiter; }
var arr2 = mapForEach(arr1, checkPastLimt.bind(this, 1)); console.log(arr2);
|
![圖片]()
但是有些時候 bind 很煩,所以這邊可以試著不要在 mapForEach(arr1, checkPastLimt.bind(this, 1))
使用 bind 來限制值。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23
| function mapForEach(arr, fu) { var newArr = []; for (var i = 0; i< arr1.length; i++) { newArr.push( fu(arr[i]) ); } return newArr; } var arr1 = [1, 2, 3];
var checkPastLimt = function (limiter, item) { return item > limiter; }
var checkPastLimtSimplified = function (limiter) { return function (limiter, item) { return item > limiter; }.bind(this, limiter) }
var arr2 = mapForEach(arr1, checkPastLimtSimplified(2)); console.log(arr2);
|
![圖片]()
後記
從課程範例下來其實可以發現函數程式設計真的很強大,但是需要很強大的觀念,不常常練習是很難的,現階段自己也很難做出來,希望遲早自己也能夠寫出函數程式設計。
圖源
JavaScript 全攻略:克服 JS 奇怪的部分