JavaScript中多层嵌套对象数组的条件映射实现问题

需求说明 #

现有一个多层嵌套的对象数组switches，结构如下。需要实现函数handleTopLevelToggle，当传入指定feature名称与目标值时，将所有层级中name匹配该名称的feature的value修改为目标值，返回结构一致的嵌套数组（例如调用handleTopLevelToggle('AdvancedAdminApprovalLevels', true)后，所有层级中该名称的feature值均变为true）。

原数据结构 #

const switches = [{
  orgId: "1111a7cd-0d58-11ef-83a2-06a19a0b1f5d",
  orgName: "Management 1",
  orgType: 2,
  organisations: [],
  features: [{
    name: "AdvancedAdminApprovalLevels",
    type: "feature",
    category: "Management Features",
    value: false,
  }, {
    name: "AdminCategoryApprovalByRole",
    type: "feature",
    category: "Management Features",
    value: false,
  }],
}, {
  orgId: "2222a7cd-0d58-11ef-83a2-06a19a0b1f5d",
  orgName: "Management 2",
  orgType: 2,
  organisations: [{
    orgId: "33333f59a-4976-11ed-af5d-021feb88a3f6",
    orgName: "Submanagement ",
    orgType: 2,
    features: [{
      name: "AdvancedAdminApprovalLevels",
      type: "feature",
      category: "Management Features",
      value: false,
    }, {
      name: "AdminCategoryApprovalByRole",
      type: "feature",
      category: "Management Features",
      value: false,
    }],
  }],
  features: [{
    name: "AdvancedAdminApprovalLevels",
    type: "feature",
    category: "Management Features",
    value: false,
  }, {
    name: "AdminCategoryApprovalByRole",
    type: "feature",
    category: "Management Features",
    value: false,
  }],
}, {
  orgId: "4444a7cd-0d58-11ef-83a2-06a19a0b1f5d",
  orgName: "Management 3",
  orgType: 2,
  organisations: [],
  features: [{
    name: "AdvancedAdminApprovalLevels",
    type: "feature",
    category: "Management Features",
    value: false,
  }, {
    name: "AdminCategoryApprovalByRole",
    type: "feature",
    category: "Management Features",
    value: false,
  }],
}];

原实现的问题 #

你提供的初始代码存在以下关键问题：

• 参数顺序错误：需求调用时先传feature名称再传目标值，但原函数参数顺序是(value, fSwitch)，与调用逻辑不符
• 未处理嵌套层级：只遍历了顶层组织的features，没有递归处理organisations中的子组织
• 修改逻辑错误：在features.map中返回的是整个组织对象，而非修改后的feature，且未将修改后的features数组赋值回组织对象
• 未保留原结构：直接修改原对象而非创建新对象，可能产生副作用

正确实现方案 #

使用递归方式处理多层嵌套结构，同时采用immutable方式修改数据（不改动原对象）：

const handleTopLevelToggle = (featureName, targetValue) => {
  // 递归处理单个组织的函数
  const processOrganization = (org) => {
    // 更新当前组织的features：匹配名称则修改value，否则保留原feature
    const updatedFeatures = org.features.map(feature => 
      feature.name === featureName 
        ? { ...feature, value: targetValue } 
        : feature
    );

    // 递归处理嵌套的子组织
    const updatedOrganisations = org.organisations.map(processOrganization);

    // 返回全新的组织对象，避免修改原数据
    return {
      ...org,
      features: updatedFeatures,
      organisations: updatedOrganisations
    };
  };

  // 处理顶层所有组织，返回修改后的数组
  return switches.map(processOrganization);
};

调用示例 #

// 批量修改所有层级的AdvancedAdminApprovalLevels为true
const updatedSwitches = handleTopLevelToggle('AdvancedAdminApprovalLevels', true);
console.log(updatedSwitches);

实现要点 #

• 递归遍历所有层级的组织，确保嵌套的子组织也被处理
• 使用map和对象展开运算符...创建新对象/数组，避免修改原数据产生副作用
• 精准匹配feature名称，只修改目标feature的value
• 参数顺序符合需求，第一个参数为feature名称，第二个为目标值

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