我有一个具有层次结构的对象数组,如下所示:
[
{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 来实现它。
答案 0 :(得分:6)
不需要下划线/ 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));
答案 1 :(得分:2)
递归函数是进行任何迭代深度的方法。
使用一些ES2015和LoDash / Underscore
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>
答案 2 :(得分:1)
我会使用.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));
答案 3 :(得分:0)
您可以尝试调整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);
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
&#13;
这有帮助吗?
答案 4 :(得分:0)
你可以使用一些破坏并使用递归函数来收集所有想要的物品。
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; }
在EDGE上,您需要使用不同的默认值。
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; }