Javascript 遍历对象及其属性的数组列表

通过一个对象及其所有属性循环，然后移动到另一个对象等的最佳方法是什么

目前，我的代码只在lvlTitle中循环。然而，我想在lvltle中循环，然后转到statement1、statement2和statement3，然后转到下一个对象

多谢各位

下面是javascript：

// Different Levels
var lvls = {
  start: {
    lvlTitle: 'Lets Start!',
  },
  lvl1: {
    lvlTitle: 'Drinks/Soda/water',
    statement1: 'lvl1 info...',
    statement2: 'lvl1 more info...',
    statement3: 'lvl1 more more info...'
  },
  lvl2: {
    lvlTitle: 'Portion Control/Meals',
    statement1: 'lvl2 info...',
    statement2: 'lvl2 more info...',
    statement3: 'lvl2 more more info...'
  },
  lvl3: {
    lvlTitle: 'Salt',
    statement1: 'lvl3 info...',
    statement2: 'lvl3 more info...',
    statement3: 'lvl3 more more info...'
  }
}

// Array of all the levels
var allLvls = [];

// Populate users array
for (var key in lvls) {
  allLvls.push(lvls[key]);
}

console.log(allLvls[0].lvlTitle);


let myIndex = 1;
let printText = document.querySelector('.text-container');

printText.innerHTML = allLvls[0].lvlTitle;


function nextLevel() {
  printText.innerHTML = allLvls[myIndex].lvlTitle;
  myIndex = (myIndex + 1) % (allLvls.length);
};


printText.addEventListener('click', nextLevel);

以下是Html：

<div class="full-page">
<div class="click-container">
  <ul class="text-container">
    <li class="text-content">
      <div></div>
    </li>
  </ul>
</div>

这里还有一个JSFIDLE：

对于这种特殊情况的迭代，您可以使用

生成器是一种新的语言特性（ES6），它使您能够定义自定义迭代行为，允许您优雅地迭代定制的数据结构、数据集等

在ES6中，

*

符号用于表示函数是生成器，

yield

关键字定义生成器函数如何/何时将值返回到生成的迭代序列

根据您的要求，可以按如下方式定义和使用生成器：

/* Define your iterator as follows. Notice the *, which denotes this 
   function as a generator 
*/
function *iterateData(lvlsData) {

    // Iterate the values of your input data, ie the objects with 
    // `lvlTitle` keys
    for (const node of Object.values(lvlsData)) {

        // Iterate the values of the that you want your application 
        // to iterate through sequentially
        for(var value of Object.values(node)) {

           // The yield keyword means "return this value" to the 
           // external iteration
           yield value
        }

    }
  }

var htmlList = '<ul>'

// Use the generator like so, to produce the following output based on 
// your data:
for(var str of iterateData(lvls)) {

    htmlList += '<li>' + str + '</li>'
}

htmlList += '</ul>'

let d = document.getElementById('list')
d.innerHTML = htmlList;

/*如下定义迭代器。注意*，它表示这一点
发电机的作用
*/
函数*迭代数据（lvlsData）{
//迭代输入数据的值，即使用
//'lvlTitle'键
for（Object.values的const节点（lvlsData））{
//迭代应用程序所需的值
//按顺序迭代
for（对象的var值。值（节点））{
//yield关键字表示“将此值返回”到
//外部迭代
收益率
}
}
}
var htmlist='
'
//像这样使用生成器，根据
//您的数据：
对于（迭代数据的var str（lvls））{
htmlist+='
'+str+'
'
}
htmlList+='
'
设d=document.getElementById（'list'））
d、 innerHTML=htmlist；

对于这种特殊情况的迭代，您可以使用

生成器是一种新的语言特性（ES6），它使您能够定义自定义迭代行为，允许您优雅地迭代定制的数据结构、数据集等

在ES6中，

*

符号用于表示函数是生成器，

yield

关键字定义生成器函数如何/何时将值返回到生成的迭代序列

根据您的要求，可以按如下方式定义和使用生成器：

/* Define your iterator as follows. Notice the *, which denotes this 
   function as a generator 
*/
function *iterateData(lvlsData) {

    // Iterate the values of your input data, ie the objects with 
    // `lvlTitle` keys
    for (const node of Object.values(lvlsData)) {

        // Iterate the values of the that you want your application 
        // to iterate through sequentially
        for(var value of Object.values(node)) {

           // The yield keyword means "return this value" to the 
           // external iteration
           yield value
        }

    }
  }

var htmlList = '<ul>'

// Use the generator like so, to produce the following output based on 
// your data:
for(var str of iterateData(lvls)) {

    htmlList += '<li>' + str + '</li>'
}

htmlList += '</ul>'

let d = document.getElementById('list')
d.innerHTML = htmlList;

/*如下定义迭代器。注意*，它表示这一点
发电机的作用
*/
函数*迭代数据（lvlsData）{
//迭代输入数据的值，即使用
//'lvlTitle'键
for（Object.values的const节点（lvlsData））{
//迭代应用程序所需的值
//按顺序迭代
for（对象的var值。值（节点））{
//yield关键字表示“将此值返回”到
//外部迭代
收益率
}
}
}
var htmlist='
'
//像这样使用生成器，根据
//您的数据：
对于（迭代数据的var str（lvls））{
htmlist+='
'+str+'
'
}
htmlList+='
'
设d=document.getElementById（'list'））
d、 innerHTML=htmlist；

您可以创建递归函数。它将创建一个对象并创建一个列表（或任何您想要使用的html结构）。在该函数中，查看每个属性，它是一个对象，将该对象传递回函数，如果它不处理它。这将适用于嵌套在任意深度的对象，并且是一项很好的技术：

//不同的级别
var lvls={start:{lvlTitle:'让我们开始吧！'，}，lvl1:{lvlTitle:'饮料/苏打水'，statement1:'lvl1信息…'，statement2:'lvl1更多信息…'，statement3:'lvl1更多信息…'，lvl2:'部分控制/膳食'，statement1:'lvl2信息…'，statement3:'lvl2更多信息…'，lvl3:{lvltite:'Salt'，statement1:'lvl3 info…'，statement2:'lvl3 more info…'，statement3:'lvl3 more info…'}
功能printProps（obj）{
让html=“
”
Object.keys（obj.forEach）（key=>{
html+='
'+key+'
'
let next=（对象的类型[key]='object'？printProps（对象[key]）：对象[key]）
html+='
'+next+'
'
})
html+=“
”
返回html
}
设d=document.getElementById（'list'））
d、 innerHTML=printProps（lvls）

---

您可以创建一个递归函数。它将创建一个对象并生成一个列表（或您想要使用的任何html结构）。在该函数中，查看每个属性，它是一个对象，如果没有处理它，它将该对象传递回函数。这将适用于嵌套在任意深度的对象，并且是一个很好的技巧：

//不同的级别
var lvls={start:{lvlTitle:'让我们开始吧！'，}，lvl1:{lvlTitle:'饮料/苏打水'，statement1:'lvl1信息…'，statement2:'lvl1更多信息…'，statement3:'lvl1更多信息…'，lvl2:'部分控制/膳食'，statement1:'lvl2信息…'，statement3:'lvl2更多信息…'，lvl3:{lvltite:'Salt'，statement1:'lvl3 info…'，statement2:'lvl3 more info…'，statement3:'lvl3 more info…'}
功能printProps（obj）{
让html=“
”
Object.keys（obj.forEach）（key=>{
html+='
'+key+'
'
let next=（对象的类型[key]='object'？printProps（对象[key]）：对象[key]）
html+='
'+next+'
'
})
html+=“
”
返回html
}
设d=document.getElementById（'list'））
d、 innerHTML=printProps（lvls）

基于和，我提供了一个递归生成器函数，用于迭代对象的嵌套val