函數式編程（FP）
一種編程范式滑燃， 類似于面向對象編程和面向過程編程告匠。
一 基本的函數式編程
- 基本的函數式編程
- 純函數（Pure functions）
- 函數復合（Function composition）
- 避免共享狀態(tài)（Avoid shared state）
- 函數柯里化
- 高階函數
- 對比聲明式與命令式
- 避免改變狀態(tài)（Avoid mutating state）
- 避免副作用（Avoid side effects）
二 應用
- 高階函數的應用
- 函數式編程程的應用
一 基本的函數式編程
// 數組中每個單詞，首字母大寫
// 一般寫法
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);
// 函數式寫法一
function upperFirst(word) {
return word[0].toUpperCase() + word.slice(1);
}
function wordToUpperCase(arr) {
return arr.map(upperFirst);
}
console.log(wordToUpperCase(['apple', 'pen', 'apple-pen']));
// 函數式寫法二
console.log(arr.map(['apple', 'pen', 'apple-pen'], word => word[0].toUpperCase() + word.slice(1)));
優(yōu)點：
- 函數分裝組合調用 表意清晰 易于擴展
- 利用高階函數
map,減小中間變量
==>>>>盡量使函數符合純函數的標準
純函數
兩個特性：
- 沒有任何副作用媳维。 函數不會更改函數以外的任何變量或任何類型的數據裕便。
- 具有一致性暑椰。 在提供同一組輸入數據的情況下，它將始終返回相同的輸出值现使。
不依賴外界變量
var a = 5;
function A(b) {
return a + b; //讀取全局變量,a很容易被改變
}
A(5);
const a = 5;
function A(b) {
return a + b; //依賴外部變量,不純
}
A(5);
不產生副作用
const a = 1
const foo = (obj, b) => {
obj.x = 2 // 對外部counter產生了影響
return obj.x + b
}
const counter = { x: 1 }
foo(counter, 2) // => 4
counter.x // => 2
避免共享狀態(tài)
共享狀態(tài) 的意思是任意變量低匙、對象或者內存空間存在于共享作用域下，或者作為對象的屬性在各個作用域之間被傳遞碳锈。
在OOP中顽冶，對象以添加屬性到其他對象上的方式在作用域之間共享。
FP 依賴于不可變數據結構和純粹的計算過程來從已存在的數據中出新的數據售碳。
const x = {
val: 2
};
const x1 = () => x.val += 1;
const x2 = () => x.val *= 2;
x1(); // -> 3
x2(); // -> 6
下面的代碼和上面的一樣强重，除了函數的調用順序
const x = {
val: 2
};
const x1 = () => x.val += 1;
const x2 = () => x.val *= 2;
x2(); // -> 4
x1(); // -> 5
如果避免共享狀態(tài)，就不會改變函數內容贸人，或者改變函數調用的時序不會波及和破壞程序的其他部分：
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 作為第一個參數來拷貝 x 的屬性，以防止 x 在函數內部被改變灸姊。(淺深拷貝)
我們如果不了解函數使用或操作的每個變量的完整歷史拱燃，就不可能完全理解它做了什么。 （純函數）
函數柯里化
把接受多個參數的函數變換成接受一個單一參數(最初函數的第一個參數)的函數力惯，并且返回接受余下參數且返回結果的新函數
概念摘要
即： 傳入一個（或很少量的）參數調用父函數碗誉，父函數返回一個可接受多個參數的子函數。
const add = (x) => {
return (y, z) => {
return x + y + z
}
}
let increase = add(1);
console.log(increase(2, 3)); // 6
函數式編程+柯里化父晶，將提取成柯里化的函數部分配置好之后哮缺，可作為參數傳入，簡化操作流程甲喝。
// 給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]
高階函數
接受或者返回一個函數的函數稱為高階函數
許多原生的高階函數，例如 Array.map , Array.reduce , Array.filter
以map為例
// 數組中每一項加一糠溜，組成一個新數組
// 一般寫法
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);
易讀
對比聲明式與命令式
函數式編程關注的是：describe what to do, rather than how to do it. 于是淳玩，我們把以前的過程式的編程范式叫做 Imperative Programming – 指令式編程，而把函數式的這種范式叫做 Declarative Programming – 聲明式編程非竿。
命令式 代碼中頻繁使用語句蜕着。
聲明式 代碼更多依賴表達式。
總結：函數式編程的幾個要點
- 把函數當成變量來用红柱，關注于描述問題而不是怎么實現(xiàn)
- 函數之間沒有共享的變量
- 函數間通過參數和返回值來傳遞數據
- 在函數里沒有臨時變量
函數式編程的準則：不依賴于外部的數據承匣，而且也不改變外部數據的值，而是返回一個新的值給你锤悄。
二 函數式編程的應用
FP 或 OOP 混用 并非一定要 OOP
函數節(jié)流(高階函數的使用)
函數頻繁調用的場景歸納：
- window.onresize事件
當調整瀏覽器窗口大小時韧骗，這個事件會被頻繁出發(fā)，而在這個時間函數中的dom操縱也會很頻繁零聚，這樣就會造成瀏覽器卡頓現(xiàn)象袍暴。 - mousemove事件
當被綁定該事件的dom對象被拖動時，該事件會被頻繁觸發(fā)握牧。
所以容诬，函數節(jié)流的原理就是在不影響使用效果的情況下降低函數的觸發(fā)頻率。
var throttle = function ( fn, interval ) {
var __self = fn, // 保存需要被延遲執(zhí)行的函數引用
timer, // 定時器
firstTime = true; // 是否是第一次調用
return function () {
var args = arguments,
__me = this;
// 如果是第一次調用沿腰，不需延遲執(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 );
分時函數
防止批量添加dom元素時出現(xiàn)瀏覽器卡頓或假死的情況
// 創(chuàng)建一個數組，用來存儲添加到dom的數據
var dataList = [];
// 模擬生成500個數據
for (var i = 1; i <= 500; i++) {
dataList.push(i);
}
// 渲染數據
var renderData = timeShareRender(dataList, function(data) {
var oDiv = document.createElement('div');
oDiv.innerHTML = data;
document.body.appendChild(oDiv);
}, 6);
// 分時間段將數據渲染到頁面
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);
}
}
// 將數據渲染到頁面
renderData();
結論
函數式編程偏好：
- 使用表達式替代語句
- 讓可變數據成為不可變的
- 用函數復合替代命令控制流
- 使用聲明式而不是命令式代碼
- 使用純函數而不是使用共享狀態(tài)和副作用
- 使用高階函數來操作許多數據類型颂龙，創(chuàng)建通用习蓬、可復用功能取代只是操作集中的數據的方法
