遍历数组时如何动态生成指定name与id的变量并绑定DOM元素

问题原因 #

JavaScript 不支持在静态变量声明语句中使用模板字面量作为标识符，你写的const ${color}Button = ...属于语法错误，无法被解析执行。

解决方案 #

方案1：挂载到全局对象实现直接调用（符合你的预期效果）

浏览器环境下可以把生成的变量挂载到window全局对象上，后续可以直接用yellowButton、greenButton等名称访问对应的DOM节点：

const colors = ['yellow', 'green', 'brown', 'blue', 'pink','black']
for (let color of colors){
    window[`${color}Button`] = document.querySelector(`#${color}`); 
}

方案2：用对象统一管理（更推荐）

全局变量容易产生命名冲突，更建议把所有生成的DOM节点存储在单独的对象中，调用时通过对象属性访问即可：

const colors = ['yellow', 'green', 'brown', 'blue', 'pink','black']
// 统一存储按钮的对象
const colorButtons = {}
for (let color of colors){
    colorButtons[`${color}Button`] = document.querySelector(`#${color}`); 
}

// 调用示例
console.log(colorButtons.yellowButton) // 对应id为yellow的DOM节点

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