在for循环调用removeLayer()时出现Cannot read properties of undefined(reading 'off')错误

问题场景 #

直接调用layerControl.removeLayer(yearLayers['1877'])时代码运行正常，但注释该行并启用for循环执行移除操作时，出现以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'off')
    at i.removeLayer (Control.Layers.js:142:9)
    at whatever:x:y

原代码如下：

var streets = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

var yearLayers = {};
yearLayers['1877'] = L.tileLayer('https://terrafrost.sfo2.digitaloceanspaces.com/maps/austin/v2/1877/{z}/{x}/{y}.png');
  
var map = L.map('map', {
    center: [30.267222, -97.743056],
    zoom: 13,
    layers: [streets]
});

layerControl = L.control.layers().addTo(map);
layerControl.addBaseLayer(streets, 'Streets');
layerControl.addOverlay(yearLayers['1877'], '1877');

// layerControl.removeLayer(yearLayers['1877']);

var years = ['1877'];
for (var i = 0; i < years; i++) {
    year = years[i];
    layerControl.removeLayer(yearLayers[year]);
}

错误原因 #

循环条件写错了：i < years中的years是数组，JavaScript会将其隐式转换为数字（数组转字符串为"1877"，再转数字为1877），导致循环会从i=0一直执行到i=1876。当i >= 1时，years[i]超出数组索引范围，值为undefined，此时yearLayers[year]就是yearLayers[undefined]，结果为undefined。而Leaflet的removeLayer方法要求传入有效的图层对象，传入undefined会导致内部代码尝试读取off属性时抛出类型错误。

修复方案 #

将循环条件改为i < years.length，确保循环只遍历数组中存在的元素：

var years = ['1877'];
for (var i = 0; i < years.length; i++) {
    var year = years[i]; // 用var声明year避免全局变量污染
    layerControl.removeLayer(yearLayers[year]);
}

也可以使用更简洁的forEach遍历数组，避免索引错误：

var years = ['1877'];
years.forEach(function(year) {
    layerControl.removeLayer(yearLayers[year]);
});

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