基于options配置动态填充数组的优化实现技术问询

Hey，我看你现在被一堆零散的if-else搞得头大，用来处理配置和函数调用的对应关系确实太不优雅了。咱们来一步步把这个逻辑捋清楚，用更简洁可维护的方式重构它。

先理清楚现有基础和规则 #

你的配置对象 #

const options = { 
  groupZ: true, 
  groupY: true, 
  category1: true, 
  category2: true, 
  category3: true, 
  Zcategory1: true, 
  Zcategory2: true, 
  Zcategory3: true, 
  Zcategory4: true, 
  Ycategory1: true, 
  Ycategory2: true, 
  Ycategory3: true, 
  Ycategory5: true 
}

当前的响应对象写法（确实有点乱） #

{ 
  ...groupZ && { 
    ...Zcategory1 && { /* 代码内容 */ },
    ...Zcategory2 && { /* 代码内容 */ },
    ...Zcategory3 && { /* 代码内容 */ },
    ...Zcategory4 && { /* 代码内容 */ } 
  }, 
  ...groupY && { 
    ...Ycategory1 && { /* 代码内容 */ },
    ...Ycategory2 && { /* 代码内容 */ },
    ...Ycategory3 && { /* 代码内容 */ },
    ...Ycategory5 && { /* 代码内容 */ } 
  } 
}

数组填充规则 #

你需要根据options填充const array = []，规则是：

• 所有选项默认true时，把所有函数调用都加进去；
• 如果Ycategory2是false，就去掉ExampleFunction5('param2')；
• 如果groupY是false，就移除ExampleFunction1('param2')、ExampleFunction3()、ExampleFunction4('param2')、ExampleFunction5('param2')这些调用。

核心约束逻辑 #

这些是最关键的判断规则，不能搞混：

• 子类选项（比如Zcategory2）为false的话，对应的父类选项（比如category2）也要忽略；
• 只要groupZ/groupY之外的任何选项是false，就直接忽略groupZ和groupY；
• groupZ为false的话，所有Z开头的子选项都不用管了，groupY同理。

优化方案：用映射表抽象关联关系 #

核心思路就是把配置项、对应的函数调用、层级依赖都整理成一个清晰的映射表，然后用一个过滤函数来统一处理规则，彻底告别零散的if-else。

具体实现代码 #

// 第一步：先把所有配置和函数的对应关系整理成映射表
// 这里把每个函数对应的group、父category、子category都明确标出来
const functionMappings = [
  // Z组的函数映射
  {
    groupKey: 'groupZ',
    parentCategory: 'category1',
    subCategory: 'Zcategory1',
    getFunc: () => ExampleFunction1('param1') // 这里直接返回函数调用结果，或者根据需求返回函数本身
  },
  {
    groupKey: 'groupZ',
    parentCategory: 'category2',
    subCategory: 'Zcategory2',
    getFunc: () => ExampleFunction2('param1')
  },
  {
    groupKey: 'groupZ',
    parentCategory: 'category3',
    subCategory: 'Zcategory3',
    getFunc: () => ExampleFunction3()
  },
  {
    groupKey: 'groupZ',
    parentCategory: 'category3',
    subCategory: 'Zcategory4',
    getFunc: () => ExampleFunction4('param1')
  },
  // Y组的函数映射
  {
    groupKey: 'groupY',
    parentCategory: 'category1',
    subCategory: 'Ycategory1',
    getFunc: () => ExampleFunction1('param2')
  },
  {
    groupKey: 'groupY',
    parentCategory: 'category2',
    subCategory: 'Ycategory2',
    getFunc: () => ExampleFunction5('param2')
  },
  {
    groupKey: 'groupY',
    parentCategory: 'category3',
    subCategory: 'Ycategory3',
    getFunc: () => ExampleFunction3()
  },
  {
    groupKey: 'groupY',
    parentCategory: 'category3',
    subCategory: 'Ycategory5',
    getFunc: () => ExampleFunction4('param2')
  }
];

// 第二步：编写统一的过滤构建函数
const buildTargetArray = (opts) => {
  // 先检查是否有非group类的选项为false
  const hasNonGroupDisabled = Object.entries(opts).some(([key, isEnabled]) => {
    return !key.startsWith('group') && !isEnabled;
  });

  // 过滤出符合条件的函数，然后生成结果数组
  return functionMappings
    .filter(item => {
      // 如果有非group选项禁用，直接排除所有group相关的项
      if (hasNonGroupDisabled) return false;
      
      // 组本身禁用，排除该组所有项
      if (!opts[item.groupKey]) return false;
      
      // 子分类禁用，排除（同时自动忽略父分类的影响）
      if (!opts[item.subCategory]) return false;
      
      // 父分类禁用，排除
      if (!opts[item.parentCategory]) return false;
      
      // 所有条件都满足，保留这个函数
      return true;
    })
    .map(item => item.getFunc()); // 执行函数，把结果加入数组
};

// 第三步：生成你需要的数组
const array = buildTargetArray(options);

为什么这个方案更好？ #

1. 可读性拉满：所有的关联关系都集中在functionMappings里，谁对应谁一目了然，不用在一堆if-else里找逻辑；
2. 维护成本极低：后续要加新的函数、新的分类或者新的group，只需要在映射表里加一行就行，不用改过滤逻辑；
3. 逻辑清晰不混乱：把核心规则拆成了一个个独立的判断条件，每一步都明确，不会出现嵌套层级过深的问题；
4. 扩展性强：如果以后要加新的规则，比如新增一种依赖关系，只需要在过滤函数里加一个判断条件就行。

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