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

發表於 2019-05-21 分類於克服JS奇怪的部分系列

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

前言

在討論完一級函數及各種 JavaScript 之後準備來討論講師喜歡的主題【函數程式設計 (function Programmin)】

函數程式設計 (function Programmin)

以往我們很多人都會以為 JavaScript 會跟 Java 有關係，甚至看起來很像 C++、C#等，但講師是說 JavaScript 和函數程式語言比較有關係(Lisp、Scheme、ML)，所以我們從範例來了解什麼是函數程式設計 (function Programmin)。

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);

通常身為程式設計師我們都會盡可能減少自己的工作量，所以都會將重複性較高的動作包裝至一個函數內，那如果在沒有一級函數的狀況下我們所做的事情是有限的，所以我們可以利用一級函數來製作函數程式設計，然後將上面這個範例做修改。

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)

我們可以看到函數程式設計的強大，所以也可以拿來做比較。

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);

這樣就可以重複不停地利用函數，而這就是函數程式設計的經典例子。

那如果拿來檢查是否有超過特定數值呢?

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 來限制值。

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