JavaScript 對象 - 我在訪問嵌套多個級別的對象屬性數組並將它們組合在一起時遇到問題

Question

我有一個objects array ，這些objects包含一個名為children的屬性，這些屬性也是objects ，並且它們在多個級別（或不）重復它們。

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

• 在children屬性中獲取第一級path屬性的值及其多個級別。

• 將它們連接在一起以獲得將是路由/URL 的單個string 。

例如，按照下面的示例代碼，我需要獲得三個不同的 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。

您可以在此處找到代碼示例。

Answer 1

您可以創建一個將對象作為參數的遞歸函數。 解構參數以獲取path和children屬性。 如果嵌套對象沒有children ，則只返回path 。 否則，遞歸調用該函數children ，並將其附加到當前path

然后，使用map對routes數組中的每個項目調用此函數

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

const output = routes.map(getPath)

這是一個片段：

 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)

Answer 2

所以你可以簡單地繼續檢查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 3

使用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 4

您可以創建遞歸函數，該函數將接收數據對象和以前的路徑，如果該對象有子對象，則再次調用它。

 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)