JavaScript纯函数:修订间差异
外观
Page creation by admin bot |
Page update by admin bot |
||
第1行: | 第1行: | ||
= JavaScript纯函数 = | = JavaScript纯函数 = | ||
'''纯函数'''(Pure | '''纯函数'''(Pure Function)是函数式编程中的核心概念之一,也是编写可预测、可维护代码的重要原则。在JavaScript中,纯函数具有以下两个关键特性: | ||
1. '''相同的输入始终返回相同的输出'''(确定性) | |||
2. '''不产生副作用'''(不会修改外部状态) | |||
== 特性详解 == | |||
=== 1. 确定性 === | |||
纯函数在给定相同输入时,总是返回相同的结果,不受外部状态影响。数学函数就是典型的纯函数,例如: | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// 纯函数示例 | // 纯函数示例 | ||
function | function square(x) { | ||
return | return x * x; | ||
} | } | ||
console.log( | console.log(square(5)); // 输出: 25 (无论调用多少次,结果都相同) | ||
</syntaxhighlight> | |||
=== 2. 无副作用 === | |||
纯函数不会修改任何外部状态,包括: | |||
* 不修改传入的参数 | |||
* 不修改全局变量 | |||
* 不进行I/O操作(如网络请求、文件读写) | |||
* 不调用非纯函数(如`Math.random()`或`Date.now()`) | |||
// | <syntaxhighlight lang="javascript"> | ||
// 非纯函数示例(有副作用) | |||
let counter = 0; | let counter = 0; | ||
function increment() { | function increment() { | ||
counter++; // | counter++; // 修改了外部变量 | ||
return counter; | return counter; | ||
} | } | ||
// 纯函数版本 | |||
function pureIncrement(num) { | |||
return num + 1; // 不修改外部状态 | |||
} | |||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == 纯函数 vs 非纯函数 == | ||
<mermaid> | |||
flowchart LR | |||
A[函数] --> B[纯函数] | |||
A --> C[非纯函数] | |||
B --> D[确定性] | |||
B --> E[无副作用] | |||
C --> F[可能依赖外部状态] | |||
C --> G[可能有副作用] | |||
</mermaid> | |||
== 实际应用案例 == | == 实际应用案例 == | ||
=== 1. | |||
=== 1. 数据处理 === | |||
纯函数非常适合数据转换场景: | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// 购物车价格计算(纯函数实现) | |||
function calculateTotal(cartItems) { | |||
return cartItems.reduce((total, item) => { | |||
return total + (item.price * item.quantity); | |||
}, 0); | |||
} | |||
const cart = [ | |||
const | { name: "Book", price: 10, quantity: 2 }, | ||
console.log( | { name: "Pen", price: 2, quantity: 5 } | ||
]; | |||
console.log(calculateTotal(cart)); // 输出: 30 | |||
</syntaxhighlight> | </syntaxhighlight> | ||
=== 2. | === 2. React组件 === | ||
React推崇使用纯函数组件: | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
function | // React纯函数组件 | ||
function Welcome(props) { | |||
return <h1>Hello, {props.name}</h1>; | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== | == 数学表示 == | ||
纯函数可以用数学函数表示: | |||
<math> | |||
f(x) = y | |||
</math> | |||
其中: | |||
* <math>x</math> 是输入 | |||
* <math>y</math> 是输出 | |||
* 对于相同的 <math>x</math>,总是得到相同的 <math>y</math> | |||
== 优点 == | |||
* '''可预测性''':结果只依赖输入,易于推理 | |||
* '''可测试性''':不需要复杂的环境设置 | |||
* '''可缓存性''':可以记忆化(memoize)结果 | |||
* '''并行安全''':无共享状态,可安全并行执行 | |||
== 注意事项 == | |||
虽然纯函数有很多优点,但在实际开发中: | |||
1. 应用不可能完全由纯函数组成(需要I/O等副作用) | |||
2. 合理组合纯函数和非纯函数 | |||
3. 将副作用限制在可控范围内 | |||
== 练习示例 == | |||
将以下非纯函数转换为纯函数: | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// | // 原始版本(非纯) | ||
function | let discount = 0.1; | ||
function applyDiscount(price) { | |||
return | return price * (1 - discount); | ||
} | } | ||
// | // 纯函数版本 | ||
function | function pureApplyDiscount(price, discountRate) { | ||
return | return price * (1 - discountRate); | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== 总结 == | == 总结 == | ||
纯函数是JavaScript函数式编程的基石,它们通过限制副作用和提高确定性使代码更可靠。虽然实际应用中需要与非纯函数配合使用,但尽可能多地使用纯函数能显著提高代码质量。 | |||
[[Category:编程语言]] | [[Category:编程语言]] | ||
[[Category:JavaScript]] | [[Category:JavaScript]] | ||
[[Category: | [[Category:Javascript函数]] |
2025年4月30日 (三) 19:07的最新版本
JavaScript纯函数[编辑 | 编辑源代码]
纯函数(Pure Function)是函数式编程中的核心概念之一,也是编写可预测、可维护代码的重要原则。在JavaScript中,纯函数具有以下两个关键特性:
1. 相同的输入始终返回相同的输出(确定性) 2. 不产生副作用(不会修改外部状态)
特性详解[编辑 | 编辑源代码]
1. 确定性[编辑 | 编辑源代码]
纯函数在给定相同输入时,总是返回相同的结果,不受外部状态影响。数学函数就是典型的纯函数,例如:
// 纯函数示例
function square(x) {
return x * x;
}
console.log(square(5)); // 输出: 25 (无论调用多少次,结果都相同)
2. 无副作用[编辑 | 编辑源代码]
纯函数不会修改任何外部状态,包括:
- 不修改传入的参数
- 不修改全局变量
- 不进行I/O操作(如网络请求、文件读写)
- 不调用非纯函数(如`Math.random()`或`Date.now()`)
// 非纯函数示例(有副作用)
let counter = 0;
function increment() {
counter++; // 修改了外部变量
return counter;
}
// 纯函数版本
function pureIncrement(num) {
return num + 1; // 不修改外部状态
}
纯函数 vs 非纯函数[编辑 | 编辑源代码]
实际应用案例[编辑 | 编辑源代码]
1. 数据处理[编辑 | 编辑源代码]
纯函数非常适合数据转换场景:
// 购物车价格计算(纯函数实现)
function calculateTotal(cartItems) {
return cartItems.reduce((total, item) => {
return total + (item.price * item.quantity);
}, 0);
}
const cart = [
{ name: "Book", price: 10, quantity: 2 },
{ name: "Pen", price: 2, quantity: 5 }
];
console.log(calculateTotal(cart)); // 输出: 30
2. React组件[编辑 | 编辑源代码]
React推崇使用纯函数组件:
// React纯函数组件
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
数学表示[编辑 | 编辑源代码]
纯函数可以用数学函数表示: 其中:
- 是输入
- 是输出
- 对于相同的 ,总是得到相同的
优点[编辑 | 编辑源代码]
- 可预测性:结果只依赖输入,易于推理
- 可测试性:不需要复杂的环境设置
- 可缓存性:可以记忆化(memoize)结果
- 并行安全:无共享状态,可安全并行执行
注意事项[编辑 | 编辑源代码]
虽然纯函数有很多优点,但在实际开发中: 1. 应用不可能完全由纯函数组成(需要I/O等副作用) 2. 合理组合纯函数和非纯函数 3. 将副作用限制在可控范围内
练习示例[编辑 | 编辑源代码]
将以下非纯函数转换为纯函数:
// 原始版本(非纯)
let discount = 0.1;
function applyDiscount(price) {
return price * (1 - discount);
}
// 纯函数版本
function pureApplyDiscount(price, discountRate) {
return price * (1 - discountRate);
}
总结[编辑 | 编辑源代码]
纯函数是JavaScript函数式编程的基石,它们通过限制副作用和提高确定性使代码更可靠。虽然实际应用中需要与非纯函数配合使用,但尽可能多地使用纯函数能显著提高代码质量。