javascript - 循环遍历对象和未知数量的子对象

Question

我需要循环访问以下对象并为每个子对象运行一个函数。基本上我想从对象生成 HTML，因此对象内的子对象显然将是 HTML 内的子对象。

所以，对象:

var html = {
  'div' : {
    'id': 'marvLightbox__container',
    0: {
      'div': {
        'class': 'marvLightbox__left',
        'event_click': 'left'
      }
    },
    1: {
      'div': {
        'class': 'marvLightbox__right',
        'event_click': 'right'
      }
    },
    2: {
      'div': {
        'class': 'marvLightbox',
        0: {
          'div': {
            'class': 'marvLightbox__eschint',
            'content': 'Press <span>ESC</span> to close'
          },
          'div': {
            'class': 'marvLightbox__close',
            'event_click': 'close'
          },
          'img': {
            'src': '/img-src/_themev2-knightsbridgecars-1544/making-of/making-004.jpg',
            'class': 'responsive-img'
          }
        }
      }
    }
  }
}

如果我们暂时忽略 event_click 部分，上面的对象应该生成以下内容:

<div id="marvLightbox__container">
  <div class="marvLightbox__left"></div>
  <div class="marvLightbox__right"></div>
  <div class="marvLightbox">
    <div class="marvLightbox__eschint">
      Press <span>ESC</span> to close
    </div>
    <div class="marvLightbox__close"></div>
    <img src="/img-src/_themev2-knightsbridgecars-1544/making-of/making-004.jpg" alt="" class="responsive-img">
  </div>
</div>

这是我当前拥有的代码，但是它没有深入到对象中并且输出不正确。

Object.size = function(obj) {
  var size = 0, key;
  for (key in obj) {
    if (obj.hasOwnProperty(key)) size++;
  }
  return size;
};
function allDescendants (node, n) {
  var i = 0;
  for (var property in node) {
    var child = node[property];
    console.log(property);
    if (Object.size(child) > 1) {
      allDescendants(child, i);
    }
    i++;
    //allDescendants(child, i);
    doSomethingToNode(child, i);
  }
}
function doSomethingToNode(node, n) {
  console.log(n + ': ' + node);
}
allDescendants(html);

这是上面代码当前输出的内容，我也会在下面放一个 Codepen，以便您可以更轻松地测试:

marv.lightbox.js:141 div
marv.lightbox.js:141 0
marv.lightbox.js:151 1
marv.lightbox.js:152 Object {div: Object}
marv.lightbox.js:141 1
marv.lightbox.js:151 2
marv.lightbox.js:152 Object {div: Object}
marv.lightbox.js:141 2
marv.lightbox.js:151 3
marv.lightbox.js:152 Object {div: Object}
marv.lightbox.js:141 id
marv.lightbox.js:141 0
marv.lightbox.js:151 1
marv.lightbox.js:152 m
marv.lightbox.js:141 1
marv.lightbox.js:151 2
marv.lightbox.js:152 a
marv.lightbox.js:141 2
marv.lightbox.js:151 3
marv.lightbox.js:152 r
marv.lightbox.js:141 3
marv.lightbox.js:151 4
marv.lightbox.js:152 v
marv.lightbox.js:141 4
marv.lightbox.js:151 5
marv.lightbox.js:152 L
marv.lightbox.js:141 5
marv.lightbox.js:151 6
marv.lightbox.js:152 i
marv.lightbox.js:141 6
marv.lightbox.js:151 7
marv.lightbox.js:152 g
marv.lightbox.js:141 7
marv.lightbox.js:151 8
marv.lightbox.js:152 h
marv.lightbox.js:141 8
marv.lightbox.js:151 9
marv.lightbox.js:152 t
marv.lightbox.js:141 9
marv.lightbox.js:151 10
marv.lightbox.js:152 b
marv.lightbox.js:141 10
marv.lightbox.js:151 11
marv.lightbox.js:152 o
marv.lightbox.js:141 11
marv.lightbox.js:151 12
marv.lightbox.js:152 x
marv.lightbox.js:141 12
marv.lightbox.js:151 13
marv.lightbox.js:152 _
marv.lightbox.js:141 13
marv.lightbox.js:151 14
marv.lightbox.js:152 _
marv.lightbox.js:141 14
marv.lightbox.js:151 15
marv.lightbox.js:152 c
marv.lightbox.js:141 15
marv.lightbox.js:151 16
marv.lightbox.js:152 o
marv.lightbox.js:141 16
marv.lightbox.js:151 17
marv.lightbox.js:152 n
marv.lightbox.js:141 17
marv.lightbox.js:151 18
marv.lightbox.js:152 t
marv.lightbox.js:141 18
marv.lightbox.js:151 19
marv.lightbox.js:152 a
marv.lightbox.js:141 19
marv.lightbox.js:151 20
marv.lightbox.js:152 i
marv.lightbox.js:141 20
marv.lightbox.js:151 21
marv.lightbox.js:152 n
marv.lightbox.js:141 21
marv.lightbox.js:151 22
marv.lightbox.js:152 e
marv.lightbox.js:141 22
marv.lightbox.js:151 23
marv.lightbox.js:152 r
marv.lightbox.js:151 4
marv.lightbox.js:152 marvLightbox__container
marv.lightbox.js:151 1
marv.lightbox.js:152 Object {0: Object, 1: Object, 2: Object, id: "marvLightbox__container"}

Codepen example

Answer 1

首先，我会考虑重组您的数据以利用数组，这将使遍历变得更加容易。

var html = {
  'id': 'marvLightbox__container',
  'children' : [
    {
      'class': 'marvLightbox__left',
      'event_click': 'left'
    },
    {
      'class': 'marvLightbox__right',
      'event_click': 'right'
    },
    {
      'class': 'marvLightbox',
      'children': [
        {
          'class': 'marvLightbox__eschint',
          'content': 'Press <span>ESC</span> to close'
        },
         {
          'class': 'marvLightbox__close',
          'event_click': 'close'
        },
        {
          'src': '/img-src/_themev2-knightsbridgecars-1544/making-of/making-004.jpg',
          'class': 'responsive-img'
        }
      ]
    }
  ]
}

然后你可以像这样遍历整个对象:

//Recursively loop through all children
function walkTheObject(dataNode, func) {
  func(dataNode);

  if(dataNode.children) {
    dataNode.children.forEach((child) => {
      walkTheObject(child, func)
    })
  }
}