为何JavaScript轮播组件中要使用slides.length-1而非slides.length？

核心原因很简单：JavaScript里数组/类数组对象的索引是从0开始计数的，具体到你的代码里：

1. 关于slides的本质

   • slides = document.querySelectorAll('.slide')返回的是一个类数组对象，它的length属性是页面中.slide元素的总个数。比如页面里有3个推荐语卡片，slides.length就是3。
   • 但访问这些卡片时，第一个卡片的索引是slides[0]，第二个是slides[1]，第三个（最后一个）是slides[2]——也就是slides[slides.length-1]（3-1=2）。

2. 为什么不能用slides.length？

   • 如果直接用slides.length作为索引，比如上面的例子里用slides[3]，这个位置根本没有对应的元素，会返回undefined。之后执行slides[index].style.display = 'flex'时，就会因为undefined没有style属性而报错，轮播直接失效。

3. 结合你的代码逻辑看

   • 在nextSlide函数里：index++后，如果判断index > slides.length-1，就意味着索引已经超出了最后一个元素的位置，这时候把index重置为0，就能从第一个卡片重新开始轮播。如果换成index > slides.length，那当index等于slides.length时才会重置，这时候访问slides[index]已经出错了。
   • 在prevSlide函数里：index--后如果小于0，说明已经到了第一个卡片的前面，这时候把index设为slides.length-1，就能直接跳转到最后一个卡片，实现循环效果。

举个直观的例子：
假设页面有4个.slide元素：

• slides.length = 4
• 合法索引范围是0、1、2、3
• slides.length-1 = 3，刚好是最后一个元素的合法索引
• 如果用slides.length = 4作为索引，slides[4]不存在，直接报错

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