从嵌套 object 收集子值并分配给父属性

Question

我有一组对象。 所有对象及其子对象都包含权限属性数组。 我必须从分配给相应父项的子项中收集权限属性值。 如果父母的父母权限的多个孩子应该是所有孩子的权限。

const navItems: any[] = [
     {
      text: 'Analytics',
      imageUrl: '../assets/images/Qi-white.png',
      permissions: [],
      children: [
        {
          text: 'Reports',
          icon: 'layout',
          permissions: ['rep1'],
          route: 'reports/reports',
        },
        {
          text: 'NewSelectionPanel',
          icon: 'layout',
          permissions: ['rep2'],
          route: 'reports/reportsNew',
        },
      ],
    },
    {
      text: 'Static Data',
      icon: 'parameters',
      permissions:[],
      children: [
        {
          text: 'Geographic Defs',
          permissions:[],
          maticon: 'settings',
          children: [
            {
              text: 'Country',
              maticon: 'grid_view',
              permissions: ['cou'],
              route: 'static-data/country',
            },
            {
              text: 'Country Allocation',
              maticon: 'grid_view',
              permissions: ['cou-allo'],
              route: 'static-data/group-to-country',
            } 
          ],
        },
        {
          text: 'Node Defs',
          maticon: 'settings',
          permissions:[],
          children: [
            {
              text: 'Node Category',
              maticon: 'grid_view',
              permissions: ['no1'],
              route: 'static-data/category',
            },
            {
              text: 'Node Class',
              maticon: 'grid_view',
              permissions: ['no2'],
              route: 'static-data/node-class',
            },
            {
              text: 'Node Classification',
              maticon: 'grid_view',
              permissions: ['no3'],
              route: 'static-data/classification',
            }
          
          ],
        },
        
        
      ],
      
    }
  ];

获得许可后应该是以下结构

  const navItems: any[] = [
     {
      text: 'Analytics',
      imageUrl: '../assets/images/Qi-white.png',
      permissions: ['rep1','rep2'],
      children: [
        {
          text: 'Reports',
          icon: 'layout',
          permissions: ['rep1'],
          route: 'reports/reports',
        },
        {
          text: 'NewSelectionPanel',
          icon: 'layout',
          permissions: ['rep2'],
          route: 'reports/reportsNew',
        },
      ],
    },
    {
      text: 'Static Data',
      icon: 'parameters',
      permissions:['cou-allo','cou','no1','no2','no3'],
      children: [
        {
          text: 'Geographic Defs',
          permissions:['cou-allo','cou'],
          maticon: 'settings',
          children: [
            {
              text: 'Country',
              maticon: 'grid_view',
              permissions: ['cou'],
              route: 'static-data/country',
            },
            {
              text: 'Country Allocation',
              maticon: 'grid_view',
              permissions: ['cou-allo'],
              route: 'static-data/group-to-country',
            } 
          ],
        },
        {
          text: 'Node Defs',
          maticon: 'settings',
          permissions:['no1','no2','no3'],
          children: [
            {
              text: 'Node Category',
              maticon: 'grid_view',
              permissions: ['no1'],
              route: 'static-data/category',
            },
            {
              text: 'Node Class',
              maticon: 'grid_view',
              permissions: ['no2'],
              route: 'static-data/node-class',
            },
            {
              text: 'Node Classification',
              maticon: 'grid_view',
              permissions: ['no3'],
              route: 'static-data/classification',
            }
          
          ],
        },
        
        
      ],
      
    }
     
  ];

Answer 1

你显然想改变你的 object，这是对不变性、纯度和函数式编程之神的亵渎。

另一方面，由于无论如何你都注定要失败，你至少可以免除复制所有内容并将 JavaScript 限制为一连串链式数组 function 的仪式。

简单的循环就可以很好地解决问题，而不会浪费 memory 和 CPU。

function GatherPermissions (input)
{
    function flatten_permissions (item) {
        // will merge two arrays and remove duplicates
/* If permissions are unique (i.e. you won't find the same permission in two different
   children) and you use that function wisely (i.e. you call it only once), then you don't
   need to enforce uniqueness and a simple "a.concat(b)" will be enough */
        function merge_unique (a, b) {
            return a.concat(b).filter((i, p, c) => c.indexOf(i) === p);
        }

        let flat_permissions = item.permissions ?? [];
        for (child of item.children ?? []) {
            flat_permissions = merge_unique (flat_permissions, flatten_permissions(child))
        }
        return item.permissions = flat_permissions; // mutation occurs there (booh!)
    }
    for (item of input) flatten_permissions(item);
}    

使用您的输入样本 output：

GatherPermissions (navItems);
console.log(`${JSON.stringify(navItems,undefined,4)}`);

[
    {
        "text": "Analytics",
        "imageUrl": "../assets/images/Qi-white.png",
        "permissions": [
            "rep1",
            "rep2"
        ],
        "children": [
            {
                "text": "Reports",
                "icon": "layout",
                "permissions": [
                    "rep1"
                ],
                "route": "reports/reports"
            },
            {
                "text": "NewSelectionPanel",
                "icon": "layout",
                "permissions": [
                    "rep2"
                ],
                "route": "reports/reportsNew"
            }
        ]
    },
    {
        "text": "Static Data",
        "icon": "parameters",
        "permissions": [
            "cou",
            "cou-allo",
            "no1",
            "no2",
            "no3"
        ],
        "children": [
            {
                "text": "Geographic Defs",
                "permissions": [
                    "cou",
                    "cou-allo"
                ],
                "maticon": "settings",
                "children": [
                    {
                        "text": "Country",
                        "maticon": "grid_view",
                        "permissions": [
                            "cou"
                        ],
                        "route": "static-data/country"
                    },
                    {
                        "text": "Country Allocation",
                        "maticon": "grid_view",
                        "permissions": [
                            "cou-allo"
                        ],
                        "route": "static-data/group-to-country"
                    }
                ]
            },
            {
                "text": "Node Defs",
                "maticon": "settings",
                "permissions": [
                    "no1",
                    "no2",
                    "no3"
                ],
                "children": [
                    {
                        "text": "Node Category",
                        "maticon": "grid_view",
                        "permissions": [
                            "no1"
                        ],
                        "route": "static-data/category"
                    },
                    {
                        "text": "Node Class",
                        "maticon": "grid_view",
                        "permissions": [
                            "no2"
                        ],
                        "route": "static-data/node-class"
                    },
                    {
                        "text": "Node Classification",
                        "maticon": "grid_view",
                        "permissions": [
                            "no3"
                        ],
                        "route": "static-data/classification"
                    }
                ]
            }
        ]
    }
]