从嵌套的对象数组中提取所有特定属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从嵌套的对象数组中提取所有特定属性相关的知识，希望对你有一定的参考价值。
我有一个嵌套的对象数组。我想要一个仅向我提供onClick属性作为键并将值提供给null的对象。我可以导航到第一级，但是无法进一步浏览。我该如何做呢？
const headers = [
id: 'title1',
title: 'Title 1',
children: [
title: 'Children 1',
child: [
title: 'Child 1',
id: 'child1Id',
onClick: 'child1Click',
url: '/child1'
,
title: 'Child 2',
id: 'child2Id',
onClick: 'child2Click'
]
,
title: 'Children 2',
child: [
title: 'Child 3',
id: 'child3Id',
onClick: 'child3Click',
,
title: 'Child 4',
id: 'child4Id',
onClick: 'child4Click'
]
]
,
id: 'title2',
title: 'Title 2',
privilege: '',
children: [
title: 'Children 3',
privilege: '',
child: [
title: 'Child 5',
id: 'child5Id',
onClick: 'child3Click',
url: '/child5',
privilege: ''
,
title: 'Child 6',
id: 'child6Id',
onClick: 'child6Click',
url: '/child6',
privilege: ''
]
,
title: 'Children 4',
privilege: '',
child: [
title: 'Child 7',
id: 'child7Id',
onClick: 'child7Click',
url: '/child7',
privilege: ''
,
title: 'Child 8',
id: 'child8Id',
onClick: 'child8Click',
url: '/child8',
privilege: ''
]
]
];
const routesMap = ( onClick, children ) => (onClick ? [onClick]: null : _.flatMap(children, routesMap));
const routeStates = _.assign(, ..._.flatMap(headers, routesMap));
console.log(routeStates)<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>预期输出：
child1Click: null,
child2Click: null,
child3Click: null,
child4Click: null,
child5Click: null,
child6Click: null,
child7Click: null,
child8Click: null,
请咨询。非常感谢您的帮助。
答案
使用香草JS，您可以使用3个嵌套的映射循环来获取onClick值，并返回一个具有该值作为属性的对象。使用Array.flat()转换为单个数组，然后扩展为Object.assign()以获取对象。
const fn = headers => Object.assign(, ...headers
.map(( children ) =>
children.map(( child ) => child.map(( onClick ) => ( [onClick]: null )))
) // extract onClick values
.flat(Infinity) // flatten to a single array
)
const headers = ["id":"title1","title":"Title 1","children":["title":"Children 1","child":["title":"Child 1","id":"child1Id","onClick":"child1Click","url":"/child1","title":"Child 2","id":"child2Id","onClick":"child2Click"],"title":"Children 2","child":["title":"Child 3","id":"child3Id","onClick":"child3Click","title":"Child 4","id":"child4Id","onClick":"child4Click"]],"id":"title2","title":"Title 2","privilege":"","children":["title":"Children 3","privilege":"","child":["title":"Child 5","id":"child5Id","onClick":"child3Click","url":"/child5","privilege":"","title":"Child 6","id":"child6Id","onClick":"child6Click","url":"/child6","privilege":""],"title":"Children 4","privilege":"","child":["title":"Child 7","id":"child7Id","onClick":"child7Click","url":"/child7","privilege":"","title":"Child 8","id":"child8Id","onClick":"child8Click","url":"/child8","privilege":""]]]
const routeStates = fn(headers)
console.log(routeStates)另一答案
尝试以循环方式访问它，并尝试访问它，因为它是一个对象...
for ( let i = 0; i < headers.length; i++ )
for (let j = 0; j < headers[i].children.length; j++ )
for (let k = 0; k < headers[i].children[j].child.length; j++ )
console.log( headers[i].children[j].child[k].onClick);
它将打印如下...
child1Click,
child2Click,
child3Click,
child4Click,
child5Click,
child6Click,
child7Click,
child8Click
[如果您要将所有childClick设置为null，请尝试添加它。。
console.log( headers[i].children[j].child[k].onClick: null);
我希望它会有所帮助
另一答案
我借用了找到的解决方案here来创建它：
var headers = [
//...
];
var newObj = ;
function iterate(obj)
Object.keys(obj).forEach(key =>
if (key === 'onClick')
newObj[obj[key]] = 'null';
if (typeof obj[key] === 'object')
iterate(obj[key])
)
iterate(headers);
console.log(newObj);
以上是关于从嵌套的对象数组中提取所有特定属性的主要内容，如果未能解决你的问题，请参考以下文章