全局声明数组后添加值却无法访问，数组始终为空的问题

问题现象 #

全局声明的vehicleTypesArr数组，在loadVehicleTypes函数内循环后看似添加了元素，但函数末尾打印结果为空，调用resetVehicleTypes时也检测不到数组有内容。循环内部的控制台输出能看到符合条件的数据，但最终数组始终没有元素。

原始代码 #

加载车辆类型的函数 #

var vehicleTypesArr = []; // 全局可访问

function loadVehicleTypes(data) {
    if (data != null) {
        var res = data.VehicleTypes;
        if (res != '' && res != null) {
            $.each(res, function () {
                if (res.GroupName === 'ConEnhTyp_Vehicle')
                    vehicleTypesArr.push(this);
                // 此处添加控制台输出能看到符合条件的数据，但实际未推入数组
            });
        }
    }
    console.log(JSON.stringify(vehicleTypesArr)); // 输出为空数组
    resetVehicleTypes();
};

重置车辆类型的函数 #

function resetVehicleTypes() {
  alert("1");
  if (vehicleTypesArr.length > 0) {
  alert("2");
    $.each(vehicleTypesArr, function (val) {
      val.prop('checked', false); 
  });
  alert("1");
  }
  alert("Finished");
}

问题根源 #

1. 循环判断逻辑错误
   在$.each(res, function () {})的回调里，你误用了整个数组res的GroupName属性，而不是当前循环的单个元素。要判断的是每一个循环项的GroupName，应该用this.GroupName，或者给回调添加参数function(index, item)后判断item.GroupName。之前的条件永远不成立，所以根本没有元素被推入数组——你循环内的控制台输出大概率是打印了this而非符合条件的结果，实际并没有完成元素添加。

2. resetVehicleTypes里的$.each用法错误
   jQuery工具函数$.each的回调参数顺序是(索引, 元素值)，你写的function(val)里的val其实是索引，不是数组中的元素。另外，如果vehicleTypesArr存储的是数据对象（而非DOM元素），调用val.prop()会直接报错，因为普通对象没有DOM方法。

修正后的代码 #

修正loadVehicleTypes函数 #

var vehicleTypesArr = []; // 全局可访问

function loadVehicleTypes(data) {
    if (data != null) {
        var res = data.VehicleTypes;
        // 先确认res是数组且有内容，避免遍历非数组的异常情况
        if (res && Array.isArray(res) && res.length > 0) {
            $.each(res, function (index, item) {
                // 用当前循环的单个元素判断GroupName
                if (item.GroupName === 'ConEnhTyp_Vehicle') {
                    vehicleTypesArr.push(item);
                    console.log('已添加元素:', item); // 此处的控制台输出才是有效的
                }
            });
        }
    }
    console.log(JSON.stringify(vehicleTypesArr)); // 现在能正常输出数组内容
    resetVehicleTypes();
};

修正resetVehicleTypes函数 #

如果vehicleTypesArr存储的是DOM元素（比如复选框）：

function resetVehicleTypes() {
    alert("1");
    if (vehicleTypesArr.length > 0) {
        alert("2");
        // 按$.each的正确参数顺序编写回调
        $.each(vehicleTypesArr, function (index, domElement) {
            $(domElement).prop('checked', false);
        });
        alert("已重置所有选项");
    }
    alert("Finished");
}

如果存储的是数据对象，需要根据数据匹配对应的DOM元素（假设数据中有id属性）：

function resetVehicleTypes() {
    alert("1");
    if (vehicleTypesArr.length > 0) {
        alert("2");
        $.each(vehicleTypesArr, function (index, dataItem) {
            // 通过data属性找到对应的复选框并修改状态
            $('input[data-vehicle-id="' + dataItem.id + '"]').prop('checked', false);
        });
        alert("已重置所有选项");
    }
    alert("Finished");
}

关键点提醒 #

• 遍历数组时，务必使用当前循环的单个元素做判断，不要误用整个数组对象。
• 牢记jQuery工具函数$.each的参数顺序，避免把索引当成元素值使用。
• 明确区分数据对象和DOM元素，普通数据对象不能调用prop()这类DOM方法。

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