如何通过Lodash执行并合并多个函数的返回结果

当然可以实现这个需求！而且有几种非常优雅的方式，不管是借助Lodash这类工具库，还是用原生JS实现，都能完美解决你遇到的嵌套样式对象合并问题，尤其适配Material-UI的withStyles场景。

方法1：使用Lodash的merge函数（最简洁） #

Lodash的merge方法天生就是用来递归合并对象的——它会深度遍历对象，后面的对象属性会覆盖前面的同层级属性，完全符合你想要的样式合并逻辑。

我们可以封装一个通用的辅助函数，专门处理多个样式函数的合并：

import { merge } from 'lodash';

// 接收任意数量的样式函数，返回一个新的合并后的样式函数
const mergeStyleFunctions = (...styleFuncs) => {
  return (theme) => {
    // 先执行所有传入的样式函数，得到对应的样式对象数组
    const styleObjects = styleFuncs.map(func => func(theme));
    // 递归合并所有样式对象，后面的样式会覆盖前面的冲突属性
    return merge({}, ...styleObjects);
  };
};

// 使用示例
const style_1 = theme => ({ 
  header : { color : theme.primary },
  footer: { color: "purple" }
});
const style_2 = theme => ({ 
  header : { backgroundColor : theme.secondary, color : "red" }
});

// 合并两个样式函数
const combinedStyle = mergeStyleFunctions(style_1, style_2);

// 传入theme测试
console.log(combinedStyle({ primary: "blue", secondary: "black" }));
// 输出结果：
// {
//   header: { color: "red", backgroundColor: "black" },
//   footer: { color: "purple" }
// }

方法2：原生JS实现递归合并（无需额外依赖） #

如果你不想引入Lodash，可以自己写一个轻量的深度合并函数，逻辑和Lodash的merge类似：

// 辅助函数：判断是否为纯对象
const isPlainObject = (obj) => 
  obj && typeof obj === 'object' && !Array.isArray(obj);

// 递归合并对象
const deepMerge = (target, ...sources) => {
  if (!sources.length) return target;
  const source = sources.shift();

  if (isPlainObject(target) && isPlainObject(source)) {
    for (const key in source) {
      if (isPlainObject(source[key])) {
        // 如果目标对象没有这个属性，先初始化空对象
        if (!target[key]) Object.assign(target, { [key]: {} });
        // 递归合并嵌套对象
        deepMerge(target[key], source[key]);
      } else {
        // 直接覆盖基础类型属性
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return deepMerge(target, ...sources);
};

// 同样的样式合并函数
const mergeStyleFunctions = (...styleFuncs) => (theme) => {
  const styleObjects = styleFuncs.map(func => func(theme));
  return deepMerge({}, ...styleObjects);
};

结合Material-UI的withStyles使用 #

因为你提到这是Material-UI的withStyles相关需求，上面的合并函数可以直接和withStyles配合使用，完全不需要修改原有的样式函数：

import { withStyles } from '@material-ui/core/styles';

// 原样式函数不变
const style_1 = theme => ({ header : { color : theme.primary } });
const style_2 = theme => ({ header : { backgroundColor : theme.secondary, color : "red" } });

// 合并后传给withStyles
const combinedStyle = mergeStyleFunctions(style_1, style_2);
const StyledMyComponent = withStyles(combinedStyle)(MyComponent);

同样，这种方式也适用于makeStyles或useStyles钩子，只需要把合并后的函数传入即可。

为什么比你之前的方案更优雅 #

你之前的实现需要在每个样式函数里手动处理扩展逻辑，不仅重复代码多，而且维护成本高。上面的方案把合并逻辑抽成了通用的辅助函数：

• 所有原样式函数都不需要修改，保持单一职责
• 可以合并任意数量的样式函数，扩展性强
• 递归合并自动处理嵌套对象，不需要手动处理每个层级的样式覆盖

内容的提问来源于stack exchange，提问作者Velidan