JS多维数组创建问题：消除空值并添加价格子数组

一、解决数组空值问题 #

你当前代码出现大量空值的核心原因是用数组（Array）存储trener_id对应的服务集合。数组的键是连续数字索引，当trener_id是类似13这样的数字时，JavaScript会自动填充0到12的空槽，导致数组出现大量undefined。

解决方法是改用**普通对象（Object）**存储，对象支持任意非连续的键名，不会产生空值。

二、添加价格子结构 #

可以为每个选中的服务添加价格信息，只需在遍历复选框时，从当前复选框所在的表格行中提取对应价格输入框的值即可。

修改后的完整JavaScript代码 #

var trener_services;

$('body').on('change', '.service_check', function() {
  // 初始化对象而非数组，避免空值
  trener_services = {};     
  
  $('.service_check:checked').each(function(){
    var $checkbox = $(this);
    var sid = $checkbox.val();
    var trener_id = $checkbox.data('trener'); // 用data()获取data-*属性更可靠
    
    // 如果当前trener_id还没有对应的服务集合，先初始化一个空对象
    if(!trener_services[trener_id]){
      trener_services[trener_id] = {};
    }
    
    // 获取当前行的价格输入框
    var $row = $checkbox.closest('tr');
    var priceCustomer = $row.find('.client_price').val();
    var priceTrener = $row.find('[class^="bonus_price_"]').val();
    
    // 为当前服务ID添加价格信息
    trener_services[trener_id][sid] = {
      'Price_customer': priceCustomer,
      'Price_trener': priceTrener
    };
  });
  
  // 输出格式化后的结果到控制台查看
  console.log(JSON.stringify(trener_services, null, 2));
});

代码关键点说明 #

1. 改用对象存储：trener_services = {}替代new Array()，彻底避免空槽问题。
2. 更可靠的属性获取：用$checkbox.data('trener')替代attr('data-trener')，jQuery的data方法会自动转换数据类型，兼容性更强。
3. 精准定位价格元素：通过closest('tr')定位当前复选框所在的表格行，再用find()找到该行内的价格输入框，确保获取的是当前服务对应的价格。
4. 结构匹配PHP示例：每个trener_id对应一个对象，键是服务ID，值是包含两个价格字段的子对象，完全匹配你给出的PHP数组结构。

最终输出结构示例 #

当选中服务47和45时，控制台输出的结构如下：

{
  "13": {
    "47": {
      "Price_customer": "10.00",
      "Price_trener": "5.00"
    },
    "45": {
      "Price_customer": "60.00",
      "Price_trener": "10.00"
    }
  }
}

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