javascript - 对象上的 For 循环失去控制

Question

我正在处理一个项目，该项目具有疯狂的 for 循环以在 D3.js Canvas 交互中扩展节点。本质上，我想要的是扩大所有的 child 。所以如果一个对象有一个 child ，我想扩展它们。

我从中删掉了一大块代码。有这么多 for 循环，这太荒谬了。我怎样才能将其简化为简单的“查找所有子项，预制 toggle(); 和 update();”？

$('.expandAll').click(function(e) {
    e.preventDefault();
    length = root.children.length;

    for (var i = 0; i < length; i++) {
        toggle(root.children[i]);
        update(root);

        if (root.children[i]['children']) {
            childlength = root.children[i]['children'].length;

            for (var j = 0; j < childlength; j++) {
                toggle(root.children[i]['children'][j]);
                update(root);

                if (root.children[i]['children'][j]['children']) {
                    childlength2 = root.children[i]['children'][j]['children'].length;

                    for (var k = 0; k < childlength2; k++) {
                        toggle(root.children[i]['children'][j]['children'][k]);
                        update(root);
                    }
                }
            }
        }
    }
});

Answer 1

听起来像是递归的好例子:

$('.expandAll').click(function(e) {
    e.preventDefault();

    expandAll(root);
});

var expandAll = function (node) {
    toggle(node);
    update(node);

    // edit: if nodes with no children are lacking the children property
    if (!node.children) {
        return;
    }

    for (var i = 0, length = node.children.length; i < length; i++) {
        expandAll(node.children[i]);
    }
};

我不确定 toggle 和 update 的确切含义，但您可以只执行一个顶级 update在调用 expandAll(root); 之后调用。