JavaScript函数式编程核心实践指南

一、高阶函数与闭包应用

1.1 高阶函数本质

高阶函数是指至少满足以下条件之一的函数：

• 接收一个或多个函数作为参数
• 返回一个新函数

// 接收函数作为参数
function map(array, transform) {
  const result = [];
  for (const item of array) {
    result.push(transform(item));
  }
  return result;
}

// 返回新函数
function createLogger(prefix) {
  return function(message) {
    console.log(`[${prefix}] ${message}`);
  }
}

1.2 闭包原理与实践

闭包是指函数能够记住并访问其词法作用域，即使函数在其词法作用域之外执行。

function counter() {
  let count = 0;
  return {
    increment: () => ++count,
    get: () => count
  };
}

const c = counter();
c.increment(); // 1
c.get();       // 1

实践建议：

• 使用闭包封装私有状态（如上面的计数器）
• 避免在循环中创建闭包导致内存泄漏
• 合理使用闭包缓存计算结果（记忆化）

二、纯函数与副作用管理

2.1 纯函数特征

纯函数具有以下特性：

1. 相同输入总是返回相同输出
2. 不依赖外部状态
3. 不产生副作用

// 纯函数
function add(a, b) {
  return a + b;
}

// 非纯函数
let base = 10;
function impureAdd(b) {
  return base + b; // 依赖外部状态
}

2.2 副作用隔离策略

// 将副作用集中管理
function logError(error) {
  console.error(error); // 副作用集中在此
}

function processData(data) {
  try {
    // 纯计算逻辑
    return transform(data);
  } catch (e) {
    logError(e); // 副作用调用
    return null;
  }
}

实践建议：

• 将业务逻辑与副作用分离
• 使用Either/Option等函子处理副作用
• 在React useEffect中集中管理副作用

三、函数组合（Compose/Pipe）

3.1 组合原理

3.2 实现对比

// compose实现（从右到左执行）
const compose = (...fns) => 
  x => fns.reduceRight((v, f) => f(v), x);

// pipe实现（从左到右执行）
const pipe = (...fns) => 
  x => fns.reduce((v, f) => f(v), x);

// 使用示例
const add5 = x => x + 5;
const double = x => x * 2;
const square = x => x * x;

const transform = pipe(add5, double, square);
transform(2); // ((2 + 5) * 2)^2 = 196

实践建议：

• 小型工具函数组合优于大类方法
• 组合函数保持单一职责
• 合理控制组合长度（建议不超过5层）

四、不可变数据实践

4.1 原生实现方式

// 数组不可变操作
const arr = [1, 2, 3];
const newArr = [...arr.slice(0, 1), 4, ...arr.slice(1)];

// 对象不可变更新
const obj = { a: 1, b: 2 };
const newObj = { ...obj, b: 3 };

4.2 Immutable.js核心原理

Immutable.js使用结构共享实现高效不可变数据：

const { Map } = require('immutable');
const map1 = Map({ a: 1, b: 2 });
const map2 = map1.set('b', 3);

console.log(map1.get('b')); // 2
console.log(map2.get('b')); // 3

实践建议：

• 在大型状态树中使用Immutable.js
• 避免频繁toJS()转换
• 结合Redux等状态管理库使用

五、综合应用示例

5.1 数据处理管道

// 纯函数工具
const filterInvalid = data => data.filter(x => x.value !== null);
const normalize = data => data.map(x => ({ ...x, value: x.value * 10 }));
const logResult = data => {
  console.log('Result:', data);
  return data;
};

// 组合处理流程
const processData = pipe(
  filterInvalid,
  normalize,
  logResult,
  data => ({ 
    summary: data.reduce((a, b) => a + b.value, 0),
    items: data
  })
);

// 使用
const rawData = [{ value: 1 }, { value: null }, { value: 3 }];
processData(rawData);

5.2 React函数式实践

// 使用高阶组件
const withLoading = Component => props => 
  props.isLoading ? <Spinner /> : <Component {...props} />;

// 使用hook管理副作用
function useFetch(url) {
  const [data, setData] = useState(null);
  
  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(setData);
  }, [url]);

  return data;
}

总结提升

1. 性能优化：对于高频操作，考虑使用记忆化（memoization）

   const memoize = fn => {
     const cache = new Map();
     return (...args) => {
       const key = JSON.stringify(args);
       return cache.has(key) ? cache.get(key) : (cache.set(key, fn(...args)), cache.get(key));
     };
   };

2. 调试技巧：使用tap函数调试函数管道

   const tap = fn => x => (fn(x), x);
   
   pipe(
     add5,
     tap(console.log), // 打印中间结果
     double,
     square
   )(2);

3. 架构建议：

   • 业务逻辑尽量用纯函数实现
   • 副作用集中在特定层处理
   • 使用不可变数据简化状态管理

函数式编程在JavaScript中的实践可以显著提高代码的可测试性和可维护性，建议从小组件或工具函数开始逐步应用这些模式。