JavaScript按data-att属性值分组收集元素ID的问题

你的问题在于每次赋值时直接覆盖了原有数据，而且初始值是对象而非数组，导致push方法报错。以下是修正后的代码：

修正后的JavaScript代码 #

const elements = document.querySelectorAll('[data-att]');
let obj = {};

elements.forEach(element => {
  const attValues = element.getAttribute('data-att').split(',');
  const id = element.id;
  
  attValues.forEach(singleValue => {
    // 先检查该属性值是否已存在，不存在则初始化空数组
    if (!obj[singleValue]) {
      obj[singleValue] = [];
    }
    // 将当前元素ID推入对应数组
    obj[singleValue].push(id);
  });
});

console.log(obj);

代码说明 #

• 统一用split(',')处理属性值，不管有没有逗号，避免多余的判断逻辑
• 每次处理单个属性值时，先判断obj中是否已有该键：
  • 没有则初始化为空数组
  • 有则直接将当前元素ID推入数组
• 这样就能实现同一个属性值对应所有相关元素ID的收集，不会覆盖之前的数据

运行结果 #

执行后控制台会输出符合预期的结构：

{
  "foo": ["due", "uno", "tre", "cinque"],
  "bar": ["tre"],
  "brum": ["quattro", "cinque"]
}

（注：你给出的预期结果里漏了quattro，因为它的data-att是brum，所以正确结果会包含它）

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