JavaScript 对象 - 我在访问嵌套多个级别的对象属性数组并将它们组合在一起时遇到问题

Question

我有 objects 的 array 和那些 objects 包含一个名为 children 的属性，它们也是 objects 并且他们会在多个层次上重复它们（或不重复）。

基本上，我需要完成两件事：

• 获取第一级 path 属性的值及其在 children 属性中的多个级别。

• 将它们连接在一起得到单个 string，这将是一个路由/URL。

例如，按照下面的示例代码，我需要像这样获取三个不同的 URL/路由：

/system-settings1/accounting1/accounting1/etc

/system-settings2/accounting2/accounting2/etc

/system-settings3/accounting3/accounting3/etc

这是我的object的小样本：

const routes = [
  {
    path: '/system-settings1',
    name: 'global-settings1',
    component: 'tabs1',
    children: {
      path: 'accounting1',
      name: 'local-settings1',
      components: 'modals1',
      children: {
        path: 'accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
  {
    path: '/system-settings2',
    name: 'global-settings2',
    component: 'tabs2',
    children: {
      path: 'accounting2',
      name: 'local-settings2',
      components: 'modals2',
      children: {
        path: 'accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
  {
    path: '/system-settings3',
    name: 'global-settings3',
    component: 'tabs3',
    children: {
      path: 'accounting3',
      name: 'local-settings3',
      components: 'modals3',
      children: {
        path: 'accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
]

我能够像这样获得父路径及其下一个直接子路径：

const routeParentPaths = routes.map(({path}) => path);

const routeChildrenPaths = routes.map(({children}) => children.path);

console.log((routeParentPaths.concat(routeChildrenPaths)));

但我需要找到一种方法来访问其所有子路径，而且我需要找到一种连接方法，以便为每个 object 形成一个正确的 URL。

您会找到一个代码示例here。

Answer 1

因此，您可以简单地继续检查 children 键是否存在并更新您要检查的对象。这可以随心所欲地嵌套。我更新了您的一条路线，以便更轻松地显示它。

基本上

const routes = [
  {
    path: '/system-settings1',
    name: 'global-settings1',
    component: 'tabs1',
    children: {
      path: 'CHILD1accounting1',
      name: 'local-settings1',
      components: 'modals1',
      children: {
        path: 'CHILD2accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
  {
    path: '/system-settings2',
    name: 'global-settings2',
    component: 'tabs2',
    children: {
      path: 'accounting2',
      name: 'local-settings2',
      components: 'modals2',
      children: {
        path: 'accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
  {
    path: '/system-settings3',
    name: 'global-settings3',
    component: 'tabs3',
    children: {
      path: 'accounting3',
      name: 'local-settings3',
      components: 'modals3',
      children: {
        path: 'accounting1',
        name: 'local-settings1',
        components: 'modals1'
        // more children deeply nested(or not)
      }
    }
  },
]



let x = routes.map(route => {
  let path = route.path + "/";
  while(route.hasOwnProperty('children')) {
    route = route.children;
    path += `${route.path}/`
  }
  return path;
});

console.log(x);

Answer 2

使用Array.map() 迭代routes 数组，并使用do...while 循环从嵌套对象构造一个url。

const getUrl = route => {
  let r = route
  let url = []
  
  do {   
    url.push(r.path)
  } while(r = r.children)

  return url.join('/')
}

const getUrls = routes => routes.map(getUrl)

const routes = [{"path":"/system-settings1","name":"global-settings1","component":"tabs1","children":{"path":"accounting1","name":"local-settings1","components":"modals1","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}},{"path":"/system-settings2","name":"global-settings2","component":"tabs2","children":{"path":"accounting2","name":"local-settings2","components":"modals2","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}},{"path":"/system-settings3","name":"global-settings3","component":"tabs3","children":{"path":"accounting3","name":"local-settings3","components":"modals3","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}}]

const result = getUrls(routes)

console.log(result)

Answer 3

您可以创建将接收数据对象和先前路径的递归函数，如果对象有子对象，请再次调用它。

const routes = [{"path":"/system-settings1","name":"global-settings1","component":"tabs1","children":{"path":"accounting1","name":"local-settings1","components":"modals1","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}},{"path":"/system-settings2","name":"global-settings2","component":"tabs2","children":{"path":"accounting2","name":"local-settings2","components":"modals2","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}},{"path":"/system-settings3","name":"global-settings3","component":"tabs3","children":{"path":"accounting3","name":"local-settings3","components":"modals3","children":{"path":"accounting1","name":"local-settings1","components":"modals1"}}}]

function toPaths(data, prev = '') {
  const result = []

  function build(obj, prev = '') {
    prev += (prev ? '/' : '') + obj.path;
    if (obj.children) build(obj.children, prev)
    else result.push(prev)
  }

  data.forEach(e => build(e));
  return result;
}

const paths = toPaths(routes)
console.log(paths)

Answer 4

您可以创建一个以对象为参数的递归函数。 Destructure 获取path 和children 属性的参数。如果嵌套对象没有children，则只返回path。否则，递归调用children上的函数并将其附加到当前path

然后，使用map 对routes 数组中的每个项目调用此函数

const getPath = ({ path, children }) => children ? `${path}/${getPath(children)}` : path

const output = routes.map(getPath)

这是一个sn-p：

const 
  routes=[{path:"/system-settings1",name:"global-settings1",component:"tabs1",children:{path:"accounting1",name:"local-settings1",components:"modals1",children:{path:"accounting1",name:"local-settings1",components:"modals1"}}},{path:"/system-settings2",name:"global-settings2",component:"tabs2",children:{path:"accounting2",name:"local-settings2",components:"modals2",children:{path:"accounting1",name:"local-settings1",components:"modals1"}}},{path:"/system-settings3",name:"global-settings3",component:"tabs3",children:{path:"accounting3",name:"local-settings3",components:"modals3",children:{path:"accounting1",name:"local-settings1",components:"modals1"}}},],
  getPath = ({ path, children }) => children ? `${path}/${getPath(children)}` : path,
  output = routes.map(getPath)

console.log(output)