递归映射函数

Question

我很难弄清楚如何执行这个递归映射函数。我有一个看起来像这样的数组。

var array = [
      {
        id: 1,
        label: 'Satisfied customers',
        children: [
          {
            id: 2,
            label: 'Good food',
            icon: 'restaurant_menu',
            children: [

              { id: 3, label: 'Quality ingredients'},
              { id: 4, label: 'Good recipe' }
            ]
          },
          {
            id: 5,
            label: 'Good service',
            icon: 'room_service',
            children: [
              { id: 6, label: 'Prompt attention' },
              { id: 7, label: 'Professional waiter' }
            ]
          },
          {
            id: 8,
            label: 'Pleasant surroundings',
            icon: 'photo',
            children: [
              {
                id: 9,
                label: 'Happy atmosphere (not tickable)',
                tickable: false,
              },
              {
                id: 10,
                label: 'Good table presentation (disabled node)',
                disabled: true,
              },
              {
                id: 11,
                label: 'Pleasing decor',
              }
            ]
          },
          {
            id: 12,
            label: 'Extra information (has no tick)',
            noTick: true,
            icon: 'photo'
          },
          {
            id: 13,
            label: 'Forced tick strategy (to "strict" in this case)',
            tickStrategy: 'strict',
            icon: 'school',
            children: [
              {
                id: 14,
                label: 'Happy atmosphere',
              },
              {
                id: 15,
                label: 'Good table presentation',
              },
              {
                id: 16,
                label: 'Very pleasing decor',
              }
            ]
          }
        ]
      }
    ];

这是数组看起来像......

如您所见，孩子们是recursive。

我需要将它们放入一个数组中。我的代码不起作用，有错误。

const result = [];   
const map = (e) => {

    result.push({
        id: e.id,
        label: e.label,
    })

    e.children.map(map)


};

array.map(map);

错误是在e.children.map(map)。

我需要将它们全部推送到数组变量中，但我不知道该怎么做。泰

Answer 1

使用 vanilla JavaScript学习相互递归的好方法-

\n\n

const transform1 = ({ id = 0, label = "", children = [] }) =>\n  [ { id, label }, ...transformAll (children) ] // calls transformAll\n\nconst transformAll = (children = []) =>\n  children .flatMap (c => transform1 (c)) // calls transform1\n\nconsole.log(transformAll(array))\n

\n\n

输出 -

\n\n

[\n  {\n    "id": 1,\n    "label": "Satisfied customers"\n  },\n  {\n    "id": 2,\n    "label": "Good food"\n  },\n  {\n    "id": 3,\n    "label": "Quality ingredients"\n  },\n  {\n    "id": 4,\n    "label": "Good recipe"\n  },\n  {\n    "id": 5,\n    "label": "Good service"\n  },\n  {\n    "id": 6,\n    "label": "Prompt attention"\n  },\n  {\n    "id": 7,\n    "label": "Professional waiter"\n  },\n  {\n    "id": 8,\n    "label": "Pleasant surroundings"\n  },\n  {\n    "id": 9,\n    "label": "Happy atmosphere (not tickable)"\n  },\n  {\n    "id": 10,\n    "label": "Good table presentation (disabled node)"\n  },\n  {\n    "id": 11,\n    "label": "Pleasing decor"\n  },\n  {\n    "id": 12,\n    "label": "Extra information (has no tick)"\n  },\n  {\n    "id": 13,\n    "label": "Forced tick strategy (to \\"strict\\" in this case)"\n  },\n  {\n    "id": 14,\n    "label": "Happy atmosphere"\n  },\n  {\n    "id": 15,\n    "label": "Good table presentation"\n  },\n  {\n    "id": 16,\n    "label": "Very pleasing decor"\n  }\n]\n

\n\n

展开下面的代码片段，在您自己的浏览器中验证结果 -

\n\n

\r\n

\r\n

const transform1 = ({ id = 0, label = "", children = [] }) =>\n  [ { id, label }, ...transformAll (children) ] // calls transformAll\n\nconst transformAll = (children = []) =>\n  children .flatMap (c => transform1 (c)) // calls transform1\n\nconsole.log(transformAll(array))\n

\r\n

\r\n

\r\n

\n\n

\n\n

平坦地球之旅

\n\n

如果你以前从未见过.flatMap-

\n\n

xs.flatMap(f) == xs.map(f).reduce((a,b) => a.concat(b), [])\nxs.flatMap(f) == xs.reduce((a,b) => a.concat(f(b)), [])\n

\n\n

最好通过一个简单的演示来了解 -

\n\n

\r\n

\r\n

[\n  {\n    "id": 1,\n    "label": "Satisfied customers"\n  },\n  {\n    "id": 2,\n    "label": "Good food"\n  },\n  {\n    "id": 3,\n    "label": "Quality ingredients"\n  },\n  {\n    "id": 4,\n    "label": "Good recipe"\n  },\n  {\n    "id": 5,\n    "label": "Good service"\n  },\n  {\n    "id": 6,\n    "label": "Prompt attention"\n  },\n  {\n    "id": 7,\n    "label": "Professional waiter"\n  },\n  {\n    "id": 8,\n    "label": "Pleasant surroundings"\n  },\n  {\n    "id": 9,\n    "label": "Happy atmosphere (not tickable)"\n  },\n  {\n    "id": 10,\n    "label": "Good table presentation (disabled node)"\n  },\n  {\n    "id": 11,\n    "label": "Pleasing decor"\n  },\n  {\n    "id": 12,\n    "label": "Extra information (has no tick)"\n  },\n  {\n    "id": 13,\n    "label": "Forced tick strategy (to \\"strict\\" in this case)"\n  },\n  {\n    "id": 14,\n    "label": "Happy atmosphere"\n  },\n  {\n    "id": 15,\n    "label": "Good table presentation"\n  },\n  {\n    "id": 16,\n    "label": "Very pleasing decor"\n  }\n]\n

\r\n

\r\n

\r\n

\n\n

flatMap对各种事情都有用 -

\n\n

\r\n

\r\n

var array = [\r\n      {\r\n        id: 1,\r\n        label: \'Satisfied customers\',\r\n        children: [\r\n          {\r\n            id: 2,\r\n            label: \'Good food\',\r\n            icon: \'restaurant_menu\',\r\n            children: [\r\n\r\n              { id: 3, label: \'Quality ingredients\'},\r\n              { id: 4, label: \'Good recipe\' }\r\n            ]\r\n          },\r\n          {\r\n            id: 5,\r\n            label: \'Good service\',\r\n            icon: \'room_service\',\r\n            children: [\r\n              { id: 6, label: \'Prompt attention\' },\r\n              { id: 7, label: \'Professional waiter\' }\r\n            ]\r\n          },\r\n          {\r\n            id: 8,\r\n            label: \'Pleasant surroundings\',\r\n            icon: \'photo\',\r\n            children: [\r\n              {\r\n                id: 9,\r\n                label: \'Happy atmosphere (not tickable)\',\r\n                tickable: false,\r\n              },\r\n              {\r\n                id: 10,\r\n                label: \'Good table presentation (disabled node)\',\r\n                disabled: true,\r\n              },\r\n              {\r\n                id: 11,\r\n                label: \'Pleasing decor\',\r\n              }\r\n            ]\r\n          },\r\n          {\r\n            id: 12,\r\n            label: \'Extra information (has no tick)\',\r\n            noTick: true,\r\n            icon: \'photo\'\r\n          },\r\n          {\r\n            id: 13,\r\n            label: \'Forced tick strategy (to "strict" in this case)\',\r\n            tickStrategy: \'strict\',\r\n            icon: \'school\',\r\n            children: [\r\n              {\r\n                id: 14,\r\n                label: \'Happy atmosphere\',\r\n              },\r\n              {\r\n                id: 15,\r\n                label: \'Good table presentation\',\r\n              },\r\n              {\r\n                id: 16,\r\n                label: \'Very pleasing decor\',\r\n              }\r\n            ]\r\n          }\r\n        ]\r\n      }\r\n    ];\r\n    \r\nconst transform1 = ({ id = 0, label = "", children = [] }) =>\r\n  [ { id, label }, ... transformAll (children) ]\r\n  \r\nconst transformAll = (children = []) =>\r\n  children .flatMap (c => transform1 (c))\r\n  \r\nconsole.log(transformAll(array))

\r\n

\r\n

\r\n

\n\n

非常酷的事情 -

\n\n

\r\n

\r\n

xs.flatMap(f) == xs.map(f).reduce((a,b) => a.concat(b), [])\nxs.flatMap(f) == xs.reduce((a,b) => a.concat(f(b)), [])\n

\r\n

\r\n

\r\n

\n

Answer 2

您需要检查当前项目是否有children元素，您可以forEach改为使用，因为map返回新数组并forEach抛出每个元素。

const cb = (e) => {
    res.push({
        id: e.id,
        label: e.label,
    });
    e.children && e.children.forEach(cb);
}
array.forEach(cb);