如何在JavaScript循环中创建带唯一变量名的动态音频对象

我想通过程序化方式在JavaScript中创建4个不同的音频对象，之前看过《如何在循环内创建动态变量名？》这类讨论帖，里面有用this关键字的方案，但不确定怎么在循环里用它。我自己尝试的代码如下：

var buttonColours = ["red", "blue", "green", "yellow"]
var sounds = [];
for (var i=0; i < buttonColours.length; i++) {
 sounds[i] = new Audio(`sounds/${buttonColours[i]}.mp3`); // 示例：音频文件名 - 'blue.mp3'
}
console.log(sounds);

当前控制台输出是[audio, audio, audio, audio]，但我期望能得到类似[redSound, blueSound, greenSound, yellowSound]这样的结果，每个元素对应不同的音效对象。

首先得说清楚：你当前的代码其实已经创建了4个完全不同的Audio对象！控制台显示[audio, audio, audio, audio]只是因为它把每个Audio实例简化显示成了类型名称，你可以通过打印每个元素的src属性来验证：

for (let sound of sounds) {
  console.log(sound.src);
}

执行这段代码就能看到每个对象对应的不同音频文件路径，证明它们确实是独立的实例。

如果你确实想要像redSound、blueSound这样有明确名称的引用，更推荐用对象来存储，比动态创建全局变量更规范，代码也更易维护：

var buttonColours = ["red", "blue", "green", "yellow"];
var soundMap = {};

for (var i = 0; i < buttonColours.length; i++) {
  const colour = buttonColours[i];
  // 构建类似redSound的键名
  const soundKey = `${colour}Sound`;
  soundMap[soundKey] = new Audio(`sounds/${colour}.mp3`);
}

// 之后你可以这样访问指定音频：
soundMap.redSound.play();
soundMap.blueSound.play();

console.log(soundMap);
// 控制台会输出 {redSound: Audio, blueSound: Audio, greenSound: Audio, yellowSound: Audio}

如果非要创建全局变量（不推荐，容易污染全局作用域），可以在浏览器环境下借助window对象：

var buttonColours = ["red", "blue", "green", "yellow"];

for (var i = 0; i < buttonColours.length; i++) {
  const colour = buttonColours[i];
  const soundKey = `${colour}Sound`;
  window[soundKey] = new Audio(`sounds/${colour}.mp3`);
}

// 直接访问全局变量
redSound.play();
blueSound.play();

总结一下，用对象存储的方式是最佳实践，既保留了清晰的命名，又不会污染全局作用域，也方便后续统一管理这些音频对象。

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