Javascript递归for循环中断了循环，没有完成

Question

我正在编写一个递归函数，它需要在具有任何深度的对象数组中运行。(如果它找到一个数组，它将在完成对象属性之后运行到这个数组中)

其思想是在网页中创建一个通用表，该表可以处理任何对象结构的王者，并呈现尊重其层次结构的元素。

我可以走得更深，但它永远不会完成循环：

​

let keys = [
  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'filhos', 'netos', 'bisnetos'
];

let tempArr = [];
let counter = 0;

function renderer(arr) {
  for (let x = 0; x < arr.length; x++) {
    const currItem = arr[x];

    for (let y = 0; y < keys.length; y++) {
      const inner = currItem[keys[y]]
      if (inner instanceof Array) {
        tempArr = inner;
      }
      if (inner && !(inner instanceof Array)) {
        console.log(`renderizando ${counter} camada: `, inner);
      }

      if (y === keys.length - 1) {
        if (tempArr.length > 0) {
          const children = tempArr;
          tempArr = [];
          return renderer(children);
        } else {
          continue;
        }
      }
    }
  }

  counter++;
  console.log('counter: ', counter);
  return counter;
}

const data = [{
    a: '1st item',
    b: '2nd item',
    c: '3rd item',
    d: '4th item',
    filhos: [{
      a: 'filho 1st item',
      b: 'filho 2nd item',
      c: 'filho 3rd item',
      d: 'filho 4th item',
      netos: [{
        a: 'neto 1st item',
        b: 'neto 2nd item',
        c: 'neto 3rd item',
        d: 'neto 4th item',
        bisnetos: [{
          a: 'bisneto 1st item',
          b: 'bisneto 2nd item',
          c: 'bisneto 3rd item',
          d: 'bisneto 4th item',
          f: 'bisneto 5th item',
          g: 'bisneto 6th item',
          h: 'bisneto last item'
        }],
        f: 'neto 5th item',
        g: 'neto 6th item',
        h: 'neto last item'
      }],
      f: 'filho 5th item',
      g: 'filho 6th item',
      h: 'filho last item'
    }],
    f: '5th item',
    g: '6th item',
    h: 'last item'
  },
  {
    a: '1st item',
    b: '2nd item',
    c: '3rd item',
    d: '4th item',
    filhos: [{
      a: 'filho 1st item',
      b: 'filho 2nd item',
      c: 'filho 3rd item',
      d: 'filho 4th item',
      netos: [{
        a: 'neto 1st item',
        b: 'neto 2nd item',
        c: 'neto 3rd item',
        d: 'neto 4th item',
        bisnetos: [{
          a: 'bisneto 1st item',
          b: 'bisneto 2nd item',
          c: 'bisneto 3rd item',
          d: 'bisneto 4th item',
          f: 'bisneto 5th item',
          g: 'bisneto 6th item',
          h: 'bisneto last item'
        }],
        f: 'neto 5th item',
        g: 'neto 6th item',
        h: 'neto last item'
      }],
      f: 'filho 5th item',
      g: 'filho 6th item',
      h: 'filho last item'
    }],
    f: '5th item',
    g: '6th item',
    h: 'last item'
  },
  {
    a: '1st item',
    b: '2nd item',
    c: '3rd item',
    d: '4th item',
    filhos: [{
      a: 'filho 1st item',
      b: 'filho 2nd item',
      c: 'filho 3rd item',
      d: 'filho 4th item',
      netos: [{
        a: 'neto 1st item',
        b: 'neto 2nd item',
        c: 'neto 3rd item',
        d: 'neto 4th item',
        bisnetos: [{
          a: 'bisneto 1st item',
          b: 'bisneto 2nd item',
          c: 'bisneto 3rd item',
          d: 'bisneto 4th item',
          f: 'bisneto 5th item',
          g: 'bisneto 6th item',
          h: 'bisneto last item'
        }],
        f: 'neto 5th item',
        g: 'neto 6th item',
        h: 'neto last item'
      }],
      f: 'filho 5th item',
      g: 'filho 6th item',
      h: 'filho last item'
    }],
    f: '5th item',
    g: '6th item',
    h: 'last item'
  },
]

renderer(data);

​

确保它在第一个列表中的第一个迭代之后结束，而不会运行到下两个对象。

有什么见解吗？

谢谢。

Answer 1

在进行递归调用时不应该使用return。

此外，避免在递归函数中使用全局变量，使它们不可重入.如果需要持久化和更新数据，请将其作为参数传递并返回值。可以对初始值使用默认值。

在重写中，我将counter作为参数传递，然后返回更新的值，调用方将该值分配给其counter。类似地，我将tempArr作为参数传递。

​

let keys = [
  'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'filhos', 'netos', 'bisnetos'
];

function renderer(arr, counter = 0, tempArr = []) {
  for (let x = 0; x < arr.length; x++) {
    const currItem = arr[x];

    for (let y = 0; y < keys.length; y++) {
      const inner = currItem[keys[y]]
      if (inner instanceof Array) {
        tempArr = inner;
      }
      if (inner && !(inner instanceof Array)) {
        console.log(`renderizando ${counter} camada: `, inner);
      }

      if (y === keys.length - 1) {
        if (tempArr.length > 0) {
          counter = renderer(tempArr, counter, []);
        }
      }
    }
  }

  counter++;
  console.log('counter: ', counter);
  return counter;
}

const data = [{
    a: '1st item',
    b: '2nd item',
    c: '3rd item',
    d: '4th item',
    filhos: [{
      a: 'filho 1st item',
      b: 'filho 2nd item',
      c: 'filho 3rd item',
      d: 'filho 4th item',
      netos: [{
        a: 'neto 1st item',
        b: 'neto 2nd item',
        c: 'neto 3rd item',
        d: 'neto 4th item',
        bisnetos: [{
          a: 'bisneto 1st item',
          b: 'bisneto 2nd item',
          c: 'bisneto 3rd item',
          d: 'bisneto 4th item',
          f: 'bisneto 5th item',
          g: 'bisneto 6th item',
          h: 'bisneto last item'
        }],
        f: 'neto 5th item',
        g: 'neto 6th item',
        h: 'neto last item'
      }],
      f: 'filho 5th item',
      g: 'filho 6th item',
      h: 'filho last item'
    }],
    f: '5th item',
    g: '6th item',
    h: 'last item'
  },
  {
    a: '1st item',
    b: '2nd item',
    c: '3rd item',
    d: '4th item',
    filhos: [{
      a: 'filho 1st item',
      b: 'filho 2nd item',
      c: 'filho 3rd item',
      d: 'filho 4th item',
      netos: [{
        a: 'neto 1st item',
        b: 'neto 2nd item',
        c: 'neto 3rd item',
        d: 'neto 4th item',
        bisnetos: [{
          a: 'bisneto 1st item',
          b: 'bisneto 2nd item',
          c: 'bisneto 3rd item',
          d: 'bisneto 4th item',
          f: 'bisneto 5th item',
          g: 'bisneto 6th item',
          h: 'bisneto last item'
        }],
        f: 'neto 5th item',
        g: 'neto 6th item',
        h: 'neto last item'
      }],
      f: 'filho 5th item',
      g: 'filho 6th item',
      h: 'filho last item'
    }],
    f: '5th item',
    g: '6th item',
    h: 'last item'
  },
  {
    a: '1st item',
    b: '2nd item',
    c: '3rd item',
    d: '4th item',
    filhos: [{
      a: 'filho 1st item',
      b: 'filho 2nd item',
      c: 'filho 3rd item',
      d: 'filho 4th item',
      netos: [{
        a: 'neto 1st item',
        b: 'neto 2nd item',
        c: 'neto 3rd item',
        d: 'neto 4th item',
        bisnetos: [{
          a: 'bisneto 1st item',
          b: 'bisneto 2nd item',
          c: 'bisneto 3rd item',
          d: 'bisneto 4th item',
          f: 'bisneto 5th item',
          g: 'bisneto 6th item',
          h: 'bisneto last item'
        }],
        f: 'neto 5th item',
        g: 'neto 6th item',
        h: 'neto last item'
      }],
      f: 'filho 5th item',
      g: 'filho 6th item',
      h: 'filho last item'
    }],
    f: '5th item',
    g: '6th item',
    h: 'last item'
  },
]

renderer(data);

​