我正在撰寫一個遞回函式，它需要在具有任何深度級別的物件陣列中運行。（如果它找到一個陣列，它會在完成物件屬性后運行到這個陣列中）
我們的想法是在網頁中創建一個通用表格，該表格可以處理任何物件結構之王并呈現尊重其層次結構的元素。
我可以深入任何級別，但它永遠不會完成回圈：
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);看到它在第一個串列中的第一次迭代之后結束，而沒有遇到接下來的兩個物件。
任何見解？
謝謝。
uj5u.com熱心網友回復：
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);轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/389005.html
標籤：javascript 数组 递归
上一篇：從DevOps到BizDevOps, 研發效能提升的系統方法
下一篇：如何等待遞回回圈完成并顯示訊息？