如何不使用eval()从字符串数组创建JavaScript变量

你遇到的问题本质是动态创建变量时错误使用了独立作用域的函数：new Function()创建的函数有自己的局部作用域，里面定义的let变量无法在外部访问——哪怕你没看到layerHomes报错，它其实也没在你预期的作用域里存在，只是你没用到它而已。

正确的做法是用对象集中管理这些图层，既避免作用域污染，又能灵活动态创建和访问：

实现代码 #

// 1. 创建一个对象存储所有图层
const layers = {};
const array = ['Homes', 'Businesses', 'Parks'];

array.forEach((name) => {
    // 2. 动态给对象添加属性，存储图层实例
    layers[`layer${name}`] = L.layerGroup().addTo(map);
    layers[`layer${name}Polylines`] = L.layerGroup().addTo(map);
});

访问图层 #

后续可通过对象属性直接访问对应的图层：

// 直接访问
layers.layerHomes.addLayer(yourHomeMarker);
layers.layerHomesPolylines.addLayer(yourHomePolyline);

// 动态场景下方括号语法
const targetType = 'Homes';
layers[`layer${targetType}`].remove();

为什么这比eval/Function更合适？ #

• 作用域可控：所有图层集中在layers对象中，不会污染全局或局部作用域，避免变量名冲突
• 安全可靠：规避eval()带来的代码注入风险，也解决了Function()的作用域隔离问题
• 易于维护：统一管理所有图层，后续修改、遍历或销毁操作更便捷

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