如何实现为歌手分配多首歌曲并以数组形式存储键值对？

你的需求是让每个歌手对应多首歌曲的数组，同时能检查歌手是否已分配过歌曲，下面是修改后的实现：

核心修改点 #

• 将 songSingerList 中歌手对应的 value 从单个字符串改为数组
• 调整添加逻辑：判断歌手是否已存在，不存在则初始化数组，存在则向数组追加歌曲（可额外添加重复歌曲校验）
• 保留原有的非空校验和按钮判断逻辑

修改后的完整代码 #

JavaScript 部分 #

const form = document.querySelector('form');
const songSpecialSinger = document.querySelector('#song-special-singer');
const songSpecialSong = document.querySelector('#song-special-song');
const songSingerList = {};

form.addEventListener('click', (e) => {
  const target = e.target;
  const selectedSinger = songSpecialSinger.value;
  const inputSong = songSpecialSong.value.trim();

  // 校验按钮类型和歌曲输入非空
  if (target.nodeName === 'BUTTON' && target.type === 'button' && inputSong) {
    // 检查歌手是否已在列表中
    if (songSingerList.hasOwnProperty(selectedSinger)) {
      // 可选：检查当前歌曲是否已存在，避免重复添加
      if (songSingerList[selectedSinger].includes(inputSong)) {
        console.log(`歌手 ${selectedSinger} 已分配过这首歌：${inputSong}`);
        songSpecialSong.value = '';
        return;
      }
      // 已有歌手，追加歌曲到数组
      songSingerList[selectedSinger].push(inputSong);
      console.log(`已为歌手 ${selectedSinger} 添加新歌曲`);
    } else {
      // 新歌手，初始化数组并存入第一首歌
      songSingerList[selectedSinger] = [inputSong];
      console.log(`已为新歌手 ${selectedSinger} 分配歌曲`);
    }

    console.log('当前歌手-歌曲列表：', songSingerList);
    songSpecialSong.value = '';
  }
})

HTML 部分（无需修改） #

<form>
  <div>
    <label>Song Special:</label>
    <select name="Song-special" id="song-special-singer"></select>
    <input type="text" placeholder="Song" id="song-special-song">
    <button class="add-song" type="button">add song</button>
  </div>

  <div class="button-container">
    <button type="submit">generate post</button>
  </div>
</form>

关键逻辑说明 #

1. 歌手存在性检查：用 hasOwnProperty 判断歌手是否已在 songSingerList 中
2. 数组化存储：新歌手直接赋值为包含当前歌曲的数组，已有歌手则用 push 追加
3. 可选重复校验：用 includes 检查歌曲是否已在歌手的数组中，避免重复添加
4. 输入处理：用 trim() 去除歌曲输入的首尾空格，避免空字符串或无效输入

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