面试题：JavaScript函数式编程在复杂应用中的实践

1. 运用不可变数据管理应用状态

架构思路：在SPA中，将状态视为不可变对象。每当状态发生变化时，返回一个新的状态对象，而不是直接修改原对象。这有助于跟踪状态变化、实现时间旅行调试等功能。
关键代码示例：

// 使用Immer库来更方便地处理不可变数据
import produce from 'immer';

// 初始状态
const initialState = {
    count: 0
};

// 状态更新函数
const increment = produce((draft) => {
    draft.count++;
}, initialState);

console.log(increment);

2. 纯函数处理复杂业务逻辑

架构思路：将复杂业务逻辑封装成纯函数，纯函数不依赖外部可变状态且相同输入总是返回相同输出。这使得代码易于理解、测试和复用。
关键代码示例：

// 纯函数：计算两个数之和
const add = (a, b) => a + b;

// 测试
console.log(add(2, 3));

3. 高阶函数提升代码可维护性和可测试性

架构思路：使用高阶函数来抽象通用逻辑，例如将副作用操作（如API调用）与业务逻辑分离。高阶函数可以接受函数作为参数或返回函数，增强代码的灵活性。
关键代码示例：

// 高阶函数：对数组每个元素应用一个函数
const map = (arr, fn) => {
    let result = [];
    for (let i = 0; i < arr.length; i++) {
        result.push(fn(arr[i]));
    }
    return result;
};

// 使用高阶函数
const numbers = [1, 2, 3];
const squared = map(numbers, num => num * num);
console.log(squared);

4. 综合架构示例

架构思路：结合Redux（基于函数式编程理念）来管理应用状态。Redux使用纯函数reducers来处理状态变化，actions作为不可变数据描述状态变化。
关键代码示例：

// actions.js
const incrementAction = { type: 'INCREMENT' };

// reducers.js
const counterReducer = (state = { count: 0 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + 1 };
        default:
            return state;
    }
};

// store.js
import { createStore } from'redux';

const store = createStore(counterReducer);

// 使用store
store.dispatch(incrementAction);
console.log(store.getState());

星途面试题库

面试题：JavaScript函数式编程在复杂应用中的实践

知识考点

面试题答案

1. 运用不可变数据管理应用状态

2. 纯函数处理复杂业务逻辑

3. 高阶函数提升代码可维护性和可测试性

4. 综合架构示例