Рекурсивная функция «разбора» в javascript

Question

Я пытаюсь создать своего рода рекурсивную функцию синтаксического анализа, но она не работает должным образом.

Массив должен быть проанализирован:

gridArray = [ 
    { 
     type:"row", 
     text:"row1", 
     cols: [ 
      { 
       type:"col", 
       text:"col1", 
       rows: [ 
        { 
         type:"row", 
         text:"row1 nested", 
         cols: [{}] 
        } 
       ] 
      }, 
      { 
       type:"col", 
       text:"col2", 
       rows: [{}] 
      } 
     ] 
    } 
] 

Функция:

function createHtmlCode(gridArray,level){ 

    for(var y=0; y<gridArray.length; y++){ 
     obRow = gridArray[y]; 
     r+="<div class='row'>"; 
     arCol = obRow.cols; 
     for(var x=0; x<arCol.length; x++){ 
      obCol = arCol[x]; 
      r+="<div class='col'>"; 
      if(obCol.rows){ 
       createHtmlCode(obCol.rows,level++); 
      } 
      r+="</div>"; 
     } 
     r+="</div>"; 
    } 

} 

r=""; 
createHtmlCode(gridArray,1); 

На данный момент результат (г):

<div class="row"> 
    <div class="col"> 
     <div class="row"> 
      <div class="col"> 
      </div> 
     </div> 
    </div> 
</div> 

... но Шоуде до:

<div class="row"> 
    <div class="col"> 
     <div class="row"> 
      <div class="col"> 
      </div> 
     </div> 
    </div> 
    <div class="col"> 
     <div class="row"> 
     </div> 
    </div> 
</div> 

Что я делаю неправильно? Благодарим вас за советы!

Answer 1

Hahaha! У вас есть очень тонкая (но очень распространенная) ошибка.

Смотрите здесь:

arCol = obRow.cols; 

Это ошибка, если вы посмотрите внимательно.

Есть? Или вы хотите, чтобы я портил его?

Ошибка: в Javascript, если вы не объявляете переменную как локальную, она по умолчанию является глобальной. arCol получает сброс в рекурсивном вызове!

Все объявления переменных должны быть явными:

var arCol = obRow.cols; 

Другие советы:

• x и y должны быть использованы для обозначения пространственной информации (на "оси х" и "ось y"); используйте i и j (и при необходимости k) для индексов массива. И объявите их локальными.
• do не использовать глобальные изменчивые значения - в этом примере r. Вместо этого функция возвращает строку
• никогда не использует одно и то же имя для глобальной переменной и формальный параметр (gridArray в этом случае) или локальную переменную. Компьютер не будет путать, но вы будете.
• не ставьте имя типа («массив») в имя переменной без определенной причины.
• не ставят простое выражение переменной, если вы только собираетесь использовать его один раз без уважительной причины

Так что исправленный код будет

function createHtmlCode(grid,level){ 
    var r = ""; 
    for(var i=0; i<grid.length; i++){ 
    r+="<div class='row'>"; 
    var arCol = grid[i].cols; 
    for(var j=0; j<arCol.length; j++){ 
     r+="<div class='col'>"; 
     var rows = arCol[j].rows; 
     if(rows){ 
     r += createHtmlCode(rows,level++); 
     } 
     r+="</div>"; 
    } 
    r+="</div>"; 
    } 
    return r; 
} 

console.log(createHtmlCode(myGrid,1));