面试题：JavaScript 函数式编程在复杂业务场景中的优化

设计思路

商品列表展示：
- 使用纯函数来处理商品数据的格式化和筛选。例如，一个函数filterProductsByCategory可以根据传入的类别筛选商品列表，该函数只依赖于输入参数，不产生副作用。
- 利用函数组合，将多个处理商品数据的函数组合起来，如先筛选商品，再格式化商品信息，这样可以提高代码的可读性和可维护性。
购物车操作：
- 购物车状态可以用不可变数据结构表示，如使用Map或List。每次对购物车的操作（添加商品、删除商品等）返回一个新的购物车状态，而不是修改原有的购物车。
- 定义纯函数来处理购物车操作，如addToCart函数，它接受当前购物车状态和要添加的商品，返回新的购物车状态。这样使得代码更容易测试，因为函数的输出只取决于输入。
订单生成：
- 将订单生成过程拆分为多个小的纯函数，如计算订单总价的calculateOrderTotal函数，生成订单详情的generateOrderDetails函数等。
- 通过函数组合，将这些小函数组合起来完成订单生成的完整流程，使得每个部分都可以独立测试和维护。

关键代码示例

商品列表展示：

// 假设商品列表格式为[{id: 1, name: '商品1', category: '电子'}, ...]
const products = [
    {id: 1, name: '商品1', category: '电子'},
    {id: 2, name: '商品2', category: '服装'},
    {id: 3, name: '商品3', category: '电子'}
];

// 筛选商品的纯函数
const filterProductsByCategory = (category, products) => {
    return products.filter(product => product.category === category);
};

// 格式化商品名称的纯函数
const formatProductName = product => `名称: ${product.name}`;

// 组合函数
const getFormattedFilteredProducts = (category, products) => {
    const filteredProducts = filterProductsByCategory(category, products);
    return filteredProducts.map(formatProductName);
};

const electronicProducts = getFormattedFilteredProducts('电子', products);
console.log(electronicProducts);

购物车操作：

// 购物车状态使用数组表示，每个元素为{product: {id: 1, name: '商品1', price: 100}, quantity: 1}
let cart = [];

// 添加商品到购物车的纯函数
const addToCart = (cart, product) => {
    const existingIndex = cart.findIndex(item => item.product.id === product.id);
    if (existingIndex!== -1) {
        const newCart = [...cart];
        newCart[existingIndex].quantity++;
        return newCart;
    } else {
        return [...cart, {product, quantity: 1}];
    }
};

const newProduct = {id: 1, name: '商品1', price: 100};
cart = addToCart(cart, newProduct);
console.log(cart);

订单生成：

// 假设购物车状态为[{product: {id: 1, name: '商品1', price: 100}, quantity: 1}, ...]
const cartForOrder = [
    {product: {id: 1, name: '商品1', price: 100}, quantity: 2},
    {product: {id: 2, name: '商品2', price: 200}, quantity: 1}
];

// 计算订单总价的纯函数
const calculateOrderTotal = cart => {
    return cart.reduce((total, item) => total + item.product.price * item.quantity, 0);
};

// 生成订单详情的纯函数
const generateOrderDetails = cart => {
    return cart.map(item => `${item.quantity} x ${item.product.name} - ${item.product.price * item.quantity}`);
};

// 组合生成订单
const generateOrder = cart => {
    const total = calculateOrderTotal(cart);
    const details = generateOrderDetails(cart);
    return {total, details};
};

const order = generateOrder(cartForOrder);
console.log(order);

以上代码通过函数式编程的方式，将电商系统的复杂业务逻辑进行了拆分和优化，提高了代码的可维护性、可测试性和性能。

星途面试题库

面试题：JavaScript 函数式编程在复杂业务场景中的优化

知识考点

面试题答案

设计思路

关键代码示例