如何通过上一页/下一页按钮遍历多维数组（附一维实现代码）

下面提供两种可行的实现方案，适配不同的需求场景：

方案1：先扁平化多维数组 #

如果不需要保留原多维结构的展示逻辑，最简单的方式是把多维数组转成一维数组，直接复用你原来的一维遍历逻辑。

实现代码 #

// 示例多维数组
var sav = [
    ["第一行第一项", "第一行第二项"],
    ["第二行第一项", "第二行第二项"],
    ["第三行第一项"]
];

// 将任意层级的多维数组扁平化
var flatSav = sav.flat(Infinity);

var box = document.getElementById('box');
var i = -1;

function next() {
    i = i >= flatSav.length - 1 ? 0 : i + 1;
    box.innerHTML = flatSav[i];
}

function prev() {
    i = i > 0 ? i - 1 : flatSav.length - 1;
    box.innerHTML = flatSav[i];
}

<a href="#" onclick="prev()">上一页</a>
<div id="box"></div>
<a href="#" onclick="next()">下一页</a>

flat(Infinity) 可以自动拆解任意嵌套层级的数组，把所有元素平铺成一维结构，后续逻辑和你原有的一维数组实现完全一致。

方案2：保留多维结构的双索引遍历 #

如果需要保留原多维数组的结构（比如要展示元素所在的行/列位置），可以用双索引（行索引 rowIndex、列索引 colIndex）来精准控制遍历顺序。

实现代码 #

// 示例多维数组
var sav = [
    ["第一行第一项", "第一行第二项"],
    ["第二行第一项", "第二行第二项"],
    ["第三行第一项"]
];

var box = document.getElementById('box');
var rowIndex = 0;
var colIndex = -1;

function next() {
    colIndex++;
    // 当前列超出当前行长度时，切换到下一行第一列
    if (colIndex >= sav[rowIndex].length) {
        rowIndex++;
        colIndex = 0;
        // 行索引超出数组长度时，回到第一行
        if (rowIndex >= sav.length) {
            rowIndex = 0;
        }
    }
    box.innerHTML = sav[rowIndex][colIndex];
}

function prev() {
    colIndex--;
    // 当前列小于0时，切换到上一行最后一列
    if (colIndex < 0) {
        rowIndex--;
        // 行索引小于0时，回到最后一行
        if (rowIndex < 0) {
            rowIndex = sav.length - 1;
        }
        colIndex = sav[rowIndex].length - 1;
    }
    box.innerHTML = sav[rowIndex][colIndex];
}

<a href="#" onclick="prev()">上一页</a>
<div id="box"></div>
<a href="#" onclick="next()">下一页</a>

这种方式会按顺序遍历每个子数组的元素（比如第一行第一项→第一行第二项→第二行第一项→...→第一行第一项循环），若需要展示行/列信息，可修改box.innerHTML为类似当前：第${rowIndex+1}行第${colIndex+1}项 - ${sav[rowIndex][colIndex]}的格式。

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