使用Object.fromEntries重构选项组时如何添加规则校验属性

你完全不需要切换到reduce写法，只要调整map返回的键值对的value结构，就能在保留Object.fromEntries链式写法的前提下，把校验需要的字段一并放入结果对象。

注意点 #

你之前的代码存在字段笔误：原始数据中分组名称的字段是groupname，旧代码里写的g.groupheader和原始字段不匹配，会导致键名生成错误。

原始参考数据 #

let optiongroups = [
  {
    groupname : "exactly1",
    grouplimit : 1,
    id : 123,
    rules : "exactly",
    rulesnumber : {number :0, minimum : 0, maximum : 0 }, 
    optionitems : [
      { name : "One", price : 1 },
      { name : "Two", price : 2 }
    ]
  },
  {
    groupname : "exactly2",
    grouplimit : 2,
    id : 369,
    rules : "exactly",
    rulesnumber : {number :0, minimum : 0, maximum : 0 }, 
    optionitems : [
      { name : "2-One", price : 22 },
      { name : "2-Two", price : 44 }
    ]
  }
]

旧逻辑缺陷 #

之前的转换逻辑只为每个分组生成了存储选中项的空数组，没有携带校验所需的规则字段：

// 旧逻辑输出值仅为空数组，无法支持后续校验
const finalgroupit = Object.fromEntries(optiongroups.map(g => [g.groupname,  []]));

旧逻辑输出结构：

{"exactly1" : [], "exactly2" :[]}

最终实现代码 #

把原来作为value的空数组，替换为包含选中项存储、规则字段的对象即可：

const finalgroupit = Object.fromEntries(
  optiongroups.map(group => [
    group.groupname,
    {
      selected: [], // 存储当前分组用户选中的项，替代原来的空数组
      grouprules: group.rules, // 存储分组校验规则
      rulesnumber: group.rulesnumber, // 存储规则阈值配置
      // 若有其他字段需要使用可直接追加，比如：
      // grouplimit: group.grouplimit,
      // groupId: group.id
    }
  ])
);

输出结构示例 #

转换后的结果完全满足存储选中项+校验的需求：

{
  "exactly1": {
    "selected": [],
    "grouprules": "exactly",
    "rulesnumber": {"number": 0, "minimum": 0, "maximum": 0}
  },
  "exactly2": {
    "selected": [],
    "grouprules": "exactly",
    "rulesnumber": {"number": 0, "minimum": 0, "maximum": 0}
  }
}

使用方式 #

• 用户勾选/取消选项时，直接操作对应分组下的selected数组做增删即可
• 提交前校验时，直接读取当前分组的grouprules、rulesnumber配置，和selected数组的长度、内容做规则匹配即可，不需要回溯原始选项组数据。

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