JavaScript forEach异常跳转至数组最后项及CSS主题切换实现问询

这个问题十有八九是变量作用域或闭包搞的鬼，最常见的场景是你在forEach循环里绑定了异步操作（比如定时器、事件监听），但循环内用了var声明变量——因为var是函数级作用域，所有回调都会共享同一个变量，等异步操作执行时，循环已经跑完，自然只会拿到最后一项的值。

举个典型的错误例子：

const arr = ['item1', 'item2', 'item3'];
arr.forEach(function(item) {
  var currentItem = item; // 所有回调共享这一个变量
  setTimeout(function() {
    console.log(currentItem); // 最后会输出三次'item3'
  }, 100);
});

给你几个靠谱的解决思路：

• 改用let/const声明循环内变量：它们是块级作用域，每次循环都会创建新的变量实例，不会串值

  const arr = ['item1', 'item2', 'item3'];
  arr.forEach(function(item) {
    const currentItem = item;
    setTimeout(function() {
      console.log(currentItem); // 依次输出item1、item2、item3
    }, 100);
  });
  

• 直接用forEach回调的参数：因为forEach的回调每次执行都是独立的函数作用域，参数本身就是局部变量，不会被覆盖

  const arr = ['item1', 'item2', 'item3'];
  arr.forEach(function(item) {
    setTimeout(function() {
      console.log(item); // 正常输出每个数组项
    }, 100);
  });
  

• 如果是绑定DOM事件的场景（比如给多个按钮绑定点击事件），可以用闭包把当前项包裹起来，强制隔离作用域

  const arr = ['item1', 'item2', 'item3'];
  const buttons = document.querySelectorAll('button');
  arr.forEach(function(item, index) {
    buttons[index].addEventListener('click', (function(currentItem) {
      return function() {
        console.log(currentItem); // 点击对应按钮输出对应项
      }
    })(item));
  });
  

如果你的场景不是上面这些，把具体代码贴出来，我能帮你精准定位问题～

要搞定这个需求，分两步走：动态生成主题选项和监听选择变化更新CSS变量，咱们一步步来：

第一步：动态生成option标签 #

先假设你的主题数组是这样的（补全了你没写完的部分）：

const themes = [
  { name: "theme1", primary: "yellow", secondary: "green", color: "red" },
  { name: "theme2", primary: "red", secondary: "blue", color: "white" }
];

首先获取页面上的select元素，然后遍历主题数组，给每个主题创建一个option标签，把主题名作为显示文本和value（方便后续查找对应主题）：

const themeSelect = document.getElementById('theme-select'); // 给你的select加个id，比如theme-select

// 遍历主题生成选项
themes.forEach(theme => {
  const option = document.createElement('option');
  option.value = theme.name; // 用主题名当value，后续好匹配
  option.textContent = theme.name.charAt(0).toUpperCase() + theme.name.slice(1); // 首字母大写，比如Theme1，看起来更友好
  themeSelect.appendChild(option);
});

第二步：监听选择变化，更新CSS变量 #

首先你得在CSS里定义好对应的变量，一般放在:root伪类里，这样全局都能用到：

:root {
  --primary: #fff;
  --secondary: #000;
  --color: #333;
}

/* 然后在页面元素里用这些变量，比如： */
body {
  background-color: var(--primary);
  color: var(--color);
}
.button {
  background-color: var(--secondary);
}

接下来监听select的change事件，当用户切换选项时，找到对应的主题对象，然后更新:root的CSS变量：

themeSelect.addEventListener('change', function() {
  // 根据选中的value找到对应的主题
  const selectedTheme = themes.find(theme => theme.name === this.value);
  
  // 获取根元素（:root对应的就是html元素）
  const root = document.documentElement;
  
  // 逐个更新CSS变量
  root.style.setProperty('--primary', selectedTheme.primary);
  root.style.setProperty('--secondary', selectedTheme.secondary);
  root.style.setProperty('--color', selectedTheme.color);
});

额外优化：默认加载第一个主题 #

如果想页面打开就自动应用第一个主题，可以在页面加载完成后执行一次变量更新：

window.addEventListener('load', function() {
  const defaultTheme = themes[0];
  const root = document.documentElement;
  
  // 设置默认主题的变量
  root.style.setProperty('--primary', defaultTheme.primary);
  root.style.setProperty('--secondary', defaultTheme.secondary);
  root.style.setProperty('--color', defaultTheme.color);
  
  // 让select默认选中第一个选项
  themeSelect.value = defaultTheme.name;
});

这样整个流程就通顺了：页面加载自动生成所有主题选项，默认应用第一个主题，用户切换选项时实时更新页面配色～

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