扁平物体

Question

我有对象的具有层次结构的一个数组的JavaScript数组，像这样：

[ 
    {name: 'ParentOne', children: [ 
     {name: 'ParentOneChildOne'}, 
     {name: 'ParentOneChildTwo', children: [ 
      {name: 'ParentOneChildTwoGrandChildOne'}, 
     ]}, 
    ]}, 
    {name: 'ParentTwo', children: [ 
     {name: 'ParentTwoChildOne', children: [ 
      {name: 'ParentTwoChildOneGrandChildOne'}, 
      {name: 'ParentTwoChildOneGrandChildTwo'} 
     ]}, 
     {name: 'ParentTwoChildTwo'} 
    ]} 
]; 

我要弄平它：

[ 
    {name: 'ParentOne'}, 
    {name: 'ParentOneChildOne'}, 
    {name: 'ParentOneChildTwo'}, 
    {name: 'ParentOneChildTwoGrandChildOne'}, 
    {name: 'ParentTwo'}, 
    {name: 'ParentTwoChildOne'}, 
    {name: 'ParentTwoChildOneGrandChildOne'}, 
    {name: 'ParentTwoChildOneGrandChildTwo'}, 
    {name: 'ParentTwoChildTwo'} 
] 

我试图_.flatten()和_.flatMap()，但它不会产生我需要的东西。什么是最好的方式来实现它最好使用lodash.js或underscore.js。

Answer 1

不需要下划线/ lodash。

const arr = [ 
 
    {name: 'ParentOne', children: [ 
 
     {name: 'ParentOneChildOne'}, 
 
     {name: 'ParentOneChildTwo', children: [ 
 
      {name: 'ParentOneChildTwoGrandChildOne'}, 
 
     ]}, 
 
    ]}, 
 
    {name: 'ParentTwo', children: [ 
 
     {name: 'ParentTwoChildOne', children: [ 
 
      {name: 'ParentTwoChildOneGrandChildOne'}, 
 
      {name: 'ParentTwoChildOneGrandChildTwo'} 
 
     ]}, 
 
     {name: 'ParentTwoChildTwo'} 
 
    ]} 
 
]; 
 

 
function flatten(arr) { 
 
    return arr? arr.reduce((result, item) => [ 
 
     ...result, 
 
     { name: item.name }, 
 
     ...flatten(item.children) 
 
    ], []) : []; 
 
} 
 

 
console.log(flatten(arr));

Answer 2

我会用.reduce和递归来做到这一点。这里是我使用Array.reduce的实现，但是您可以使用下划线的reduce函数完成相同的操作。

const arr = [ 
 
    {name: 'ParentOne', children: [ 
 
     {name: 'ParentOneChildOne'}, 
 
     {name: 'ParentOneChildTwo', children: [ 
 
      {name: 'ParentOneChildTwoGrandChildOne'}, 
 
     ]}, 
 
    ]}, 
 
    {name: 'ParentTwo', children: [ 
 
     {name: 'ParentTwoChildOne', children: [ 
 
      {name: 'ParentTwoChildOneGrandChildOne'}, 
 
      {name: 'ParentTwoChildOneGrandChildTwo'} 
 
     ]}, 
 
     {name: 'ParentTwoChildTwo'} 
 
    ]} 
 
]; 
 

 
function flatten(arr) { 
 
    return arr.reduce((result, current) => { 
 
     if (current.children) { 
 
     const children = flatten(current.children); 
 
     delete current.children; 
 
     result.push(current); 
 
     result.push(...children); 
 
     } else { 
 
     result.push(current); 
 
     } 
 
     return result; 
 
    }, []) 
 
} 
 

 
console.log(flatten(arr));

Answer 3

你可以尝试调整在this answer给出的flatten功能，轻旋逻辑到对象的结构。

//Your object 
 
var data = [{ 
 
    name: 'ParentOne', 
 
    children: [{ 
 
     name: 'ParentOneChildOne' 
 
     }, 
 
     { 
 
     name: 'ParentOneChildTwo', 
 
     children: [{ 
 
      name: 'ParentOneChildTwoGrandChildOne' 
 
     }, ] 
 
     }, 
 
    ] 
 
    }, 
 
    { 
 
    name: 'ParentTwo', 
 
    children: [{ 
 
     name: 'ParentTwoChildOne', 
 
     children: [{ 
 
      name: 'ParentTwoChildOneGrandChildOne' 
 
      }, 
 
      { 
 
      name: 'ParentTwoChildOneGrandChildTwo' 
 
      } 
 
     ] 
 
     }, 
 
     { 
 
     name: 'ParentTwoChildTwo' 
 
     } 
 
    ] 
 
    } 
 
]; 
 

 
//georg's flatten function 
 
flatten = function(x, result, prefix) { 
 
    if (_.isObject(x)) { 
 
    _.each(x, function(v, k) { 
 
     flatten(v, result, prefix ? prefix + '_' + k : k) 
 
    }) 
 
    } else { 
 
    result[prefix] = x 
 
    } 
 
    return result 
 
} 
 

 
//using the function on your data 
 
result = flatten(data, {}); 
 
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

这是否帮助呢？

Answer 4

递归函数是任何迭代深度的方法。

随着一些ES2015和LoDash /下划线

var arr = [{ 
 
    name: 'ParentOne', 
 
    children: [{ 
 
    name: 'ParentOneChildOne' 
 
    }, { 
 
    name: 'ParentOneChildTwo', 
 
    children: [{ 
 
     name: 'ParentOneChildTwoGrandChildOne' 
 
    }, ] 
 
    }, ] 
 
}, { 
 
    name: 'ParentTwo', 
 
    children: [{ 
 
    name: 'ParentTwoChildOne', 
 
    children: [{ 
 
     name: 'ParentTwoChildOneGrandChildOne' 
 
    }, { 
 
     name: 'ParentTwoChildOneGrandChildTwo' 
 
    }] 
 
    }, { 
 
    name: 'ParentTwoChildTwo' 
 
    }] 
 
}]; 
 

 
var res = _.reduce(arr, (a, b) => { 
 
    (rec = item => { 
 
    _.each(item, (v, k) => (_.isObject(v) ? rec(v) : a.push(_.zipObject([k], [v])))) 
 
    })(b); 
 
    return a; 
 
}, []); 
 

 
console.log(res);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>

Answer 5

你可以使用一些破坏和使用递归函数，用于收集所有想要的物品。

var array = [{ name: 'ParentOne', children: [{ name: 'ParentOneChildOne' }, { name: 'ParentOneChildTwo', children: [{ name: 'ParentOneChildTwoGrandChildOne' },] },] }, { name: 'ParentTwo', children: [{ name: 'ParentTwoChildOne', children: [{ name: 'ParentTwoChildOneGrandChildOne' }, { name: 'ParentTwoChildOneGrandChildTwo' }] }, { name: 'ParentTwoChildTwo' }] }], 
 
    flat = (r, { name, children = [] }) => [...r, { name }, ...children.reduce(flat, []) ], 
 
    result = array.reduce(flat, []); 
 
    
 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }

边缘，你需要一个不同的使用defualt值

var array = [{ name: 'ParentOne', children: [{ name: 'ParentOneChildOne' }, { name: 'ParentOneChildTwo', children: [{ name: 'ParentOneChildTwoGrandChildOne' },] },] }, { name: 'ParentTwo', children: [{ name: 'ParentTwoChildOne', children: [{ name: 'ParentTwoChildOneGrandChildOne' }, { name: 'ParentTwoChildOneGrandChildTwo' }] }, { name: 'ParentTwoChildTwo' }] }], 
 
    flat = (r, { name, children }) => [...r, { name }, ...(children || []).reduce(flat, []) ], 
 
    result = array.reduce(flat, []); 
 
    
 
console.log(result);

.as-console-wrapper { max-height: 100% !important; top: 0; }