JavaScript数组连续元素处理的替代循环方案及代码报错问询

1. 在JavaScript中，是否存在类似for循环的其他方案来处理数组中的连续两个元素？
2. 点击button时控制台出现「Uncaught TypeError: Cannot read properties of undefined (reading 'innerHTML')」错误，错误定位在if语句的第一行，请问使用for循环、forEach函数或其他方式能否实现代码中if语句定义的文本显示和边框样式效果？

一、处理数组连续两个元素的替代方案 #

当然有，以下是几种常用方法：

• forEach遍历：控制索引只到倒数第二个元素，每次取当前元素和下一个元素
• for...of循环：配合数组索引，限制循环范围避免越界
• reduce方法：适合需要累积处理结果的场景
• map方法：如果要生成包含连续元素处理结果的新数组可以用

示例：forEach处理连续元素 #

const arr = ["Crimson", "Scarlet", "Red"];
arr.forEach((current, index) => {
  // 只处理到倒数第二个元素
  if (index >= arr.length - 1) return;
  const next = arr[index + 1];
  console.log(`当前元素：${current}，下一个元素：${next}`);
});

二、错误分析与功能实现 #

错误原因 #

1. 数组越界：rlps数组长度是4，原循环条件a < rlps.length会让a取到3，此时rlps[a+1]等于rlps[4]，是undefined，访问它的innerHTML就会触发报错，循环条件应改为a < rlps.length - 1。
2. 语法错误：第三个if判断里的rlps[a + 1}.innerHTML写错了符号，把.写成了}，正确写法是rlps[a + 1].innerHTML。
3. 元素获取错误：getElementsByTagName('button')返回的是HTMLCollection集合，不是单个按钮，直接绑定事件会报错，要改成btn[0]取第一个按钮。

1. 修复后的for循环实现 #

const relationships = document.getElementById('relationships');
const frames = document.getElementById('frames');
const reds = document.getElementById('reds');
const time = document.getElementById('time');
const day = document.getElementById('day');
const month = document.getElementById('month');
const yr = document.getElementById('yr');
const underFrames = document.getElementById('underFrames');
const underRlps = document.getElementById('underRlps');
const btn = document.getElementsByTagName('button')[0]; // 取第一个按钮

const rlps = [time, day, month, yr];

window.onload = (event) => {
  frames.style.display = "none";
  underFrames.style.display = "none";
  relationships.style.display = "none";
  underRlps.style.display = "none";
};

btn.addEventListener("click", function show() {
  frames.style.display = "table-row";
  underFrames.style.display = "table-row";
  relationships.style.display = "table-row";
  underRlps.style.display = "table-row";

  // 循环到倒数第二个元素，避免数组越界
  for (let a = 0; a < rlps.length - 1; a++) {
    const currentText = rlps[a].innerHTML;
    const nextText = rlps[a + 1].innerHTML;
    
    if (currentText === "Crimson" && nextText === "Scarlet") {
      const cell = frames.cells[a];
      cell.style.borderLeft = "1px inset black";
      cell.style.borderRight = "1px inset black";
      cell.style.borderTop = "1px inset black";
      relationships.cells[a].innerHTML += "Good";
    } else if (currentText === "Scarlet" && nextText === "Red") {
      const cell = frames.cells[a];
      cell.style.borderLeft = "1px inset black";
      cell.style.borderRight = "1px inset black";
      cell.style.borderTop = "1px inset black";
      relationships.cells[a].innerHTML += "Bad";
    } else if (currentText === "Red" && nextText === "Crimson") {
      const cell = underFrames.cells[a];
      cell.style.borderLeft = "1px inset black";
      cell.style.borderRight = "1px inset black";
      cell.style.borderBottom = "1px inset black";
      underRlps.cells[a].innerHTML += "Good";
    }
  }
});

2. 使用forEach函数实现 #

// 元素获取和window.onload代码同上

btn.addEventListener("click", function show() {
  frames.style.display = "table-row";
  underFrames.style.display = "table-row";
  relationships.style.display = "table-row";
  underRlps.style.display = "table-row";

  rlps.forEach((currentEl, index) => {
    // 跳过最后一个元素，避免访问undefined
    if (index >= rlps.length - 1) return;
    
    const nextEl = rlps[index + 1];
    const currentText = currentEl.innerHTML;
    const nextText = nextEl.innerHTML;
    
    if (currentText === "Crimson" && nextText === "Scarlet") {
      const cell = frames.cells[index];
      cell.style.borderLeft = "1px inset black";
      cell.style.borderRight = "1px inset black";
      cell.style.borderTop = "1px inset black";
      relationships.cells[index].innerHTML += "Good";
    } else if (currentText === "Scarlet" && nextText === "Red") {
      const cell = frames.cells[index];
      cell.style.borderLeft = "1px inset black";
      cell.style.borderRight = "1px inset black";
      cell.style.borderTop = "1px inset black";
      relationships.cells[index].innerHTML += "Bad";
    } else if (currentText === "Red" && nextText === "Crimson") {
      const cell = underFrames.cells[index];
      cell.style.borderLeft = "1px inset black";
      cell.style.borderRight = "1px inset black";
      cell.style.borderBottom = "1px inset black";
      underRlps.cells[index].innerHTML += "Good";
    }
  });
});

优化建议 #

把重复的边框样式提取成CSS类，减少JS里的冗余代码：

.top-inset-border {
  border-left: 1px inset black;
  border-right: 1px inset black;
  border-top: 1px inset black;
}
.bottom-inset-border {
  border-left: 1px inset black;
  border-right: 1px inset black;
  border-bottom: 1px inset black;
}

然后在JS里用cell.classList.add('top-inset-border')替代多个style设置，代码更简洁易维护。

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