实现冒泡排序可视化时，for循环触发undefined错误的原因排查

1. 触发报错的代码直接卡死了执行流，根本轮不到跑后面的数组对比逻辑 #

JS是逐行按顺序执行的，j=2的时候，代码走到这行：
const barB = arrayBars[j + 1].style;

你的arrayBars是和长度3的排序数组绑定的DOM集合，一共就3个.bar元素，索引为0、1、2。读arrayBars[3]拿到的就是undefined，紧接着要读这个undefined身上的style属性，直接就抛出你看到的类型错误——整个函数在这一步就终止运行了，后面的设置条目标红、进入判断对比数组大小、交换元素的代码，根本没有机会执行，你当然看不到数组访问那行的运行表现。

2. 就算绕开DOM报错、真跑到了数组对比的那行，读取越界数组索引本身也不会触发报错 #

这是很多人对JS数组行为的常见认知误区：

• JS数组是动态稀疏结构，读取超出当前长度的索引时不会做强制拦截，只会静默返回undefined。比如长度为3的数组，访问array[3]的结果就是undefined，这一步本身不会产生任何报错。
• 当你拿到这个返回的undefined值做大小比较运算时，JS会自动做隐式类型转换，两个undefined值做大小判断时会直接返回false，整个比较过程也不会抛出错误。

你可以直接在控制台运行这段验证代码，全程不会出现任何报错：

const arr = [1,2,3];
console.log(arr[3] > arr[4]); // 输出 false，无任何报错

3. 当前实现的额外逻辑问题 #

除了报错本身，这版代码还有几个需要修正的点：

• 内层循环边界设置错误：冒泡排序的标准内层循环终止条件应该是j < len - i - 1，否则不仅会重复对比已经排好序的尾部元素，还会必然出现j走到最后一个有效索引时，访问j+1越界值的问题。你现在写的j < len，在j=2（长度为3的数组的最后一个有效下标）时，本来就要访问不存在的下一个元素。
• DOM查询位置冗余：把document.getElementsByClassName('bar')塞在内层循环里反复执行DOM查询，属于不必要的性能损耗，完全可以把DOM集合的查询逻辑提到两层循环外面，只获取一次元素集合即可。
• 可视化逻辑缺失：现在的代码没有做异步暂停处理，所有DOM高亮操作会和排序逻辑同步执行完，用户根本看不到临时标红的过程，完全失去可视化展示的意义。

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