javascript中带有两个数组的For循环

我是js新手，有这个问题。我有两个数组，希望通过使用for循环来实现这种布局。我不知道如何写这个来实现它。这是我的密码。请帮忙

var html=''；
var选项=[‘饮食’、‘饮料’]；
var option_type=[‘大’、‘中’、‘小’、‘大’、‘中’]；
对于（选项中的var i）{
对于（选项类型中的var j）{
html+=''+选项[i]+'+''+选项类型[j]+'
'；
}
}
html（html）；

您可以使用

来执行以下操作：


var html=''；
var选项=[‘饮食’、‘饮料’]；
var option_type=[“大”、“中”、“小”]；
对于（i=0；i'；//添加选项类型
}
}
$（'body'）.html（html）
选项类型无效且不符合逻辑，请尝试以下方法

var html ='';
var option = {
  'meal': [
    'big',
    'medium',
    'small'
  ],
  'drink': [
    'big',
    'medium'
  ]
};


for (var key in option){
    html += '<div>'+ key + '</div>'
    for ( var j of option[key]){
        html += '<p>'+j+'</p>';
    }
}

.(class).html(html);

var html=''；
var选项={
“膳食”：[
“大”，
“中等”，
“小”
],
“饮料”：[
“大”，
“中等”
]
};
for（变量输入选项）{
html+=''+键+''
对于（选项[key]的var j）{
html+=''+j+'
'；
}
}
html（html）；
这是如何使用嵌套for循环的直接答案。但是如果您想改变每个选项的选项类型，您可能需要使用scetiner建议的对象


var html=''；
var选项=[‘饮食’、‘饮料’]；
var option_type=[“大”、“中”、“小”]；
对于（选项中的var i）{
html+=''+选项[i]+''；
对于（选项类型中的var j）{
html+=''+选项_类型[j]+'
'；
}
html+=''；
}
document.getElementById（'container'）。innerHTML=html
#容器{
}
h1{
}
#容器p{
显示：内联块；
利润率：10px；
边框：1px实心#333；
最小宽度：100px；
填充：10px；
}
对象数据结构更适合表示所需内容（至少基于屏幕截图）

var选项={
膳食：[“大”、“中”、“小”]，
饮料：[‘大’、‘中’]
}
var html=Object.keys（options）.reduce（（全部，选项）=>{
var headerMarkup=`${option}`；
var itemsMarkup=options[option].map（item=>`${item}
`）.join（“”）；
返回`${all}${headerMarkup}${itemsMarkup}`；
}, '');
您可以执行以下操作：


var html=''；
var选项=[
[“正餐”、“大餐”、“中餐”、“小餐”]，
[‘饮料’、‘大’、‘中等’]
];
对于（变量i=0；i
#容器跨度{
显示：内联块；
右边距：10px；
边框：1px实心#333；
填充：10px；
}
下面是一个完整的示例：

关键是：

for (var i in parent){
//parent code
    for ( var j in child){
      //parent and child code 
    }    
  //parent code  
} 

每个家长将迭代每个孩子。
您可以将此概念用于javascript数组。为什么没有小饮料？仅举一个例子，如果不同的选项中有不同的选项类型“类似这样的东西”是什么？我只是在数组中创建两个数组。谢谢。这就是我想要的。真的帮了我很多忙。
var options = {
    meal: ['big', 'medium', 'small'],
    drink: ['big', 'medium']
}

var html = Object.keys(options).reduce((all, option) => {

    var headerMarkup = `<div>${option}</div>`;
    var itemsMarkup = options[option].map(item => `<p>${item}</p>`).join('');

    return `${all}${headerMarkup}${itemsMarkup}`;

}, '');

for (var i in parent){
//parent code
    for ( var j in child){
      //parent and child code 
    }    
  //parent code  
}