函數(shù)式編程（FP）

一種編程范式， 類似于面向?qū)ο缶幊毯兔嫦蜻^程編程。

一 基本的函數(shù)式編程

• 基本的函數(shù)式編程
• 純函數(shù)（Pure functions）
• 函數(shù)復合（Function composition）
• 避免共享狀態(tài)（Avoid shared state）
• 函數(shù)柯里化
• 高階函數(shù)
• 對比聲明式與命令式
• 避免改變狀態(tài)（Avoid mutating state）
• 避免副作用（Avoid side effects）

二 應用

• 高階函數(shù)的應用
• 函數(shù)式編程程的應用

一 基本的函數(shù)式編程

// 數(shù)組中每個單詞，首字母大寫


// 一般寫法
const arr = ['apple', 'pen', 'apple-pen'];
for(const i in arr){
  const c = arr[i][0];
  arr[i] = c.toUpperCase() + arr[i].slice(1);
}

console.log(arr);


// 函數(shù)式寫法一
function upperFirst(word) {
  return word[0].toUpperCase() + word.slice(1);
}

function wordToUpperCase(arr) {
  return arr.map(upperFirst);
}

console.log(wordToUpperCase(['apple', 'pen', 'apple-pen']));



// 函數(shù)式寫法二
console.log(arr.map(['apple', 'pen', 'apple-pen'], word => word[0].toUpperCase() + word.slice(1)));

優(yōu)點：

• 函數(shù)分裝組合調(diào)用 表意清晰 易于擴展
• 利用高階函數(shù)map,減小中間變量

==>>>>盡量使函數(shù)符合純函數(shù)的標準

純函數(shù)

兩個特性：

• 沒有任何副作用。 函數(shù)不會更改函數(shù)以外的任何變量或任何類型的數(shù)據(jù)。
• 具有一致性。 在提供同一組輸入數(shù)據(jù)的情況下，它將始終返回相同的輸出值。

不依賴外界變量

var a = 5;
function A(b) {
  return a + b;  //讀取全局變量,a很容易被改變
}
A(5);  

const a = 5;
function A(b) {
  return a + b;   //依賴外部變量,不純
}
A(5);

不產(chǎn)生副作用

const a = 1
const foo = (obj, b) => {
  obj.x = 2    // 對外部counter產(chǎn)生了影響
  return obj.x + b
}
const counter = { x: 1 }
foo(counter, 2) // => 4
counter.x // => 2

避免共享狀態(tài)

共享狀態(tài) 的意思是任意變量、對象或者內(nèi)存空間存在于共享作用域下，或者作為對象的屬性在各個作用域之間被傳遞。
在OOP中，對象以添加屬性到其他對象上的方式在作用域之間共享。

FP 依賴于不可變數(shù)據(jù)結(jié)構(gòu)和純粹的計算過程來從已存在的數(shù)據(jù)中出新的數(shù)據(jù)。

const x = {
  val: 2
};
const x1 = () => x.val += 1;
const x2 = () => x.val *= 2;
x1(); // -> 3
x2(); // -> 6

下面的代碼和上面的一樣，除了函數(shù)的調(diào)用順序

const x = {
  val: 2
};
const x1 = () => x.val += 1;
const x2 = () => x.val *= 2;
x2(); // -> 4
x1(); // -> 5

如果避免共享狀態(tài)，就不會改變函數(shù)內(nèi)容，或者改變函數(shù)調(diào)用的時序不會波及和破壞程序的其他部分：

const x = {
  val: 2
};
const x1 = x => Object.assign({}, x, { val: x.val + 1});
const x2 = x => Object.assign({}, x, { val: x.val * 2});

x1(x); // -> 3
x2(x); // -> 4

/**
x2(x); // -> 4
x1(x); // -> 3
*/

在上面的例子里，我們使用了 Object.assign() 并傳入一個空的 object 作為第一個參數(shù)來拷貝 x 的屬性，以防止 x 在函數(shù)內(nèi)部被改變。(淺深拷貝)

我們?nèi)绻涣私夂瘮?shù)使用或操作的每個變量的完整歷史，就不可能完全理解它做了什么。 （純函數(shù)）

函數(shù)柯里化

把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)(最初函數(shù)的第一個參數(shù))的函數(shù)，并且返回接受余下參數(shù)且返回結(jié)果的新函數(shù)

概念摘要
即： 傳入一個（或很少量的）參數(shù)調(diào)用父函數(shù)，父函數(shù)返回一個可接受多個參數(shù)的子函數(shù)。

const add = (x) => {
  return (y, z) => {
    return x + y + z
  }
}

let increase = add(1);
console.log(increase(2, 3)); // 6

函數(shù)式編程+柯里化，將提取成柯里化的函數(shù)部分配置好之后，可作為參數(shù)傳入，簡化操作流程。

// 給list中每個元素先加1，再加5，再減1
let list = [1, 2, 3, 4, 5];

//正常做法
let list1 = list.map((value) => {
  return value + 1;
});
let list2 = list1.map((value) => {
  return value + 5;
});
let list3 = list2.map((value) => {
  return value - 1;
});
console.log(list3); // [6, 7, 8, 9, 10]

// 柯里化
const changeList = (num) => {
  return (data) => {
    return data + num
  }
};
let list1 = list.map(changeList(1)).map(changeList(5)).map(changeList(-1));
console.log(list1); // [6, 7, 8, 9, 10]

高階函數(shù)

接受或者返回一個函數(shù)的函數(shù)稱為高階函數(shù)

許多原生的高階函數(shù)，例如 Array.map , Array.reduce , Array.filter
以map為例

// 數(shù)組中每一項加一，組成一個新數(shù)組
// 一般寫法
const arr = [1,2,3];
const rs = [];
for(const n of arr){
  rs.push(++n);
}
console.log(rs)


// map改寫
const arr = [1,2,3];
const rs = arr.map(n => ++n);

易讀

對比聲明式與命令式

函數(shù)式編程關(guān)注的是：describe what to do, rather than how to do it. 于是，我們把以前的過程式的編程范式叫做 Imperative Programming – 指令式編程，而把函數(shù)式的這種范式叫做 Declarative Programming – 聲明式編程。

• 命令式 代碼中頻繁使用語句。

• 聲明式 代碼更多依賴表達式。

總結(jié)：函數(shù)式編程的幾個要點

• 把函數(shù)當成變量來用，關(guān)注于描述問題而不是怎么實現(xiàn)
• 函數(shù)之間沒有共享的變量
• 函數(shù)間通過參數(shù)和返回值來傳遞數(shù)據(jù)
• 在函數(shù)里沒有臨時變量

函數(shù)式編程的準則：不依賴于外部的數(shù)據(jù)，而且也不改變外部數(shù)據(jù)的值，而是返回一個新的值給你。

二 函數(shù)式編程的應用

FP 或 OOP 混用 并非一定要 OOP

函數(shù)節(jié)流(高階函數(shù)的使用)

函數(shù)頻繁調(diào)用的場景歸納：

• window.onresize事件
  當調(diào)整瀏覽器窗口大小時，這個事件會被頻繁出發(fā)，而在這個時間函數(shù)中的dom操縱也會很頻繁，這樣就會造成瀏覽器卡頓現(xiàn)象。
• mousemove事件
  當被綁定該事件的dom對象被拖動時，該事件會被頻繁觸發(fā)。

所以，函數(shù)節(jié)流的原理就是在不影響使用效果的情況下降低函數(shù)的觸發(fā)頻率。

var throttle = function ( fn, interval ) { 
    var __self = fn,  // 保存需要被延遲執(zhí)行的函數(shù)引用
        timer,        // 定時器
    firstTime = true; // 是否是第一次調(diào)用 
 
    return function () {
        var args = arguments,
            __me = this;
        // 如果是第一次調(diào)用，不需延遲執(zhí)行
        if ( firstTime ) {
            __self.apply(__me, args);
            return firstTime = false;
        } 
         // 如果定時器還在，說明前一次延遲執(zhí)行還沒有完成
        if ( timer ) {
            return false;
        } 
         // 延遲一段時間執(zhí)行
        timer = setTimeout(function () {
            clearTimeout(timer);
            timer = null;
            __self.apply(__me, args); 
        }, interval || 500 ); 
    }; 
}; 
 
window.onresize = throttle(function(){
    console.log(1);
}, 500 ); 

分時函數(shù)
防止批量添加dom元素時出現(xiàn)瀏覽器卡頓或假死的情況

// 創(chuàng)建一個數(shù)組，用來存儲添加到dom的數(shù)據(jù)
var dataList = [];
// 模擬生成500個數(shù)據(jù)
for (var i = 1; i <= 500; i++) {
    dataList.push(i);
}
// 渲染數(shù)據(jù)
var renderData = timeShareRender(dataList, function(data) {
    var oDiv = document.createElement('div');
    oDiv.innerHTML = data;
    document.body.appendChild(oDiv);
}, 6);
// 分時間段將數(shù)據(jù)渲染到頁面
function timeShareRender(data, fn, num) {
    var cur, timer;
    var renderData = function() {
        for(var i = 0; i < Math.min(count, data.length); i++) {
            cur = data.shift();
            fn(cur)
        }
    };

    return function() {
        timer = setInterval(function(){
            if(data.length === 0) {
                return clearInterval(timer)
            }
            renderData()
        }, 200);
    }
}
// 將數(shù)據(jù)渲染到頁面
renderData();

demo演示

結(jié)論

函數(shù)式編程偏好：

• 使用表達式替代語句
• 讓可變數(shù)據(jù)成為不可變的
• 用函數(shù)復合替代命令控制流
• 使用聲明式而不是命令式代碼
• 使用純函數(shù)而不是使用共享狀態(tài)和副作用
• 使用高階函數(shù)來操作許多數(shù)據(jù)類型，創(chuàng)建通用、可復用功能取代只是操作集中的數(shù)據(jù)的方法