[JS奇怪的世界]No.43 函數程式設計(一)

前言

在討論完一級函數及各種 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 奇怪的部分