如何通过For循环批量创建多个变量以精简代码？

嘿，我懂你想通过循环精简重复代码的需求，咱们来看看你代码里的问题，以及怎么解决～

首先，你写的var par[loopCounter] = ...是语法错误——var声明变量时，后面必须跟一个合法的变量名，不能直接用方括号的形式来动态命名变量。这也是你代码跑不起来的核心原因。

接下来给你两种可行的方案，优先推荐第一种，因为更符合JS的最佳实践：

方案1：用数组存储（推荐） #

批量创建的元素用数组管理是最方便的，不管是后续遍历、修改还是维护都省事：

// 初始化一个空数组
const paragraphs = [];
for (let loopCounter = 1; loopCounter <= 10; loopCounter++) {
  // 把创建的p元素推进数组
  paragraphs.push(document.createElement("p"));
}

// 访问方式：paragraphs[0]对应原来的par01，paragraphs[9]对应par10
// 如果习惯从1开始索引，也可以这样写：
const paragraphs = [];
for (let loopCounter = 1; loopCounter <= 10; loopCounter++) {
  paragraphs[loopCounter] = document.createElement("p");
}
// 此时paragraphs[1]就是par01，paragraphs[10]就是par10

方案2：动态创建全局变量（不推荐，但满足你的需求） #

如果你一定要创建par01、par02这样的独立变量，可以利用浏览器环境中全局变量属于window对象属性的特性，动态给window添加属性：

for (let loopCounter = 1; loopCounter <= 10; loopCounter++) {
  // 把数字格式化为两位，比如1变成"01"，保证变量名和你原来的一致
  const varName = `par${loopCounter.toString().padStart(2, '0')}`;
  // 动态给window添加属性，相当于创建全局变量
  window[varName] = document.createElement("p");
}
// 之后你就能直接用par01、par02...par10这些变量了

小提醒 #

尽量用方案1的数组方式，因为独立变量不利于后续的批量操作（比如给所有p元素加类名、绑定事件），而数组可以直接循环处理，代码会更简洁易维护。

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