javascript - 在不使用库的情况下遍历嵌套对象文字

Question

大家好，总的来说，我是 javascript 和 Jquery 的新手，到目前为止，我对对象文字的用法很着迷。现在我正在浏览 bootstrap modal.js 插件的源代码并遇到以下代码行:

var options = $.extend({}, Modal.DEFAULTS, $this.data(), typeof option == 'object' && option)

您可以在 git too 上查看这行代码.

现在那行代码正在创建一个非常复杂的对象字面量，它在“对象”内部的“对象”内部有很多“对象”等等……基本上是一个嵌套的对象字面量。

为了让我完全理解那行代码，我必须能够 console.log 对象文字。

我在 SO here 上看到了一个帖子.

现在我在该答案中看到的打印对象文字的解决方案如下:

for (var key in validation_messages) {
   if (validation_messages.hasOwnProperty(key)) {
       var obj = validation_messages[key];
        for (var prop in obj) {
          // important check that this is objects own property 
          // not from prototype prop inherited
          if(obj.hasOwnProperty(prop)){
            alert(prop + " = " + obj[prop]);
          }
       }
    }
}

现在解决方案工作正常，如果我有一个对象文字如下:

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
        "your_name": "billy",
        "your_msg": "foo equals bar"
    }
}

但是如果我有一个像下面这样的对象文字怎么办:

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
      "your_name": {
        "first_name" : "Ratan",
        "secound_name" : "Tata",
      },
        "your_msg": "foo equals bar"
    }
}

我将在控制台中得到以下信息:

"your_name = jimmy" 
"your_msg = hello world" 
"your_name = [object Object]" 
"your_msg = foo equals bar"

问题是每当键的值是一个对象时，我希望循环进入对象并从那里打印键和值，基本上我希望这是递归的。我尝试修改我在该线程中找到的原始代码，但我几乎不知道我在做什么。下面是我修改的代码。

var validation_messages = {
    "key_1": {
        "your_name": "jimmy",
        "your_msg": "hello world"
    },
    "key_2": {
      "your_name": {
        "first_name" : "Ratan",
        "secound_name" : "Tata",
      },
        "your_msg": "foo equals bar"
    }
}


for (var key in validation_messages) {
   if (validation_messages.hasOwnProperty(key)) {
       var obj = validation_messages[key];
        for (var prop in obj) {
          // important check that this is objects own property 
          // not from prototype prop inherited

          if(typeof prop != 'string') {
            for(var obj_key in prop) {
              var obj = prop[obj_key];
               for (var prop in obj){
                  console.log(prop + " = " + obj[prop]);
               }
            }
          }

          if(obj.hasOwnProperty(prop)){
            console.log(prop + " = " + obj[prop]);
          }
       }
    }
} 

重复我的问题，了解如何递归地遍历对象文字并打印出其属性对我来说非常重要。

我对显示对象字面量数据的想法如下:

.

谢谢。

亚历山大。

Answer 1

作为伪代码，解决方案非常简单:

function objectToString(object) {
  string result = '';
  for (key in object) {
    if (hasFields(object[key]))
      result  += objectToString(object[key]);
    else 
      result  += key + ':' + object[key];
  }
}

这里的额外困难是管理演示文稿。一种方法是引入缩进级别。然后可以在每次调用时增加此级别以获得您寻求的树表示。

在 JS 中，你可能有这样的代码:

function objectToString(object, level) {
  var prettyString = '',
      tabs = '';
  // We prepare the indentation for the current object
  for (var i=0; i<level; i++) {
      tabs += '\t';
  }

  for (var key in object) {
    prettyString += tabs + key;
    // if the considered field is an object, we call this function with a 
    // greater indentation level
    if (typeof object[key] === 'object') {
      prettyString += '\n';
      prettyString += prettyPrintKeys(object[key], level + 1);
    } else {
      prettyString += ':' + object[key] ;
    }
    prettyString += '\n';
  }
  return prettyString;
}

此函数可以像这样在您的示例中使用:objectToString(validation_messages, 0);

但是，请注意，虽然这段代码很简单，也很适合在 JS 中查看递归，但它并不完整。如果您希望拥有更强大(和通用)的解决方案，您可能想咨询 the JSON format .