递归函数返回空数组

Question

This code is meant to get all sub-elements and its children into one array. However it returns bunch of empty arrays.

function get_independent_elements_from(element) {

    var independent_elements = [];

    if (element.hasChildNodes()) {
        var children = element.children;

        for (let child of children) {
            independent_elements = independent_elements.concat(get_independent_elements_from(child));
        }
    } else {
        independent_elements.push(element);
    }

    return independent_elements;
}

Answer 1

Whilst your new code does appear to work, you could also get the browser to do the heavy lifting for you without recursion:

function getLeafNodes(el) {
    let nl = el.querySelectorAll('*');
    return [].filter.call(nl, x => !x.firstChild);
}

Here's a potentially more efficient recursive version which just closes over a single array and handles the recursion internally:

function getLeadNodes(el) {
    let r = [];
    (function loop(x) {
        if (x.children.length) {
            [].forEach.call(x.children, loop);
        } else {
            r.push(x);
        }
    })(el);
    return r;
}

Answer 2

If the element like this:

<p>hello world</p>

element.hasChildNodes() will return ture,but element.children return a empty HTMLCollection.

You can change the if condition to take a try.

if (element.children.length) { xxx }

thank you to give advice or comments to me.