美文网首页让前端飞
递归遍历树形结构

递归遍历树形结构

作者: yuanzhuang | 来源:发表于2019-03-19 16:23 被阅读2次

    原有的结构 (树形结构)

    实现后的结构

    完整代码

    可复制代码

    <!DOCTYPE html>

    <html lang="en">

    <head>

      <meta charset="UTF-8">

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      <meta http-equiv="X-UA-Compatible" content="ie=edge">

      <title>Document</title>

    </head>

    <body>

      <script>

        var data = [

          {

            name: "张三",

            age: "40",

            children: [

              {

                name: "张三的儿子",

                age: "20",

                children:[{

                  name:"张三的孙子",

                  age:'3',

                  children:[{

                  name:"张三的孙子2",

                  age:'3'

                }]

                }]

              }

            ]

          }

        ];

          var arr=[]

          function getArray(data, children) {

            for (var i in data) {

              // 等于对象下面没有children属性的时候在最外面的父级追加进去 i永远等于0

              if (data[i].children == "undefined") {

                // 吧父级在追加进去

                arr.push(data[i])

                return

              } else {

                // 把当前循环的这个对象当做参数传进去在执行一遍

                getArray(data[i].children, children);

                //  删除掉当前的这个下的children

                  delete  data[i].children

                  arr.push(data[i])

              }

            }

          }

        getArray(data)

        // 因为是最深的一个children开吃查找的所以使用翻转

        console.log(arr.reverse());

      </script>

    </body>

    </html>

    相关文章

      网友评论

        本文标题:递归遍历树形结构

        本文链接:https://www.haomeiwen.com/subject/gjeyuqtx.html