如何使用JavaScript filter()函数过滤嵌套JSON对象中的根节点（父节点）并提取其标签

嘿，我来帮你搞定这个需求！你需要从给定的JSON数组里筛选出根节点（也就是parent属性为null的节点），然后提取它们的label并拼接成空格分隔的字符串对吧？

思路分析 #

根节点的判断标准很明确：每个数组元素的node对象中，parent属性值为null。我们可以通过三个简单步骤完成需求：

1. 用filter方法筛选出所有符合条件的根节点
2. 用map方法提取这些节点的label值
3. 最后用join把label数组转成空格分隔的目标字符串

代码实现 #

先把你的JSON数组补全（把[Object]换成空数组方便测试），然后编写处理逻辑：

const myJSON = [ 
  { __typename: 'Query', node: { __typename: 'Item', childItems: [], id: 'a', label: 'node1', url: '#', parent: null } }, 
  { __typename: 'Query', node: { __typename: 'Item', childItems: [], id: 'b', label: 'node2', url: '#', parent: null } }, 
  { __typename: 'Query', node: { __typename: 'Item', childItems: [], id: 'a', label: 'node3', url: '#', parent: 'node1' } } 
];

// 筛选根节点并提取label
const rootLabels = myJSON
  .filter(item => item.node.parent === null)
  .map(item => item.node.label);

// 拼接成目标格式的字符串
const result = rootLabels.join(' ');

console.log(result); // 输出: "node1 node2"

关于你提到的node4 #

你期望的输出里包含node4，但当前的myJSON数组里并没有对应的根节点。如果需要包含它，只需要在数组里添加一个符合根节点条件的条目即可：

// 添加node4的根节点条目
myJSON.push({ 
  __typename: 'Query', 
  node: { __typename: 'Item', childItems: [], id: 'd', label: 'node4', url: '#', parent: null } 
});

// 重新执行处理逻辑后，result会变成 "node1 node2 node4"

这样就能得到你想要的输出啦！

内容的提问来源于stack exchange，提问作者Rabner Casandara