Javascript 在HTML集合中循环的正确方法是什么

我正在尝试制作一个滑块，虽然下面的代码可以计算滑块的宽度，但它在控制台中抛出了一个错误。循环通过这些元素的正确方式和宽度是什么

Javascript

var calcSlideWidth = function(divId){
    let slDiv = document.getElementById(divId);
    let slides = slDiv.getElementsByClassName('slide');
    slDiv.style = "width:"+ 100*slides.length +"%";
    slideWidth = 100/slides.length;
    for (let i = 0; i <= slides.length; i++ ){
        slides[i].style = " width:"+ slideWidth +"%";
        console.log(i);
    }
}   

window.onload  = function(){
   calcSlideWidth("slider");
}

var calcSlideWidth=函数（divId）{
设slDiv=document.getElementById（divId）；
让slides=slDiv.getElementsByClassName（'slide'）；
slDiv.style=“宽度：”+100*slides.length+“%”；
slideWidth=100/张幻灯片长度；
对于（i＝0；i），GETelEntsB**方法返回HTMLCype，这可能是很难处理的。考虑使用QueRealStudioRoad，它返回静态的NODLIST——不像HTMLCype，它可以直接迭代，在迭代时不会改变，而且更灵活。

document.querySelectorAll('.slide').forEach(slide => {
  // do stuff with each slide
  slide.style.width = `${slideWidth}%`;
});

for
循环无法清楚地表示代码的意图，因此应尽可能避免使用循环（首选高阶函数，如.map、.reduce、.filter等）。另请参见：和

（通过
.forEach
，您将永远不会出现一次又一次的错误）

请注意，NodeList.forEach是一些旧浏览器不支持的新ish方法-如果使用此方法，请确保在分发之前正确填充多边形。
错误肯定是在位置
长度处的访问

let i = 0; i <= slides.length
              ^

让i=0；i，当我打开控制台时，错误是？它会说“TypeError:slides[i]未定义”只是对NodeList的一个小小的补充：较旧的Internet Explorer版本在NodeList上不支持
forEach
。请参阅。正如@custi所提到的，您需要使用prototype
Array.prototype.forEach（NodeList，calllback）来解决这个问题
@Ele，具有讽刺意味的是，旧版本的IE也不支持它。@custi你也不能做
[].splice.call（NodeList.forEach（…）
，因为某些版本的IE（我忘了哪个版本）在向内置函数传递主机对象时也会发出这样的声音。：-（@custi这是构建过程应该注意的（Babel、polyfills等）
let i = 0; i <= slides.length
              ^

let i = 0; i < slides.length
             ^