JavaScript中函數式程式設計是什麼？函數式程式設計的介紹
- 不言轉載
- 2019-04-08 09:48:282649瀏覽
本篇文章帶給大家的內容是關於JavaScript中函數式程式設計是什麼？函數式程式設計的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。
是個程式設計師都知道函數，但有些人不一定清楚函數式程式設計的概念。
應用程式的迭代使程式變得越來越複雜，那麼程式設計師很有必要創造一個結構良好、可讀性好、重用性高和可維護性高的程式碼。
函數式程式設計就是一個好的程式碼方式，但這不代表函數式程式設計是必須的。你的專案沒用到函數式編程，不代表項目不好。
什麼是函數式程式設計（FP）？
函數式程式設計關心資料的映射，命令式程式設計關心解決問題的步驟。
函數式程式設計的對立面就是命令式程式設計。
函數式程式設計語言中的變數也不是命令式程式設計語言中的變量，即儲存狀態的單元，而是代數中的變量，即一個值的名稱。變數的值是不可變的（immutable），也就是說不允許像命令式程式設計語言中那樣多次給一個變數賦值。
函數式程式設計只是一個概念（一致編碼方式），並沒有嚴格的定義。本人根據網路上的知識點，簡單的總結一下函數式程式設計的定義（本人總結，或許有人會不同意這個觀點）。
函數式程式設計就是純函數的應用，然後把不同的邏輯分離成許多獨立功能的純函數（模組化想法），然後再整合在一起，變成複雜的功能。
什麼是純函數？
一個函數如果輸入確定，那麼輸出結果是唯一確定的，並且沒有副作用，那麼它就是純函數。
一般符合上述的兩點就算純函數：
相同的輸入必定產生相同的輸出
在計算的過程中，不會產生副作用
那怎麼理解副作用呢？
簡單的說就是變數的值不可變，包括函數外部變數和函數內部變數。
所謂副作用，指的是函數內部與外部互動（最典型的情況，就是修改全域變數的值），產生運算以外的其他結果。
這裡說明一下不可變，不可變指的是我們不能改變原來的變數值。或原來變數值的改變，不能影響到回傳結果。不是變數值本來就是不可變。
純函數特性對比範例
上面的理論描述對於剛接觸這個概念的程式設計師，或許不好理解。下面會透過純函數的特點一一舉例說明。
輸入相同回傳值相同
純函數
function test(pi) {
// 只要 pi 确定，返回结果就一定确定。
return pi + 2;
}
test(3);
非純函數
function test(pi) {
// 随机数返回值不确定
return pi + Math.random();
}
test(3);
#回傳值不受外部變數的影響
非純函數，傳回值會被其他變數影響（說明有副作用），回傳值不確定。
let a = 2;
function test(pi) {
// a 的值可能中途被修改
return pi + a;
}
a = 3;
test(3);
非純函數，傳回值受到物件 getter 的影響，回傳結果不確定。
const obj = Object.create(
{},
{
bar: {
get: function() {
return Math.random();
},
},
}
);
function test(obj) {
// obj.a 的值是随机数
return obj.a;
}
test(obj);
純函數，參數唯一，回傳值確定。
function test(pi) {
// 只要 pi 确定，返回结果就一定确定。
return pi + 2;
}
test(3);
輸入值是不可以被改變的
非純函數，這個函數已經改變了外面 personInfo 的值了（產生了副作用）。
const personInfo = { firstName: 'shannan', lastName: 'xian' };
function revereName(p) {
p.lastName = p.lastName
.split('')
.reverse()
.join('');
p.firstName = p.firstName
.split('')
.reverse()
.join('');
return `${p.firstName} ${p.lastName}`;
}
revereName(personInfo);
console.log(personInfo);
// 输出 { firstName: 'nannahs',lastName: 'naix' }
// personInfo 被修改了
純函數，這個函數不影響外部任意的變數。
const personInfo = { firstName: 'shannan', lastName: 'xian' };
function reverseName(p) {
const lastName = p.lastName
.split('')
.reverse()
.join('');
const firstName = p.firstName
.split('')
.reverse()
.join('');
return `${firstName} ${lastName}`;
}
revereName(personInfo);
console.log(personInfo);
// 输出 { firstName: 'shannan',lastName: 'xian' }
// personInfo 还是原值
那麼你們是不是有疑問，personInfo 物件是參考類型，非同步操作的時候，中途改變了 personInfo，那麼輸出結果那就可能不確定了。
如果函數有非同步操作，的確有存在這個問題，的確應該確保 personInfo 不能被外部再次改變（可以透過深度拷貝）。
但是，這個簡單的函數裡面並沒有非同步操作，reverseName 函數運行的那一刻 p 的值已經是確定的了，直到返回結果。
下面的非同步操作才需要確保personInfo 中途不會被改變：
async function reverseName(p) {
await new Promise(resolve => {
setTimeout(() => {
resolve();
}, 1000);
});
const lastName = p.lastName
.split('')
.reverse()
.join('');
const firstName = p.firstName
.split('')
.reverse()
.join('');
return `${firstName} ${lastName}`;
}
const personInfo = { firstName: 'shannan', lastName: 'xian' };
async function run() {
const newName = await reverseName(personInfo);
console.log(newName);
}
run();
personInfo.firstName = 'test';
// 输出为 tset naix，因为异步操作的中途 firstName 被改变了
修改成下面的方式就可以確保personInfo 中途的修改不影響非同步操作：
// 这个才是纯函数
async function reverseName(p) {
// 浅层拷贝，这个对象并不复杂
const newP = { ...p };
await new Promise(resolve => {
setTimeout(() => {
resolve();
}, 1000);
});
const lastName = newP.lastName
.split('')
.reverse()
.join('');
const firstName = newP.firstName
.split('')
.reverse()
.join('');
return `${firstName} ${lastName}`;
}
const personInfo = { firstName: 'shannan', lastName: 'xian' };
// run 不是纯函数
async function run() {
const newName = await reverseName(personInfo);
console.log(newName);
}
// 当然小先运行 run，然后再去改 personInfo 对象。
run();
personInfo.firstName = 'test';
// 输出为 nannahs naix
這個還是有個缺點，就是外部personInfo 物件還是會改到，但不影響先前已經執行的run 函數。如果再執行 run 函數，輸入都變了，輸出當然也變了。
參數和傳回值可以是任意型別
那麼回傳函數也是可以的。
function addX(y) {
return function(x) {
return x + y;
};
}
盡量只做一件事
當然這個要看實際應用場景，這裡舉個簡單例子。
兩件事一起做（不太好的做法）：
function getFilteredTasks(tasks) {
let filteredTasks = [];
for (let i = 0; i < tasks.length; i++) {
let task = tasks[i];
if (task.type === 'RE' && !task.completed) {
filteredTasks.push({ ...task, userName: task.user.name });
}
}
return filteredTasks;
}
const filteredTasks = getFilteredTasks(tasks);getFilteredTasks 也是纯函数，但是下面的纯函数更好。
两件事分开做（推荐的做法）：
function isPriorityTask(task) {
return task.type === 'RE' && !task.completed;
}
function toTaskView(task) {
return { ...task, userName: task.user.name };
}
let filteredTasks = tasks.filter(isPriorityTask).map(toTaskView);isPriorityTask 和 toTaskView 就是纯函数，而且都只做了一件事，也可以单独反复使用。
结果可缓存
根据纯函数的定义，只要输入确定，那么输出结果就一定确定。我们就可以针对纯函数返回结果进行缓存（缓存代理设计模式）。
const personInfo = { firstName: 'shannan', lastName: 'xian' };
function reverseName(firstName, lastName) {
const newLastName = lastName
.split('')
.reverse()
.join('');
const newFirstName = firstName
.split('')
.reverse()
.join('');
console.log('在 proxyReverseName 中，相同的输入，我只运行了一次');
return `${newFirstName} ${newLastName}`;
}
const proxyReverseName = (function() {
const cache = {};
return (firstName, lastName) => {
const name = firstName + lastName;
if (!cache[name]) {
cache[name] = reverseName(firstName, lastName);
}
return cache[name];
};
})();
函数式编程有什么优点？
实施函数式编程的思想，我们应该尽量让我们的函数有以下的优点：
更容易理解
更容易重复使用
更容易测试
更容易维护
更容易重构
更容易优化
更容易推理
函数式编程有什么缺点？
性能可能相对来说较差
函数式编程可能会牺牲时间复杂度来换取了可读性和维护性。但是呢，这个对用户来说这个性能十分微小，有些场景甚至可忽略不计。前端一般场景不存在非常大的数据量计算，所以你尽可放心的使用函数式编程。看下上面提到个的例子（数据量要稍微大一点才好对比）：
首先我们先赋值 10 万条数据：
const tasks = [];
for (let i = 0; i < 100000; i++) {
tasks.push({
user: {
name: 'one',
},
type: 'RE',
});
tasks.push({
user: {
name: 'two',
},
type: '',
});
}两件事一起做，代码可读性不够好，理论上时间复杂度为 o(n)，不考虑 push 的复杂度。
(function() {
function getFilteredTasks(tasks) {
let filteredTasks = [];
for (let i = 0; i < tasks.length; i++) {
let task = tasks[i];
if (task.type === 'RE' && !task.completed) {
filteredTasks.push({ ...task, userName: task.user.name });
}
}
return filteredTasks;
}
const timeConsumings = [];
for (let k = 0; k < 100; k++) {
const beginTime = +new Date();
getFilteredTasks(tasks);
const endTime = +new Date();
timeConsumings.push(endTime - beginTime);
}
const averageTimeConsuming =
timeConsumings.reduce((all, current) => {
return all + current;
}) / timeConsumings.length;
console.log(`第一种风格平均耗时：${averageTimeConsuming} 毫秒`);
})();
两件事分开做，代码可读性相对好，理论上时间复杂度接近 o(2n)
(function() {
function isPriorityTask(task) {
return task.type === 'RE' && !task.completed;
}
function toTaskView(task) {
return { ...task, userName: task.user.name };
}
const timeConsumings = [];
for (let k = 0; k < 100; k++) {
const beginTime = +new Date();
tasks.filter(isPriorityTask).map(toTaskView);
const endTime = +new Date();
timeConsumings.push(endTime - beginTime);
}
const averageTimeConsuming =
timeConsumings.reduce((all, current) => {
return all + current;
}) / timeConsumings.length;
console.log(`第二种风格平均耗时：${averageTimeConsuming} 毫秒`);
})();
上面的例子多次运行得出耗时平均值，在数据较少和较多的情况下，发现两者平均值并没有多大差别。10 万条数据，运行 100 次取耗时平均值，第二种风格平均多耗时 15 毫秒左右，相当于 10 万条数据多耗时 1.5 秒，1 万条数多据耗时 150 毫秒（150 毫秒用户基本感知不到）。
虽然理论上时间复杂度多了一倍，但是在数据不庞大的情况下（会有个临界线的），这个性能相差其实并不大，完全可以牺牲浏览器用户的这点性能换取可读和可维护性。
很可能被过度使用过度使用反而是项目维护性变差。有些人可能写着写着，就变成别人看不懂的代码，自己觉得挺高大上的，但是你确定别人能快速的看懂不? 适当的使用才是合理的。
应用场景
概念是概念，实际应用却是五花八门，没有实际应用，记住了也是死记硬背。这里总结一些常用的函数式编程应用场景。
简单使用
有时候很多人都用到了函数式的编程思想（最简单的用法），但是没有意识到而已。下面的列子就是最简单的应用，这个不用怎么说明，根据上面的纯函数特点，都应该看的明白。
function sum(a, b) {
return a + b;
}
立即执行的匿名函数
匿名函数经常用于隔离内外部变量（变量不可变）。
const personInfo = { firstName: 'shannan', lastName: 'xian' };
function reverseName(firstName, lastName) {
const newLastName = lastName
.split('')
.reverse()
.join('');
const newFirstName = firstName
.split('')
.reverse()
.join('');
console.log('在 proxyReverseName 中，相同的输入，我只运行了一次');
return `${newFirstName} ${newLastName}`;
}
// 匿名函数
const proxyReverseName = (function() {
const cache = {};
return (firstName, lastName) => {
const name = firstName + lastName;
if (!cache[name]) {
cache[name] = reverseName(firstName, lastName);
}
return cache[name];
};
})();
JavaScript 的一些 API
如数组的 forEach、map、reduce、filter 等函数的思想就是函数式编程思想（返回新数组），我们并不需要使用 for 来处理。
const arr = [1, 2, '', false]; const newArr = arr.filter(Boolean); // 相当于 const newArr = arr.filter(value => Boolean(value))
递归
递归也是一直常用的编程方式，可以代替 while 来处理一些逻辑，这样的可读性和上手度都比 while 简单。
如下二叉树所有节点求和例子：
const tree = {
value: 0,
left: {
value: 1,
left: {
value: 3,
},
},
right: {
value: 2,
right: {
value: 4,
},
},
};
while 的计算方式：
function sum(tree) {
let sumValue = 0;
// 使用列队方式处理，使用栈也可以，处理顺序不一样
const stack = [tree];
while (stack.length !== 0) {
const currentTree = stack.shift();
sumValue += currentTree.value;
if (currentTree.left) {
stack.push(currentTree.left);
}
if (currentTree.right) {
stack.push(currentTree.right);
}
}
return sumValue;
}
递归的计算方式：
function sum(tree) {
let sumValue = 0;
if (tree && tree.value !== undefined) {
sumValue += tree.value;
if (tree.left) {
sumValue += sum(tree.left);
}
if (tree.right) {
sumValue += sum(tree.right);
}
}
return sumValue;
}
递归会比 while 代码量少，而且可读性更好，更容易理解。
链式编程
如果接触过 jquery，我们最熟悉的莫过于 jq 的链式便利了。现在 ES6 的数组操作也支持链式操作：
const arr = [1, 2, '', false]; const newArr = arr.filter(Boolean).map(String); // 输出 "1", "2"]
或者我们自定义链式，加减乘除的链式运算：
function createOperation() {
let theLastValue = 0;
const plusTwoArguments = (a, b) => a + b;
const multiplyTwoArguments = (a, b) => a * b;
return {
plus(...args) {
theLastValue += args.reduce(plusTwoArguments);
return this;
},
subtract(...args) {
theLastValue -= args.reduce(plusTwoArguments);
return this;
},
multiply(...args) {
theLastValue *= args.reduce(multiplyTwoArguments);
return this;
},
pide(...args) {
theLastValue /= args.reduce(multiplyTwoArguments);
return this;
},
valueOf() {
const returnValue = theLastValue;
// 获取值的时候需要重置
theLastValue = 0;
return returnValue;
},
};
}
const operaton = createOperation();
const result = operation
.plus(1, 2, 3)
.subtract(1, 3)
.multiply(1, 2, 10)
.pide(10, 5)
.valueOf();
console.log(result);
当然上面的例子不完全都是函数式编程，因为 valueOf 的返回值就不确定。
高阶函数
高阶函数（Higher Order Function）,按照维基百科上面的定义，至少满足下列一个条件的函数
函数作为参数传入
返回值为一个函数
简单的例子：
function add(a, b, fn) {
return fn(a) + fn(b);
}
function fn(a) {
return a * a;
}
add(2, 3, fn); // 13
还有一些我们平时常用高阶的方法，如 map、reduce、filter、sort，以及现在常用的 redux 中的 connect 等高阶组件也是高阶函数。
柯里化（闭包）
柯里化（Currying），又称部分求值（Partial Evaluation），是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
柯里化的作用以下优点:
参数复用
提前返回
延迟计算/运行
缓存计算值
柯里化实质就是闭包。其实上面的立即执行匿名函数的例子就用到了柯里化。
// 柯里化之前
function add(x, y) {
return x + y;
}
add(1, 2); // 3
// 柯里化之后
function addX(y) {
return function(x) {
return x + y;
};
}
addX(2)(1); // 3
高阶组件
这是组件化流行后的一个新概念，目前经常用到。ES6 语法中 class 只是个语法糖，实际上还是函数。
一个简单例子：
class ComponentOne extends React.Component {
render() {
return <h1>title</h1>;
}
}
function HocComponent(Component) {
Component.shouldComponentUpdate = function(nextProps, nextState) {
if (this.props.id === nextProps.id) {
return false;
}
return true;
};
return Component;
}
export default HocComponent(ComponentOne);
深入理解高阶组件请看这里。
无参数风格（Point-free）
其实上面的一些例子已经使用了无参数风格。无参数风格不是没参数，只是省略了多余参数的那一步。看下面的一些例子就很容易理解了。
范例一：
const arr = [1, 2, '', false]; const newArr = arr.filter(Boolean).map(String); // 有参数的用法如下： // arr.filter(value => Boolean(value)).map(value => String(value));
范例二：
const tasks = [];
for (let i = 0; i < 1000; i++) {
tasks.push({
user: {
name: 'one',
},
type: 'RE',
});
tasks.push({
user: {
name: 'two',
},
type: '',
});
}
function isPriorityTask(task) {
return task.type === 'RE' && !task.completed;
}
function toTaskView(task) {
return { ...task, userName: task.user.name };
}
tasks.filter(isPriorityTask).map(toTaskView);范例三：
// 比如，现成的函数如下：
var toUpperCase = function(str) {
return str.toUpperCase();
};
var split = function(str) {
return str.split('');
};
var reverse = function(arr) {
return arr.reverse();
};
var join = function(arr) {
return arr.join('');
};
// 现要由现成的函数定义一个 point-free 函数toUpperCaseAndReverse
var toUpperCaseAndReverse = _.flowRight(
join,
reverse,
split,
toUpperCase
); // 自右向左流动执行
// toUpperCaseAndReverse是一个point-free函数，它定义时并无可识别参数。只是在其子函数中操纵参数。flowRight 是引入了 lodash 库的组合函数，相当于 compose 组合函数
console.log(toUpperCaseAndReverse('abcd')); // => DCBA
无参数风格优点？
参风格的好处就是不需要费心思去给它的参数进行命名，把一些现成的函数按需组合起来使用。更容易理解、代码简小，同时分离的回调函数，是可以复用的。如果使用了原生 js 如数组，还可以利用 Boolean 等构造函数的便捷性进行一些过滤操作。
无参数风格缺点？
缺点就是需要熟悉无参数风格，刚接触不可能就可以用得得心应手的。对于一些新手，可能第一时间理解起来没那没快。
以上是JavaScript中函數式程式設計是什麼？函數式程式設計的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！