Javascript 遍历json树结构并将所有节点添加到列表中

所以我有一个json对象，我想遍历它并将所有节点添加到一个线性列表中

    [{ "name" : "Joe", "age" : "21", "children" : [
        { "name" : "Smith", "age" : "42", "children" : [] },
        { "name" : "Gary", "age" : "21", "children" : [
            { "name" : "Jenifer", "age" : "23", "children" : [
                { "name" : "Dani", "age" : "32", "children" : [] },
                { "name" : "Max", "age" : "34", "children" : [] }
            ]}
        ]}
    ]},
    { "name" : "Albert", "age" : "33", "children" : [] },
    { "name" : "Ron", "age" : "29", "children" : [] }
];

---

我想创建树中所有对象的列表，对象需要如下：

{“name”：“Joe”，“age”：“21”}

使用递归函数很容易遍历和展平数组。下面是一个示例算法：

函数展平（项，结果=[]））{
if（项目长度）{
var item=items.shift（）；
结果：推送（项目）；
if（item.children&&item.children.length）{
结果=展平（item.children，result）；
}
返回扁平化（项目、结果）；
}否则{
返回结果；
}
}
var people=[{
“姓名”：“乔”，
“年龄”：“21岁”，
“儿童”：[{
“姓名”：“史密斯”，
“年龄”：“42”，
“儿童”：[]
}, {
“姓名”：“加里”，
“年龄”：“21岁”，
“儿童”：[{
“姓名”：“Jenifer”，
“年龄”：“23岁”，
“儿童”：[{
“姓名”：“丹尼”，
“年龄”：“32岁”，
“儿童”：[]
}, {
“名称”：“最大值”，
“年龄”：“34岁”，
“儿童”：[]
}]
}]
}]
}, {
“姓名”：“阿尔伯特”，
“年龄”：“33岁”，
“儿童”：[]
}, {
“姓名”：“罗恩”，
“年龄”：“29岁”，
“儿童”：[]
}];
console.log（展平（人））

解决此问题的最简单方法是使用

递归

函数来

横向

您的树结构

在我的解决方案中，我使用

instanceOf

API来检查横向构件的类型，然后确定要采取的措施

请参见：

示例：

let result = [];
let people =
    [
      { "name" : "Joe", "age" : "21", "children" : [
        { "name" : "Smith", "age" : "42", "children" : [] },
        { "name" : "Gary", "age" : "21", "children" : [
          { "name" : "Jenifer", "age" : "23", "children" : [
            { "name" : "Dani", "age" : "32", "children" : [] },
            { "name" : "Max", "age" : "34", "children" : [] }
          ]}
        ]}
      ]},
      { "name" : "Albert", "age" : "33", "children" : [] },
      { "name" : "Ron", "age" : "29", "children" : [] }
    ];

function transverse(element, result) {
    if (element instanceof Array)
      element.forEach(item => { transverse(item, result); });
    else if (element instanceof Object) {
      result.push({ name: element.name, age: element.age });
      if (element.hasOwnProperty("children")) {
        transverse(element.children, result);
      }
    }
}

transverse(people, result);
console.log(result);

[ { name: 'Joe', age: '21' },
  { name: 'Smith', age: '42' },
  { name: 'Gary', age: '21' },
  { name: 'Jenifer', age: '23' },
  { name: 'Dani', age: '32' },
  { name: 'Max', age: '34' },
  { name: 'Albert', age: '33' },
  { name: 'Ron', age: '29' } ]

输出：

let result = [];
let people =
    [
      { "name" : "Joe", "age" : "21", "children" : [
        { "name" : "Smith", "age" : "42", "children" : [] },
        { "name" : "Gary", "age" : "21", "children" : [
          { "name" : "Jenifer", "age" : "23", "children" : [
            { "name" : "Dani", "age" : "32", "children" : [] },
            { "name" : "Max", "age" : "34", "children" : [] }
          ]}
        ]}
      ]},
      { "name" : "Albert", "age" : "33", "children" : [] },
      { "name" : "Ron", "age" : "29", "children" : [] }
    ];

function transverse(element, result) {
    if (element instanceof Array)
      element.forEach(item => { transverse(item, result); });
    else if (element instanceof Object) {
      result.push({ name: element.name, age: element.age });
      if (element.hasOwnProperty("children")) {
        transverse(element.children, result);
      }
    }
}

transverse(people, result);
console.log(result);

[ { name: 'Joe', age: '21' },
  { name: 'Smith', age: '42' },
  { name: 'Gary', age: '21' },
  { name: 'Jenifer', age: '23' },
  { name: 'Dani', age: '32' },
  { name: 'Max', age: '34' },
  { name: 'Albert', age: '33' },
  { name: 'Ron', age: '29' } ]

---

假设它是一个没有排序的简单遍历，则可以使用两个简单函数来完成：

function visitChild(node, array) {
    array[array.length] = { name: node.name, age:node.age };
    if (node.children && node.children.length) {
        node.children.forEach( function(child) { visitChild(child, array); } );
    }
}

function traverseTree(root, list = []) {
    if (root.length) {
        root.forEach( function(node){ visitChild(node, list); });
    }
    return list;
}

console.log( traverseTree(tree) );

---

由于这已经恢复，我们可能希望访问一个更简单的ES6解决方案：

const extract=（people=[]）=>
platmap（（{children=[]，…rest}）=>[rest，…extract（children）]）
const people=[{姓名：“乔”，年龄：“21”，儿童：[{姓名：“史密斯”，年龄：“42”，儿童：[]}，{姓名：“加里”，年龄：“21”，儿童：[{姓名：“杰尼弗”，年龄：“23”，儿童：[{姓名：“丹尼”，年龄：“32”，儿童：[]}，{姓名：“马克斯”，年龄：“34”，儿童：[]}}，{姓名：“阿尔伯特”，年龄：“33”，儿童：[]}，{姓名：“罗恩”，年龄：“29”，儿童：[]}]
console.log（提取（人员））

---

.as console wrapper{max height:100%！important；top:0}

奇怪的是，这些人的孩子比自己大，是否存在任何排序约束？e、 乔总是第一个，然后是他的后代。这将继续进行，直到找不到更多的子节点为止，直到下一个节点为Albert。无顺序constraint@ua_boaz万一你在将来遇到类似的问题，你也可以把它看作一个替代的解决方案。它基本上一个节点一个节点地遍历树，并保持顺序。它的代码也少了一点。嗨，塞缪尔，另一个问题不确定你是否能帮上忙。。。假设我正在试图找到一个对象的父对象，即{“name”：“Max”，“age”：“34”，“children”：[]}，它应该返回它的父节点对象，{“name”：“Jenifer”，“a…”有什么想法吗？@ua_-boaz我当然可以帮忙。你想提出另一个问题，我会马上给出解决方案吗？