javascript - 节点集上的递归回调

Question

我有一个树结构(jstree.js)，它是 DOM 元素的列表。对于每个元素，我检查它是否是父元素，选择其子元素，然后检查父元素状态，...

我需要将树元素解析为对象数组。如果一个元素是父元素，则会为其提供一个附加属性，作为其子对象的数组。这些子对象会被递归地检查。

这是我尝试将 DOM 元素列表解析为的基本结构。 这是我正在寻找的输出

 [ {s:0,c:[ {s:1}, {s:2,c:[s:3]}, {s:4} ]} ]

这是基本的递归函数: 我检查节点的 type() 。如果它是父级，我尝试使用回调来递归子级集。如果它是子元素，那么我返回 id 属性

 function Parse3(rootelem,OBJ,freduce) {
                function type(e){
                    //var e = new Element(root.id)
                    // return !e.isParent ? {'sibling':e.jstxt} : freduce( parent, cb)
                    if (!e.isParent){
                        console.log('- - - CHILD - - -', e.jstxt )
                        return {'sibling':e.jstxt}
                        }
                    if (e.isParent) {
                        console.log('- - - PARENT - - -', e.jstxt )
                        return freduce(OBJ, e, function(i){
                            for ( var i=0; i<e.numchildren; i++ ){
                                console.log('recurse',i ,' ', type( e.childElements[i]) );
                                type( e.childElement[i] )
                            }})
                    }
                }//close type
                return type(rootelem)
            }//Parse3

接下来，(我让它与原始类型一起工作)但是由于我正在处理方法，所以我返回一个保存 cb 的reduce 函数。

   function freduce(OBJ, e,cb){
        OBJ.push( {'sibling':e.jstxt, 'xml':[] }  )
        var obl= OBJ.length-1 == undefined ? 0 : OBJ.length-1
        OBJ[ obl ].xml.push( cb )
        return OBJ
       }

如何迭代选定的子节点。我对 javascript 有点陌生，不太确定我用来迭代子项的回调逻辑。此外，我不确定如何将子属性减少为元素对象。

(在处理嵌套结构时，我能够让它与基元(数字)一起使用。处理对象并迭代子元素集会导致问题......)

如有任何建议，我们将不胜感激!

Answer 1

你真的不需要打电话freduce这只会让事情变得复杂。您可以创建 xml类型函数内部的属性，没有整个调用和回调模式。

此外，您应该尽量不要通过 OBJ around:而是从递归返回值构建它，直到最终返回值:这是调用者获取结果的方式:

function parse3(rootelem) {
    function type(e){
        var obj = {'sibling': e.jstxt};
        if (e.isParent){
            obj.xml = [];
            for (var i=0; i<e.numchildren; i++ ){
                obj.xml.push(type(e.childElement[i]));
            }
        }
        return obj;
    }
    return type(rootelem);
}

注意:最好不要用全部大写来命名变量，这通常用于表示常量原始值。另外，第一个字母不应大写，因为它主要用于构造函数/类名称。

一些进一步的改进:

通过上面的代码，函数parse3本质上与函数 type 没有什么不同:它们都采用相同的参数并返回相同类型的信息。

此外，您可以迭代 childElement列表带有 map函数，或者(如果它不是真正的数组)，带有 Array.from打回来。然后，利用 Object.assign 在一个表达式中完成所有操作也变得很好。 :

function parse3(e) {
    return Object.assign ({sibling: e.jstxt},
        e.isParent ? { xml: Array.from(e.childElement, parse3) } : {});
}