带有子数组循环Javascript的数组答案

【问题标题】：Array with subarray loop Javascript带有子数组循环Javascript的数组
【发布时间】：2022-01-23 23:52:55
【问题描述】：

是否可以像下面这样在 JavaScript 中创建一个数组并循环遍历它？

<?php
$options = array(
    'color' => array('blue', 'yellow', 'white'), 
    'size' => array('39', '40', '41'),
);

foreach($options as $option => $values){
    echo $option.'<br>';
    foreach($values as $value){
        echo $value.' ';
    }
    echo '<br>';
}
?>

我查了互联网，但找不到一个很好的例子。

感谢您的帮助！

【问题讨论】：

哼...这是php，不是JS
是的，在 JS 中可以循环遍历嵌套数组，但是，互联网上充斥着这样的例子，我怀疑你找不到好的例子

标签： javascript arrays loops

【解决方案1】：

没错

let options = {
    color: ['blue', 'yellow', 'white'],
    size: [39, 40, 41]
};

您有三种方法可以做到这一点：

为

for (option in options) {
    console.log(option);
    var values = options[option];
    for (let i = 0, len = values.length, value = values[i]; i < len; value = values[++i]) {
        console.log(value);
    }
}

ARRAY FOREACH

for (option in options) {
    console.log(option);
    options[option].forEach(value => {
        console.log(value);
    });
}

最简单的方法： jQuery

$.each(options, (option, values) => {
    console.log(option);
    $.each(values, (key, value) => {
        console.log(value);
    });
});

【讨论】：

【解决方案2】：

如果我理解正确，您想要一个与您提供的 php 代码等效的 javascript？

如果是这样，可以通过以下方式实现：

let options = {
    color: ['blue', 'yellow', 'white'],
    size: [39, 40, 41]
};

for(option of Object.keys(options)) {
    console.log(option);
    
    for(value of options[option]) {
        console.log(value);
    }
}

这与您的 php 代码不完全相同，但循环的工作方式相似。

【讨论】：

【解决方案3】：

javascript 中的数组具有整数键（索引）。您可以根据需要使用对象在父级别存储字符串键，并且值可以是数组，因为它们没有任何字符串键

const options = {
  color: ['blue', 'yellow', 'white'],
  size: ['39', '40', '41'],
}

Object.entries(options).forEach(([key, value]) => {
  console.log(key)
  value.forEach(el => console.log(el))
})

【讨论】：