如何使用原生JavaScript根据复选框选中状态动态调整目标数组

问题原因 #

你的代码存在两个核心问题：

• 使用join()将选中的data-id字符串拼接为了单个逗号分隔字符串，调用concat时只会将整个字符串作为唯一元素插入数组，无法拿到对应的真实数组内容
• 没有建立data-id字符串和对应数组的映射关系，无法通过字符串值匹配到你提前定义好的数组

最优解决方案 #

建议将所有预定义数组存入映射对象中，通过data-id的值直接匹配对应数组，再用flatMap合并结果，安全且易维护：

// 建立id和数组的映射关系
const groupMap = {
  friends_: ["friend1", "friend2"],
  enemies_: ["enemy1", "enemy2"],
  strangers_: ["stranger1", "stranger2"]
};

const checkboxes = document.querySelectorAll("input[type=checkbox]");
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    // 获取所有选中的id，匹配对应数组后扁平化合并
    const finalArray = Array.from(checkboxes)
      .filter(item => item.checked)
      .map(item => item.dataset.id)
      .flatMap(id => groupMap[id]);
    console.log(finalArray);
  })
})

如果你不想修改原有单独声明数组的写法，且这些数组是全局作用域下声明的，也可以通过window[变量名]获取对应数组，但该写法作用域依赖强，不推荐：

const friends_ = ["friend1", "friend2"];
const enemies_ = ["enemy1", "enemy2"];
const strangers_ = ["stranger1", "stranger2"];

const checkboxes = document.querySelectorAll("input[type=checkbox]");
checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', () => {
    const finalArray = Array.from(checkboxes)
      .filter(item => item.checked)
      .map(item => item.dataset.id)
      .flatMap(id => window[id]);
    console.log(finalArray);
  })
})

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