使用forEach通过索引获取下一个元素时出现Uncaught TypeError错误

错误原因很明确：当forEach循环执行到最后一个元素时，index + 1会超出timeslot集合的长度，此时timeslot[index + 1]返回undefined，调用getBoundingClientRect()自然会抛出类型错误。

给你两种修复方案：

方案一：提前终止最后一个元素的循环 #

直接在循环内判断当前元素是否为最后一个，如果是则跳过后续操作：

var timeslot = document.getElementsByClassName('uk-card');
console.log(timeslot[3]);

Array.from(timeslot).forEach(function(element, index) {
  // 最后一个元素没有下一个元素，直接跳过
  if (index === timeslot.length - 1) return;
 
  var rect = element.getBoundingClientRect();
  var next = timeslot[index + 1];
  var rectNext = next.getBoundingClientRect();
  console.log(rect.top, rect.right, rect.bottom, rect.left);
  console.log(rectNext.top, rectNext.right, rectNext.bottom, rectNext.left);
});

方案二：先判断下一个元素是否存在 #

在调用getBoundingClientRect()之前，先检查next是否为有效元素：

var timeslot = document.getElementsByClassName('uk-card');
console.log(timeslot[3]);

Array.from(timeslot).forEach(function(element, index) {
 
  var rect = element.getBoundingClientRect();
  var next = timeslot[index + 1];
  
  // 只有当下一个元素存在时，才执行后续的坐标获取和打印操作
  if (next) {
    var rectNext = next.getBoundingClientRect();
    console.log(rect.top, rect.right, rect.bottom, rect.left);
    console.log(rectNext.top, rectNext.right, rectNext.bottom, rectNext.left);
  }
});

两种方案都能解决报错问题，考虑到你需要绘制元素间的连接线，最后一个元素没有后续元素可连接，所以不需要处理，选哪种都可以。

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