Javascript 遍历对象

我真的很难找到一种方法以我喜欢的方式遍历这个对象。我在这里只使用Javascript

首先，这里是对象

{
"dialog":
{
    "dialog_trunk_1":{
        "message": "This is just a JSON Test"
    },
    
    "dialog_trunk_2":{
        "message": "and a test of the second message"
    },

    "dialog_trunk_3":
    {
        "message": "This is a test of a bit longer text. Hopefully this will at the very least create 3 lines and trigger us to go on to another box. So we can test multi-box functionality, too."
    }
}
}

现在，我只是在尝试一些基本的方法来完成这个对象上的每个对话框。理想情况下，我希望在对象中循环，并为每个主干显示它的

message

值

---

我已尝试使用for循环动态生成对话框的名称/编号，但我无法使用对象名称字符串访问对象，因此我不确定从这里转到何处。

为此使用

for..in

循环。确保检查对象是否拥有这些属性，或者是否也显示所有继承的属性。例如：

var obj = {a: 1, b: 2};
for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    var val = obj[key];
    console.log(val);
  }
}

或者，如果需要递归遍历所有属性：

var obj = {a: 1, b: 2, c: {a: 1, b: 2}};
function walk(obj) {
  for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
      var val = obj[key];
      console.log(val);
      walk(val);
    }
  }
}
walk(obj);

---

我的问题实际上是JSON对象规划不当的问题，而不是实际的逻辑问题。我最后做的是按照用户2736012的建议，按如下方式组织对象

{
"dialog":
{
    "trunks":[
    {
        "trunk_id" : "1",
        "message": "This is just a JSON Test"
    },
    {
        "trunk_id" : "2",
        "message": "This is a test of a bit longer text. Hopefully this will at the very least create 3 lines and trigger us to go on to another box. So we can test multi-box functionality, too."
    }
    ]
}
}

在这一点上，我能够根据对象的总数执行一个相当简单的for循环

var totalMessages = Object.keys(messages.dialog.trunks).length;

    for ( var i = 0; i < totalMessages; i++)
    {
        console.log("ID: " + messages.dialog.trunks[i].trunk_id + " Message " + messages.dialog.trunks[i].message);
    }

var totalMessages=Object.key（messages.dialog.trunks）.length；
对于（变量i=0；i

---

不过，并非所有浏览器都支持我获取totalMessages的方法。对于我的项目来说，这其实并不重要，但如果您选择使用类似的方法，请注意这一点。

以下是我的递归方法：

function visit(object) {
    if (isIterable(object)) {
        forEachIn(object, function (accessor, child) {
            visit(child);
        });
    }
    else {
        var value = object;
        console.log(value);
    }
}

function forEachIn(iterable, functionRef) {
    for (var accessor in iterable) {
        functionRef(accessor, iterable[accessor]);
    }
}

function isIterable(element) {
    return isArray(element) || isObject(element);
}

function isArray(element) {
    return element.constructor == Array;
}

function isObject(element) {
    return element.constructor == Object;
}

---

@schirrmacher建议的递归方法的改进版本，用于为整个对象打印键[value]：

var jDepthLvl = 0;
function visit(object, objectAccessor=null) {
  jDepthLvl++;
  if (isIterable(object)) {
    if(objectAccessor === null) {
      console.log("%c ⇓ ⇓ printing object $OBJECT_OR_ARRAY$ -- START ⇓ ⇓", "background:yellow");
    } else
      console.log("%c"+spacesDepth(jDepthLvl)+objectAccessor+"%c:","color:purple;font-weight:bold", "color:black");
    forEachIn(object, function (accessor, child) {
      visit(child, accessor);
    });
  } else {
    var value = object;
    console.log("%c"
      + spacesDepth(jDepthLvl)
      + objectAccessor + "[%c" + value + "%c] "
      ,"color:blue","color:red","color:blue");
  }
  if(objectAccessor === null) {
    console.log("%c ⇑ ⇑ printing object $OBJECT_OR_ARRAY$ -- END ⇑ ⇑", "background:yellow");
  }
  jDepthLvl--;
}

function spacesDepth(jDepthLvl) {
  let jSpc="";
  for (let jIter=0; jIter<jDepthLvl-1; jIter++) {
    jSpc+="\u0020\u0020"
  }
  return jSpc;
}

function forEachIn(iterable, functionRef) {
  for (var accessor in iterable) {
    functionRef(accessor, iterable[accessor]);
  }
}

function isIterable(element) {
  return isArray(element) || isObject(element);
}

function isArray(element) {
  return element.constructor == Array;
}

function isObject(element) {
  return element.constructor == Object;
}


visit($OBJECT_OR_ARRAY$);

var jDepthLvl=0；
函数访问（对象，objectAccessor=null）{
jDepthLvl++；
if（可访问（对象））{
if（objectAccessor==null）{
console.log（“%c⇓ ⇓ 打印对象$object\u或\u数组$--开始⇓ ⇓", "背景：黄色）；
}否则
log（“%c”+spacesDepth（jDepthLvl）+objectAccessor+“%c:”，“颜色：紫色；字体重量：粗体”，“颜色：黑色”）；
forEachIn（对象、函数（访问器、子对象）{
探访（儿童、探访者）；
});
}否则{
var值=对象；
console.log（“%c”
+空间深度（jDepthLvl）
+objectAccessor+“[%c”+值+%c]”
，“颜色：蓝色”，“颜色：红色”，“颜色：蓝色”）；
}
if（objectAccessor==null）{
console.log（“%c⇑ ⇑ 打印对象$object\u或\u数组$--结束⇑ ⇑", "背景：黄色）；
}
jDepthLvl--；
}
函数空间深度（jDepthLvl）{
设jSpc=“”；
for（让jIter=0；jIterYou需要for.。在可能的重复中，如果可能的话，您应该更改您的结构以使用有序列表。使用带递增索引的命名键没有什么意义。
{“dialog”：{“trunks”：[{“message”：“…}，{“message”：”…}，{“message”：“…}]}
如果是JSON，你解析过它吗？@dcp你太有用了，谢谢。也许下次我会尝试包括，我找不到与我自己的结构足够相似的东西，我无法找到正确的方法来处理。这几天不得不明确说明这一点，真是遗憾。
for..in
在ECMAScript 1.0规范中。甚至InternetExplorer5也支持它….（来源：）这做得很好！非常好！如何将键作为字符串添加到值前面，如：key:value？