带有子数组循环Javascript的数组

Posted 2023-02-22

【中文标题】带有子数组循环Javascript的数组

【英文标题】：Array with subarray loop 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 中可以循环遍历嵌套数组，但是，互联网上充斥着这样的例子，我怀疑你找不到好的例子

【参考方案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))
)