[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 奇怪的部分