Javascript 无法映射具有重复值的对象

Question

我需要使用给定对象通过 id 设置特定元素的样式。

const projectSkillsMap = {
  'project1': ['skill_2', 'skill4', 'skill5'],
  'project2': ['skill1', 'skill_2', 'skill4', 'skill5', 'skill6'],
  'project3': ['skill1', 'skill_2', 'skill3', 'skill4', 'skill5', 'skill6']
}

function chooseProject(key) {
  // adding accet to chosen group
  Object.keys(projectSkillsMap).map((i) => {
    if (i == key) {
      Object.entries(projectSkillsMap).map((il, value) => {
        if (il == i) {
          document.getElementById(value).classList.toggle('button_click')
        }
      })
    }
  })

  // removing accents from other groups
  Object.keys(projectSkillsMap).map((i) => {
    if (i !== key) {
      projectSkillsMap[`${i}`].map((el) => document.getElementById(`${el}`).classList.remove('button_click'))
    }
  })

  Object.values(projectSkillsMap).map((el) => {
    if (el !== key) {
      document.getElementById(el).classList.remove('button_click')
    }
  })
}

当用户单击按钮时，使用对象键之一触发

chooseProject()

功能。问题是

document.getElementById(value).classList.toggle('button_click')

不起作用，因为我的对象中有重复的值。

我意识到，当我更改对象并为每个键仅保留唯一值时，代码将按预期工作。

有什么方法可以让它处理重复的值吗？

Answer 1

Guy Incognito 在评论中提供的解决方案。 看小提琴：jsfiddle.net/0k3zLjxb

总结一下：最初的目标是从所有按钮中删除该类，然后将其添加到对象中的按钮中。不需要通过对象方法迭代对象键或值，简单的 forEach() 就可以了。

function chooseProject(key) {
document.querySelectorAll(".skill_button").forEach(button => button.classList.remove('button_click'));
projectSkillsMap[key].forEach(value => document.getElementById(value).classList.add('button_click'));

}