如何一次性声明多个document.getElementById变量？求简洁高效实现方法

嘿，这个问题太接地气了——谁愿意重复写一堆只有编号不一样的变量啊！我给你几个更高效的方案，包括你提到的解构赋值，看完你肯定会觉得爽多了~

方案1：解构赋值（直接满足你的需求） #

既然你提到了解构赋值，那这绝对是最适合当前场景的写法之一。我们先通过querySelectorAll一次性选中所有目标元素，然后直接解构到对应的变量里，一行代码搞定：

const [availableTile1, availableTile2, availableTile3, availableTile4, availableTile5, availableTile6] = document.querySelectorAll('#c1, #c2, #c3, #c4, #c5, #c6');

⚠️ 注意：querySelectorAll返回的NodeList是可迭代的，所以能直接解构。只要你传入的选择器顺序和变量顺序对应，这个方法既简洁又直观。

方案2：数组存储（更适合扩展场景） #

如果后续可能要新增更多类似的元素（比如c7、c8...），用数组管理会更灵活，不用每次都加新变量：

// 生成包含所有元素的数组
const availableTiles = Array.from({ length: 6 }, (_, index) => document.getElementById(`c${index + 1}`));

// 之后访问方式：availableTiles[0]对应c1，availableTiles[1]对应c2，以此类推

要是你还是想要单独的命名变量，也可以结合数组生成和解构：

const availableTiles = Array.from({ length: 6 }, (_, index) => document.getElementById(`c${index + 1}`));
const [availableTile1, availableTile2, availableTile3, availableTile4, availableTile5, availableTile6] = availableTiles;

这种方式兼顾了命名变量的可读性和数组的扩展性。

方案3：循环批量生成属性（按需选用） #

如果是在某个对象里批量存储这些元素（而不是全局变量），可以用循环动态生成属性：

const tileStore = {};
for (let i = 1; i <= 6; i++) {
  tileStore[`availableTile${i}`] = document.getElementById(`c${i}`);
}

// 访问方式：tileStore.availableTile1

这个方法适合需要动态管理命名属性的场景，但不推荐直接在全局作用域这么做，容易造成变量污染。

总结 #

• 要是变量数量固定、需要单独命名，优先用解构赋值；
• 要是后续可能扩展元素数量，优先用数组存储；
• 循环生成属性只适合特定的对象存储场景。

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