鸭梨公共文档

主题

10. JavaScript 函数式编程与高阶函数应用指南 ​

1. 函数式编程核心概念 ​

函数式编程（Functional Programming）是一种以数学函数为基本构建块的编程范式，强调：

  • 纯函数：相同输入总是产生相同输出，无副作用（不修改外部状态）
  • 不可变性：数据创建后不被修改，通过生成新数据实现变更
  • 函数组合：通过组合简单函数构建复杂功能
  • 高阶函数：可接收函数作为参数或返回函数的函数
javascript
// 纯函数示例
const square = x => x * x;  // 无副作用，输出仅依赖输入

// 非纯函数示例
let counter = 0;
const increment = () => counter++;  // 修改外部状态

2. 高阶函数核心方法解析 ​

2.1 Function.prototype.call() ​

用于显式设置函数执行上下文，立即执行函数：

javascript
function greet(message) {
  return `${message}, ${this.name}!`;
}

const person = { name: 'Alice' };
console.log(greet.call(person, 'Hello'));  // "Hello, Alice!"

2.2 Function.prototype.apply() ​

与call()功能相似，但参数以数组形式传递：

javascript
const numbers = [5, 6, 2, 3, 7];
const max = Math.max.apply(null, numbers);  // ES6 前获取数组最大值方案
console.log(max);  // 7

2.3 Array.prototype.map() ​

实现数组元素转换，返回新数组：

javascript
const prices = [100, 200, 300];
const discounted = prices.map(price => price * 0.8);
console.log(discounted);  // [80, 160, 240]

2.4 Array.prototype.reduce() ​

实现数组累积计算：

javascript
const cart = [
  { item: 'Book', price: 50 },
  { item: 'Pen', price: 10 },
  { item: 'Bag', price: 120 }
];

const total = cart.reduce((sum, item) => sum + item.price, 0);
console.log(total);  // 180

3. 高阶函数组合应用 ​

3.1 数据处理管道 ​

javascript
const data = ['  23 ', '45 ', ' 6', ' invalid '];

const cleanData = data
  .map(str => str.trim())
  .filter(str => /^\d+$/.test(str))
  .map(Number)
  .reduce((sum, num) => sum + num, 0);

console.log(cleanData);  // 23 + 45 + 6 = 74

3.2 函数柯里化（Currying） ​

javascript
const multiply = a => b => a * b;
const triple = multiply(3);
console.log(triple(7));  // 21

3.3 函数组合（Compose） ​

javascript
const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const addTax = rate => price => price * (1 + rate);
const formatPrice = price => `$${price.toFixed(2)}`;

const finalPrice = compose(
  formatPrice,
  addTax(0.1)
);

console.log(finalPrice(100));  // "$110.00"

4. 性能优化与注意事项 ​

  1. 链式调用优化：避免不必要的中间数组

    javascript
    // 非优化写法
const result = array.map(f1).filter(f2).map(f3);

// 优化写法
const result = array.reduce((acc, item) => {
  const temp = f1(item);
  return f2(temp) ? [...acc, f3(temp)] : acc;
}, []);

  2. 副作用管理：使用map时避免修改原始数据

    javascript
    // 错误示例
users.map(user => {
  user.active = true;  // 修改原始对象
  return user;
});

// 正确示例
users.map(user => ({
  ...user,
  active: true  // 创建新对象
}));

5. 高阶函数应用场景 ​

  1. 数据转换：API 响应数据格式化
  2. 状态管理：Redux 中的 reducer 函数
  3. 异步控制：Promise 链式调用
  4. 事件处理：事件监听器封装
  5. 缓存优化：记忆函数（memoization）

6. 常见错误与调试 ​

  1. this绑定丢失：

    javascript
    const obj = {
  value: 10,
  getValue: function() {
    return this.value;
  }
};

const func = obj.getValue;
console.log(func());  // undefined（正确应使用 func.call(obj)）

  2. 初始值缺失：

    javascript
    // 错误示例
[1,2,3].reduce((a,b) => a + b);  // 正确（数字数组可不设初始值）
[].reduce((a,b) => a + b);       // 报错（空数组需初始值）

// 正确写法
[].reduce((a,b) => a + b, 0);    // 返回 0

函数式编程在 JavaScript 中的优势体现在代码简洁性和可维护性上，但在性能敏感场景（如大数据量处理）需要权衡使用。现代 JavaScript 引擎对函数式写法的优化越来越好，建议配合 TypeScript 类型系统增强代码可靠性。