JavaScript 使用 window 对象动态创建变量

问题背景与核心思路

在处理批量数据或配置项时，开发者可能需要根据数组中的名称动态创建对应的全局变量。由于 JavaScript 不允许直接使用变量来声明普通局部变量（如 let var_name = value），我们需要借助全局对象 window 来实现这一需求。同时，若要将动态创建的变量值提取出来存入新对象，可以使用 eval() 解析字符串表达式。

准备条件与代码结构

我们需要两个关键元素：

• 目标变量名数组：定义需要创建变量的名称列表。
• 目标赋值内容：可以是字符串、数字或对象。

操作步骤

第1步：利用 window 对象动态创建全局变量

通过将字符串作为属性名附加到 window 对象上，即可在全局作用域中创建同名变量。这是实现动态变量命名的核心机制。

// 定义需要生成的变量名
let need_arr = ['a1', 'b1', 'c1', 'd2', 'e2'];

for (let i = 0; i < need_arr.length - 1; i++) {
  let need_name = need_arr[i]; // 获取变量名，例如 'a1'
  // 通过 window[need_name] 语法动态赋值
  window[need_name] = '赋值参数，也可以是对象' + i;
}

// 验证变量已创建
console.log(a1);
console.log(b1);

结果说明：

上述代码执行后，a1、b1 等变量将在全局范围内生效。打印输出将依次显示对应的赋值内容。

图1：窗口对象全局变量定义的注意事项示意

图2：动态变量创建的内存表现

第2步：使用 eval() 读取动态变量并存入对象

如果后续需要将上述动态创建的变量值提取出来，放入一个新的对象结构中以供复用，可以使用 eval() 函数将字符串解析为可执行的代码片段。

let need_arr = ['a1', 'b1', 'c1', 'd2', 'e2'];
let have_arr = {};

for (let i = 0; i < need_arr.length - 1; i++) {
  let need_name = need_arr[i];
  
  // 构造字符串表达式并执行
  // eval("(a1)") 会返回 a1 变量的实际值
  let need_obj = eval("(" + need_name + ")");
  
  // 将变量值赋给新对象的对应键
  have_arr[need_name] = need_obj;
}

console.log(have_arr);

结果说明：

此时 have_arr 对象中将包含以变量名为键、以动态值为值的键值对。

图3：eval 解析后的对象结构展示

第3步：处理复杂数据类型的差异对比

当变量值为对象或数组时，直接取值和使用其属性会有不同表现。若需测试动态变量的长度或内部结构，可对 need_obj 进一步操作。

例如，将 have_arr[need_name] 的赋改为：

have_arr[need_name] = need_obj.length;

这将只保留值的长度属性。以下图片展示了该逻辑运行后的具体输出效果：

图4：针对动态变量取长度的打印结果对比

总结与安全提示

通过 window 对象和 eval() 的组合，可以灵活地在运行时动态生成变量并进行读写。这种方法非常适合构建插件系统或高度可配置的应用层参数注入。

注意：在生产环境中谨慎使用 eval()，因为它存在潜在的安全风险（如注入攻击）。对于简单的变量映射，也可以考虑直接用 window[need_name] 进行双向读写，避免解析开销。

以上就是 JavaScript 处理变量命名的参数对象的详细内容，更多关于 JavaScript 动态创建变量的资料请关注本站其它相关文章！