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

我需要遍历以下对象，并为每个子对象运行一个函数。基本上我想从对象生成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'
          }
        }
      }
    }
  }
}

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

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

这是上面代码当前输出的内容，我将在下面放置一个代码笔，以便您可以更轻松地进行测试：

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"}

---

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

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'
        }
      ]
    }
  ]
}

---

首先，我会考虑使用数组来重构数据，这会使遍历变得更容易。

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'
        }
      ]
    }
  ]
}

---

假设您可以从JSON字符串开始，那么您可以使用自定义的

恢复程序
函数来简化操作：


var htmlJson=`{
“部门”：{
"0": {
“部门”：{
“类”：“marvLightbox__________________左”，
“单击事件”：“左”
}
},
"1": {
“部门”：{
“类”：“marvLightbox（右）”，
“单击事件”：“右键”
}
},
"2": {
“部门”：{
"0": {
“部门”：{
“类”：“marvLightbox_uuuEschint”，
“内容”：“按ESC键关闭”
}
},
"1": {
“部门”：{
“类”：“marvLightbox\uuuuu close”，
“事件\单击”：“关闭”
}
},
"2": {
“img”：{
“src”：“/img src/_themev2-knightsbridgecars-1544/making of/making-004.jpg”，
“类别”：“响应式img”
}
},
“类别”：“marvLightbox”
}
},
“id”：“marvLightbox\uuuu容器”
}
}`;
函数handleAttribute（元素、属性、值）{
if（HtmleElement的值实例）{
返回元素.appendChild（值）；
}
开关（属性）{
案例“类”：
案例'src'：
案件编号：
返回元素.setAttribute（属性，值）；
案例“内容”：
return element.innerHTML=值；
//其他键。。。
违约：
console.log（element.tagName、属性、值）；
}
}
函数HTMLEVIVER（键、值）{
//解析为元素
如果（isNaN（键）&&typeof值==='object'）{
var元素=document.createElement（键）；
var子值；
for（值中的var属性）{
handleAttribute（元素、属性、值[属性]）；
}
返回元素；
//将元素从{index:{tagName:element}}移动到{index:element}
}如果（！isNaN（键））{
返回值[Object.keys（值）[0]]；
//别管财产
}否则{
返回值；
}
}
var htmlObject=JSON.parse（htmlJson，htmleviver）；
console.log（htmlObject）；
document.body.appendChild（htmlObject）假设您可以改为以JSON字符串开始，您可以使用自定义的
恢复程序
函数来简化操作：


var htmlJson=`{
“部门”：{
"0": {
“部门”：{
“类”：“marvLightbox__________________左”，
“单击事件”：“左”
}
},
"1": {
“部门”：{
“类”：“marvLightbox（右）”，
“单击事件”：“右键”
}
},
"2": {
“部门”：{
"0": {
“部门”：{
“类”：“marvLightbox_uuuEschint”，
“内容”：“按ESC键关闭”
}
},
"1": {
“部门”：{
“类”：“marvLightbox\uuuuu close”，
“事件\单击”：“关闭”
}
},
"2": {
“img”：{
“src”：“/img src/_themev2-knightsbridgecars-1544/making of/making-004.jpg”，
“类别”：“响应式img”
}
},
“类别”：“marvLightbox”
}
},
“id”：“marvLightbox\uuuu容器”
}
}`;
函数handleAttribute（元素、属性、值）{
if（HtmleElement的值实例）{
返回元素.appendChild（值）；
}
开关（属性）{
案例“类”：
案例'src'：
案件编号：
返回元素.setAttribute（属性，值）；
案例“内容”：
return element.innerHTML=值；
//其他键。。。
违约：
console.log（element.tagName、属性、值）；
}
}
函数HTMLEVIVER（键、值）{
//解析为元素
如果（isNaN（键）&&typeof值==='object'）{
var元素=document.createElement（键）；
var子值；
for（值中的var属性）{
handleAttribute（元素、属性、值[属性]）；
}
返回元素；
//将元素从{index:{tagName:element}}移动到{index:element}
}如果（！isNaN（键））{
返回值[Object.keys（值）[0]]；
//别管财产
}否则{
返回值；
}
}
var htmlObject=JSON.parse（htmlJson，htmleviver）；
console.log（htmlObject）；
document.body.appendChild（htmlObject）首先，此结构中的对象将无法工作，因为同一对象中有重复的属性，如下所示：

这段代码我只是把它放在
x
变量中

var x = {
     'div': {
        'class': 'marvLightbox__eschint',
        'content': 'Press <span>ESC</span> to close'
      },
      'div': {
        'class': 'marvLightbox__close',
        'event_click': 'close'
      }
   }


因此您需要更改
对象的结构
以使其比当前结构更好

对于您需要使用的这一点，这将帮助您在同一级别复制元素，而不会出现任何问题

我制作了一个简单的结构并为您的对象实现它，您可以使用另一个结构，但仍然需要更改当前结构

此代码===您当前的代码，但在其他结构中

var html=[{
“标签”：“div”，
“属性”：{
“id”：“marvLightbox\uuuu容器”
},
“文本”：“，
“儿童”：[
{
“标签”：“div”，
“属性”：{
“类”：“marvLightbox__________________左”，
“单击事件”：“左”
},
“text”：“”，
“儿童”：[]
},
{
“标签”：“div”，
“属性”：{
“类”：“marvLightbox（右）”，
“单击事件”：“右键”
},
“文本”：“，
“儿童”：[]
},
{
“标签”：“di
var x = {
     'div': {
        'class': 'marvLightbox__eschint',
        'content': 'Press <span>ESC</span> to close'
      },
      'div': {
        'class': 'marvLightbox__close',
        'event_click': 'close'
      }
   }

var x = {
      'div': {
        'class': 'marvLightbox__close',
        'event_click': 'close'
      }
   }

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