如何在嵌套对象数组中获取 object 路径？

Question

我试图通过使用递归循环遍历数组对象并获取它们与父对象的关系来获取对象数组的完整路径，但我不能做的是路径重置并开始添加“孩子”的钥匙。

 const data = { data: [ { key: 'userInfo', group: [ { key: 'street', }, { key: 'phone', }, ], }, { key: 'fullName', group: [ { key: 'firstName', }, { key: 'lastName', }, ], }, ], }; // userInfo.street // userInfo.phone // fullName.firstName // fullName.lastName let groupPath = ''; data.data.forEach(function iter(a) { if (a.group) { groupPath = a.key; } else { groupPath = [groupPath, a.key].join('.'); } Array.isArray(a.group) && a.group.forEach(iter); console.log(' group', groupPath); });

最后的结果应该是这样的：

用户信息.street

用户信息电话

全名.名字

全名.姓氏

Answer 1

似乎您可以维护所有组的数组，只需执行几个循环即可完成此操作。 以下应该为你做

 const data={data:[{key:"userInfo",group:[{key:"street"},{key:"phone"}]},{key:"fullName",group:[{key:"firstName"},{key:"lastName"}]}]}; const groups = []; data.data.forEach(el => { if (el.group) { el.group.forEach(group => { groups.push(`${el.key}.${group.key}`); }) } }) console.log(groups);

Answer 2

更新逻辑。

当前代码的问题

您在执行的 else 块中使用子节点详细信息编写了groupPath 。

 const data={data:[{key:"userInfo",group:[{key:"street"},{key:"phone"}]},{key:"fullName",group:[{key:"firstName"},{key:"lastName"}]}]}; let groupPath = ''; let rootGroupPath = ''; let groupList = []; data.data.forEach(function iter(a) { if (a.group) { rootGroupPath = a.key; } else { groupPath = [rootGroupPath, a.key].join('.'); groupList.push(groupPath); } Array.isArray(a.group) && a.group.forEach(iter); }); console.log(' group', groupList);

简化方法

使用Array.flatMap

逻辑

• 循环遍历data.data数组。
• 在此 Array 中的每个数据节点内，运行Array.map并从外部节点返回key ，从组节点返回key 。

工作小提琴

 const data = { data: [{ key: "userInfo", group: [{ key: "street" }, { key: "phone" }] }, { key: "fullName", group: [{ key: "firstName" }, { key: "lastName" }] }] }; const groupList = data.data.flatMap((data) => data.group.map((group) => `${data.key}.${group.key}`)); console.log(' group', groupList);

Answer 3

这是一个递归 function 可以得到无限层的路径。

 const data = { data: [ { key: 'userInfo', group: [ { key: 'street', group:[ { key: 'city', group: [ {key: 'country'} ] } ] }, { key: 'phone', }, ], }, { key: 'fullName', group: [ { key: 'firstName', }, { key: 'lastName', }, ], }, ], }; function getPaths({key,group}) { return Array.isArray(group)? group.flatMap(it => getPaths(it).map(path => key?= null. `${key}:${path}`: path)); [key]: } const paths = getPaths({key,null:group.data;data}). console;log(paths);

Answer 4

您可以为此使用forEach方法，而不是使用递归。

 const data = { data: [{ key: 'userInfo', group: [{ key: 'street', }, { key: 'phone', }, ], }, { key: 'fullName', group: [{ key: 'firstName', }, { key: 'lastName', }, ], }, ], }; let res = []; data.data.forEach((i)=>{ let key = i.key; i.group.forEach((j)=>{ let str = key + "." + j.key; res.push(str); }); }) console.log(res); // userInfo.street // userInfo.phone // fullName.firstName // fullName.lastName

---

如果您需要使用递归，可以查看此代码段。

 const data = { data: [{ key: 'userInfo', group: [{ key: 'street', }, { key: 'phone', }, ], }, { key: 'fullName', group: [{ key: 'firstName', }, { key: 'lastName', }, ], }, ], }; let res = []; let idx = 0; function iter(obj) { let key = obj.key; if (obj.group) obj.group.forEach(i => res.push(key + "." + i.key)) idx++; //base condition if (idx == data.data.length) return; iter(data.data[idx]); } iter(data.data[idx]); console.log(res);

Answer 5

在一次迭代中使用flatMap和map

 const getPaths = (arr) => arr.flatMap(({ key, group }) => group.map(({ key: k }) => `${key}.${k}`)); const data = { data: [ { key: "userInfo", group: [ { key: "street", }, { key: "phone", }, ], }, { key: "fullName", group: [ { key: "firstName", }, { key: "lastName", }, ], }, ], }; console.log(getPaths(data.data))