为何for in循环会隐藏JavaScript添加的最后一个li元素？

核心差异：遍历机制与动态集合的交互 #

1. HTMLCollection的动态特性
   element.children返回的是HTMLCollection，这是一个动态DOM集合——当DOM结构变化时，它会自动更新内容。比如你在遍历过程中添加新的<li>，集合会立即包含这个新元素。

2. for-in与传统for循环的遍历逻辑不同

   • 传统for循环：基于集合初始的length值遍历，比如初始children.length = 3，循环只会处理索引0、1、2的元素，后续添加的新元素（索引3）不会被纳入循环范围，因此不会被误操作。
   • for-in循环：遍历的是对象的所有可枚举属性，包括HTMLCollection的数字索引和内置属性（如length、item）。更关键的是，由于集合是动态的，如果你在for-in循环执行过程中添加新的<li>，新元素的索引会被作为新的可枚举属性加入集合，导致for-in会遍历到这个新索引，进而对刚创建的<li>执行隐藏操作。

3. 循环位置的影响
   当你把for-in循环移到<li>创建代码之后，循环开始时集合已经包含了所有元素，遍历的是固定的索引属性，不会因为后续DOM变化触发额外的遍历操作，因此新元素不会被误隐藏。

额外注意点 #

for-in循环并不适合遍历DOM集合，除了上述动态集合的问题，它还会遍历到非索引的内置属性，容易导致不必要的错误（比如尝试访问数字的style属性引发报错）。遍历DOM集合更推荐使用：

• 传统for循环
• for...of循环（现代浏览器中HTMLCollection支持迭代）
• Array.from(children)转为数组后遍历

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