如何用循环优化重复创建List实例的JavaScript代码？

这种重复创建实例的代码确实看着闹心，维护起来也麻烦，给你几个实用的优化方案，根据你的实际需求选就行：

1. 数组存储+循环创建（最通用方案） #

如果后续只需要批量调用实例方法，不需要单独通过list1这类名称访问，用数组存储是最简洁的方式：

// 定义需要创建的实例总数，比如你原来的8个
const totalLists = 8;
// 用数组统一存储所有List实例
const lists = [];

// 循环创建实例并加入数组
for (let i = 1; i <= totalLists; i++) {
  lists.push(new List(`list${i}`, options));
}

之后按键触发方法时，直接遍历数组批量调用就行：

// 示例按键事件处理函数
function onKeyPressed() {
  lists.forEach(list => {
    // 替换成你实际要调用的方法名，比如list.update()
    list.yourMethodName();
  });
}

2. 对象存储+循环创建（支持按名称访问） #

如果之后需要单独调用某个特定实例（比如只触发list3的方法），可以用对象来存储，通过键名快速定位：

const lists = {};
const totalLists = 8;

for (let i = 1; i <= totalLists; i++) {
  const listKey = `list${i}`;
  lists[listKey] = new List(listKey, options);
}

调用方法时的两种方式：

// 方式1：批量调用所有实例的方法
Object.values(lists).forEach(list => list.yourMethodName());

// 方式2：单独调用指定实例的方法
lists.list3.yourMethodName();

3. 按键与实例绑定（如果按键对应特定实例） #

要是你的按键操作是和实例一一对应的（比如按数字1触发list1的方法，按2触发list2），可以在事件里直接关联：

const lists = {};
const totalLists = 8;

// 先创建所有实例
for (let i = 1; i <= totalLists; i++) {
  const listKey = `list${i}`;
  lists[listKey] = new List(listKey, options);
}

// 绑定全局按键事件
document.addEventListener('keydown', (e) => {
  const keyNumber = parseInt(e.key);
  // 判断按键是否在实例范围内
  if (keyNumber >= 1 && keyNumber <= totalLists) {
    lists[`list${keyNumber}`].yourMethodName();
  }
});

这样不管你要创建10个还是100个实例，只需要修改totalLists的值就行，完全避免重复代码～

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