带有for循环的Javascript递归中断了循环，并且没有完成

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);