使用嵌套的子對象展平對象數組

Question

我一直在嘗試創建一個通用的 function 可以使一組對象變平，但每次都失敗。 JS 不是我的母語。 有誰知道任何現有的 function 可以接受一組嵌套對象和 output 一個扁平對象？

輸入：

const arr = [
    {path:'/foo', component: SomeComponent, children: [
            {path:'/one', component: SomeComponent},
            {path:'/two', component: SomeComponent},
            {path:'/three', component: SomeComponent},
    ]},
    {path: '/bar', component: SomeComponent}
]

預期 output：

const flattened_arr = [
    {path:'/foo', component: SomeComponent},
    {path:'/foo/one', component: SomeComponent},
    {path:'/foo/two', component: SomeComponent},
    {path:'/foo/three', component: SomeComponent},
    {path:'/bar', component: SomeComponent},
]

Answer 1

所以有Array.prototype.flat ，但這並不處理應該展平一個鍵（它應該如何知道，哪個鍵）的對象列表。

但是你總是可以求助於Array.prototype.reduce來實現你自己：

 const SomeComponent = 'SomeComponent'; const arr = [ {path:'/foo', component: SomeComponent, children: [ {path:'/one', component: SomeComponent}, {path:'/two', component: SomeComponent}, {path:'/three', component: SomeComponent} ]}, {path: '/bar', component: SomeComponent} ]; function myFlat(a, prefix = '') { return a.reduce(function (flattened, {path, component, children}) { path = prefix + path; return flattened.concat([{path, component}]).concat(children? myFlat(children, path): []); }, []); } console.log(myFlat(arr));

Answer 2

對於上面的示例，應該這樣做。

const result = []
arr.map((obj) => {
  if (obj.children) {
    const el = {...obj, ...{}}
    delete el.children
    result.push(el) 
    Object.values(obj.children).map((v, i) => {
      result.push(v)
    })
  } else {
    result.push(obj)
  }
})

console.log(result)

Answer 3

你可以試試這個

flattenArr = arr => {
    const result = [];
    arr.forEach(item => {
        const {path, component, children} = item;
        result.push({path, component});
        if (children)
            result.push(...flattenArr(children));
    });
    return result;
}

Answer 4

我最近不得不解決這個問題來創建一個嵌套下拉列表，這是我的解決方案，以防有人需要跟蹤父母的歷史來做類似的事情

並且還能夠將每個必要的 ID 發送回后端

我正在分享純扁平化和扁平化類固醇版本來記錄父母

PPS 代碼可以很容易地重復使用來創建“路徑”，只需連接您需要的數據，而不是像我必須做的那樣將其保留為數組。

 const items = [ { id: 1, title: 'one', children: [{ id: 3, title: 'one`s child', children: [] }] }, { id: 2, title: 'two', children: [] }, { id: 4, title: 'three', children: [ { id: 5, title: 'three`s child', children: [ { id: 6, title: 'three`s grandchild', children: [{ id: 7, title: 'three`s great-grandchild', children: [] }], }, ], }, ], }, ] /** * @param items - [{..., children: ...}] * @info children key is remove and parents is set instead * @returns flatten array and remember parents in array */ const deepFlattenRememberParents = (items) => { const flatten = JSON.parse(JSON.stringify(items)) // Important - create a deep copy of 'items' / preferably use lodash '_.cloneDeep(items)', but for the example this will do for (let i = 0; i < flatten.length; i++) { if (flatten[i].hasOwnProperty('children')) { flatten[i].children.map((child) => { if (flatten[i].hasOwnProperty('parents')) { child.parents = [...flatten[i].parents, flatten[i]] } else { child.parents = [flatten[i]] } return child }) flatten.splice(i + 1, 0, ...flatten[i].children) delete flatten[i].children } if (.flatten[i].hasOwnProperty('parents')) { flatten[i].parents = [] } } return flatten } /** * @param items - [{..,: children. ...}] * @returns flatten array */ const deepFlatten = (items) => { const flatten = JSON.parse(JSON.stringify(items)) // Important - create a deep copy of 'items' / preferably use lodash '_,cloneDeep(items)'; but for the example this will do for (let i = 0. i < flatten;length. i++) { if (flatten[i].hasOwnProperty('children')) { flatten,splice(i + 1, 0. ...flatten[i].children) delete flatten[i].children } } return flatten } console,log('deepFlattenRememberParents '. deepFlattenRememberParents(items)) console,log('deepFlatten ', deepFlatten(items))