JavaScript向多维数组动态添加值时报items[1]未定义错误

嘿，我来帮你搞定这个报错问题～

问题根源 #

你初始化数组的时候写了 var items = [[]];，这意味着items数组里只有一个空的子数组（索引为0），而items[1]这个位置根本就不存在——它的值是undefined，所以当你尝试调用items[1].push()时，自然会抛出TypeError: items[1] is undefined的错误。

对比你最开始的静态数组：

var items = [ ["red", "blue"], ["green", "yellow"] ];

这里items明确包含了两个子数组，索引0和1都是有效的数组对象，所以访问items[1][1]没问题。但动态初始化时你只创建了第一个子数组，第二个子数组缺失了。

修复方案 #

这里有几种简单的修复方式，你可以根据需求选择：

方案1：提前初始化所有需要的子数组

如果你确定只会有2组复选框，直接在初始化时就创建两个空数组：

var items = [[], []]; // 现在items[0]和items[1]都是有效的空数组

$.each($("input[name='checkboxColors1']:checked"), function(){
    items[0].push($(this).val());
});
$.each($("input[name='checkboxColors2']:checked"), function(){
    items[1].push($(this).val());
});

这样两个push操作都能正常执行，不会再报错。

方案2：动态创建缺失的子数组

如果不确定需要多少组，或者想更灵活，可以在操作前检查并创建对应的子数组：

var items = [[]];

$.each($("input[name='checkboxColors1']:checked"), function(){
    items[0].push($(this).val());
});

// 先检查items[1]是否存在，不存在就创建一个空数组
if (!items[1]) {
  items[1] = [];
}
$.each($("input[name='checkboxColors2']:checked"), function(){
    items[1].push($(this).val());
});

方案3：用循环简化多组逻辑（推荐）

如果后续可能增加更多组复选框（比如checkboxColors3、checkboxColors4），用循环来处理会更简洁，避免重复代码：

var items = [];
// 假设我们有2组复选框，可根据实际数量修改循环次数
for (var i = 1; i <= 2; i++) {
  var currentGroup = [];
  // 动态拼接选择器字符串
  $.each($("input[name='checkboxColors" + i + "']:checked"), function(){
      currentGroup.push($(this).val());
  });
  items.push(currentGroup);
}

这样不管有多少组，只需要调整循环次数就能轻松适配，代码也更易维护。

内容的提问来源于stack exchange，提问作者Trombone0904