JavaScript中如何基于另一数组的遍历状态切换目标数组索引

核心逻辑为每次点击下一步按钮时，除了自增index2，同时校验当前子数组是否已遍历完成，触发时自动切换index1并重置index2适配新的子数组。

基础变量定义 #

const array1 = ['alex','joe','simon','sarah']
let index1 = 0
// 注意需保证array2的长度和array1一致，避免索引越界
const array2 = [ [1,2,3,4,5,6,7],[1,2,3], [1,2], [4,5,6] ]
let index2 = 0

下一步按钮点击事件逻辑 #

function handleNextClick() {
  // 遍历完所有内容后终止操作，可配合该条件禁用下一步按钮
  if (index1 >= array1.length) return

  index2 += 1
  // 判断当前子数组是否已到末尾，第一个子数组长度为7，index2=6时加1后等于7，刚好触发条件
  if (index2 >= array2[index1].length) {
    index1 += 1
    // 切换到下一个子数组后重置index2，所有内容遍历完成则无需重置
    if (index1 < array1.length) {
      index2 = 0
    }
  }

  // 此处可添加你的视图更新逻辑，读取array1[index1]、array2[index1][index2]渲染页面即可
}

边界处理说明 #

• 若array1和array2长度无法保证一致，可在逻辑中增加if (!array2[index1])的判断，避免读取undefined的length属性报错
• 若需要循环遍历所有内容，可在index1 >= array1.length时将index1和index2都重置为0即可实现循环效果

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