Chrome扩展开发：遍历对象检测值0注入DOM重复问题排查

让我们一步步拆解你代码里的问题：

1. forEach回调的参数顺序完全搞反了 #

Object.keys().forEach()的回调函数参数顺序是(当前键名, 索引位置)，而不是你写的(key, value)。你这里的value变量实际上是遍历的索引值（比如TestB对应的索引是1），并不是对象里的真实值——虽然这不会直接导致重复，但会让你的日志和DOM文本显示错误。

正确的做法是通过window.gaData["UA-123"].experiments[key]获取值，或者改用Object.entries()直接同时拿到键和值，代码更直观。

2. DOM更新逻辑重复叠加 #

这是导致重复显示的核心问题：

• 你在forEach循环里，每次找到符合条件的键值对，就把result赋值给容器的innerHTML；
• 之后如果dataLayer.ABTest存在，你又用insertAdjacentHTML('beforeend', result)把已经包含TestB内容的result再次追加到容器里。

相当于先把TestB的内容写进容器，然后又把整个result（包含TestB）再插一遍，自然就出现了重复。

修正后的完整代码 #

我帮你优化了逻辑，解决了重复问题，同时让代码更严谨：

var actualCode = '(' + function() {
  var dataLayer = window.dataLayer;
  console.log('WINDOW', window);
  
  // 把实验内容和ABTest内容分开存储，避免叠加重复
  let experimentsHtml = '';
  
  // 用Object.entries直接获取键和值，避免参数混淆
  Object.entries(window.gaData["UA-123"].experiments).forEach(function([key, value]) {
    // 用严格相等判断字符串"0"，避免隐式转换踩坑
    if (value === "0") {
      console.log(`${key}: ${value}`);
      experimentsHtml += ` <div> <p value="${key}">${key}: Test: ${key} is set to value: ${value}</p> </div> `
    }
  });

  const container = document.getElementById('container');
  // 先注入实验结果，只操作一次DOM
  if (experimentsHtml) {
    container.innerHTML = experimentsHtml;
  }

  // 处理ABTest内容，单独追加，不影响之前的实验内容
  if (dataLayer?.ABTest?.test) {
    console.log(dataLayer.ABTest.test);
    const abTestHtml = ` <div class="container"> 
        <p>Date Launched: ${dataLayer.animal.test.date}</p> 
        <p>Test ID: ${dataLayer.animal.test.id}</p> 
        <p>Test Description: ${dataLayer.animal.test.name}</p> 
        <p>Variant Active: ${dataLayer.animal.test.variant}</p> 
        <button id="${dataLayer.animal.test.id}">Switch variant</button> 
      </div> `;
    
    container.insertAdjacentHTML('beforeend', abTestHtml);
    
    document.getElementById(dataLayer.animal.test.id).addEventListener('click', function() {
      console.log('clicked!')
      // Delete旧Cookie
      window.document.cookie = '_gaexp=COOKIE-1; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.abc.co.uk';
      // Add新Cookie
      window.document.cookie = '_gaexp=COOKIE-2; expires=Fri, 19 Jun 2020 20:47:11 UTC; path=/; domain=.abc.co.uk';
      window.location.reload();
    });
  }
} + ')();';

额外优化点说明 #

• 用Object.entries()替代Object.keys()，直接解构出键和值，代码更清晰；
• 将实验内容和ABTest内容分开存储，彻底避免重复叠加；
• 把DOM操作移到循环结束后，减少不必要的DOM重绘；
• 使用严格相等=== "0"判断，避免字符串与数字的隐式转换问题；
• 用可选链dataLayer?.ABTest?.test简化嵌套判断，代码更简洁安全。

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