JavaScript使用变量为classList添加类名时循环中断仅创建单元素问题

这个反常现象和for循环本身的逻辑没有关系，本质是代码执行过程中触发了未捕获的DOM API异常，直接中断了整个同步执行流程，看起来像是循环中途停掉了而已。
对照你观察到的所有运行现象，可以精准锁定异常触发点就是planet.classList.add(environnement.name)这行代码，常见的触发原因和你看到的行为完全匹配：

核心触发场景 #

• 对象字段拼写错误，导致传给classList.add的参数不合法
  你数组里第三个匹配planet类型的对象（对应earth），很大概率在实际编写时拼错了name字段（比如把name写成了nam、nme），导致environnement.name实际取值是undefined。
  调用classList.add(undefined)时，DOM API会直接抛出InvalidCharacterError类型的校验异常，代码立刻停止执行，根本走不到后续的按钮创建、DOM插入步骤，这和你观察到的现象完全吻合：
  1. 第一次循环到saturn时，name字段取值正常，按钮能正常创建，类名也正确生效
  2. 第二次循环到moon时，type不匹配，直接跳过判断
  3. 第三次循环到earth时，因为name属性取不到值变成undefined，触发classList的校验异常，循环直接中断，看不到第二个按钮
  4. 删掉classList.add那行代码之后，不会再把非法值传给DOM API，后续的按钮创建、插入逻辑可以正常跑完，就能生成两个按钮
  5. 把参数换成硬编码的合法字符串时，完全绕开了变量取值错误的问题，功能自然可以正常运行
• 变量值包含CSS类名不允许的特殊字符
  classList.add()对传入的类名有严格的格式要求：只要字符串里包含空格、制表符、换行符、肉眼不可见的零宽空格，就会直接抛出异常。如果environnement.name是从接口、文件、外部页面复制粘贴来的，携带了这类隐藏字符，也会触发同样的中断效果。

快速排查方案 #

• 打开浏览器开发者工具的Console面板重新运行代码，第一时间就能看到红色的未捕获异常提示，不需要靠现象猜测根因
• 在classList.add(environnement.name)前加一句调试代码：console.log('当前传入的类名：', JSON.stringify(environnement.name))，就能直观看到实际传入的参数是不是合法的非空字符串，排查undefined、隐藏字符的问题
• 实际开发中可以给类名参数加兜底校验，避免非法值直接触发异常，示例代码：

const customClassName = environnement.name;
// 仅当参数是不含空白字符的非空字符串时，才添加类
if (typeof customClassName === 'string' && customClassName.trim() && !/\s/.test(customClassName)) {
  planet.classList.add(customClassName.trim());
}

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