使用 javascript 递归遍历具有渲染函数的数组/对象答案

【问题标题】：Recursively walk through an array/object with render functions with javascript使用 javascript 递归遍历具有渲染函数的数组/对象
【发布时间】：2018-04-23 08:17:09
【问题描述】：

我正在处理的一个例子 https://codepen.io/wombsplitter/pen/KyWKod

我的数组结构如下

[{
 //obj 1
 link: [{
        //obj 2
        link: [{
              //obj 3
              }]
        }]
}]

数组可以在任何“级别”保存任意数量的元素。我想递归地走一遍，并使用渲染函数，将它们打印到页面上，同时保留它们的结构。

div.item
  div.info
  div.link
     div.info
     div.link
        div.info
        div.link
           div.info
           div.link

任何帮助，建议将不胜感激。

【问题讨论】：

您的控制台应该会显示结构。你只想要这些值，如果它们不是对象？
我应该补充一点，每个数组中的每个对象很可能都包含属性，所以我正在遍历每个子数组，并打印所述数据。

标签： javascript arrays recursion vue.js vuejs2

【解决方案1】：

您的代码中有错误，请参见下面我正在调用 arr.map 您正在调用 this.test.map

    renderFunction(h, arr) {
      return h('div', { class: 'link'}, arr.map(t => {
        return h('div', t.name);
    }

【讨论】：

【解决方案2】：

懒惰的方式，应该是正确的：

function recurse(obj){
   var html = ['<div class="info"></div>'];
   html.push('<div class="link">')
   if(!!obj.link) html.push(recurse(obj.link[0]));
   html.push('</div>')
   return html.join('')
}

document.getElementsByClassName('item')[0].innerHtml = recurse(obj[0]);

【讨论】：

【解决方案3】：

这个呢：

renderFunction(h, arr) {
  return renderStructure(this.test, h)
}

// outside of your App object
function rendeStructure(test, h){
  return h('div', { class: 'link'}, test.map(t => {
    return h('div', {class: 'info'}, [t.name, renderStructure(t.links, h)]);
  }))
}

这确实假设您的数据中没有循环。

【讨论】：

我不得不稍微修改一下，但它似乎可以解决问题，谢谢。
酷。我没用过 Vue，所以我对事情的工作原理做了一些假设

【解决方案4】：

如果你只想要这些值，你可以这样做：

function getVals(mixed){
  var r = [];
  function rec(mixed){
    var a;
    if(mixed instanceof Array){
      for(var i=0,l=mixed.length; i<l; i++){
        a = mixed[i];
        if(typeof a === 'object' && a !== null){
          return rec(a);
        }
        else{
          r.push(a);
        }
      }
    }
    else if(typeof mixed === 'object' && mixed !== null){
      for(var i in mixed){
        a = mixed[i];
        if(typeof a === 'object' && a !== null){
          return rec(a);
        }
        else{
          r.push(a);
        }
      }
    }
    else{
      r.push(mixed);
    }
    return r;
  }
  return rec(mixed);
}
var obj = {
  el: '#app',
  data: {
    test: [{
      name: 'parent',
      link: [{
        name: 'child1',
        link: [{
          name: 'child2',
          deepObj: {
            deepProp:'Number 7 test',
            num:7,
            deeperArray:[true, false, 'test', 'in', 'here', 1]
          }
        }]
      }]
    },
    {
      name: 'parent2'
    }]
  }
}
var vals = getVals(obj);
// getVals returns an Array, hence the .join()
console.log(vals.join(', ')); console.log(vals);

【讨论】：