这两个操作比你想象的要多：

dots[i].className = dots[i].className.replace("active", "");
// and...
dots[slideIndex - 1].className += "active";

通过更改className（* 和 *）的整个文本，以一种您可能无意的方式更改它，请注意结果中缺少空格字符。..），您实际上修改了live HTML collection的结果：

let dots = document.getElementsByClassName('dot');

这意味着集合的 length 发生了变化。您可以通过将一些调试信息记录到控制台来观察这一点：

console.log('dots length: ', dots.length);
dots[slideIndex - 1].className += "active";

不直接替换className属性，而是使用the classList API：

dots[i].classList.remove("active");
// and...
dots[slideIndex - 1].classList.add("active");

这将允许其余的类不受影响，从而不会影响您正在迭代的HTMLCollection对象。

这里是你的解决方案，当添加一个新的类作为字符串使用时，确保在dots[slideIndex - 1].className += " active";中用空格分隔它们。另外，您没有检查slideIndex是否小于1，我在showSlides(n)函数中添加了此条件。
给你的代码一个建议：

• 当用户到达幻灯片的结尾时，通常最好让他停留在最后一张幻灯片上，而不是让他返回到第一张幻灯片，这样他就知道他到达了结尾，并且除非在观察到他有相同的图像重复之后，否则不要在不知道他到达了结尾的情况下继续滚动。这就是我编辑这行代码的原因

if (n > slides.length) {
    slideIndex = n -1;
  }

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName('mySlides');
  let dots = document.getElementsByClassName('dot');
  if (n > slides.length) {
    slideIndex = n -1;
  }
  if (n < 1) {
    slideIndex = 1
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace("active", "");
  }
  console.log("SlideIndex", slideIndex)

  slides[slideIndex - 1].style.display = "block";
  dots[slideIndex - 1].className += " active";


}

<div class="slideshow-container">
  <div class="mySlides fade">
    <img src="./images/insidelook1.jpeg" style="width: 100%">

  </div>
  <div class="mySlides fade">
    <img src="./images/insidelook2.jpeg" style="width: 100%">
  </div>

  <div class="mySlides fade">
    <img src="./images/insidelook4.jpeg" style="width: 100%">
  </div>
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<div style="text-align:center">
  <span class="dot" onclick="currentSlide(1)"></span>
  <span class="dot" onclick="currentSlide(2)"></span>
  <span class="dot" onclick="currentSlide(3)"></span>
</div>