javascript - 如何递归地螺旋遍历矩阵 - javascript

Question

请看这个 JSFiddle:https://jsfiddle.net/hc2jcx26/

我正在尝试螺旋遍历矩阵 output(任意大小)，以便它每 2 秒以螺旋顺序将每个元素打印到 console.log:

var output = [[0, 1, 2, 3],
              [4, 5, 6, 7]];            

我期待这样的输出:

0
1 //after 2 seconds delay
2 //after 2 seconds delay
3 //etc.
7
6
5
4

但是我没有通过上面的代码得到这个。输出到处都是，甚至没有正确数量的元素。我在每次迭代后使用递归在我的循环中添加延迟(通过 setTimeout)，但我认为我没有正确设置变量。但是当我查看代码时，这对我来说很有意义。我在这里缺少什么？

Answer 1

这是我解决您的问题的方法。

迭代版本

var matrix1 = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12],
    [13, 14, 15, 16]
], matrix2 = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [10, 11, 12]
], matrix3 = [
    [0, 1, 2, 3],
    [4, 5, 6, 7]
], matrix4 = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

(function (matrix) {
    var i,
        nRows = matrix.length,
        nCols = matrix[0].length,
        rowLimit = nRows - 1,
        colLimit = nCols - 1,
        rounds = 0,
        printedElements = 0,
        nElements = nRows * nCols,
        timeoutLapse = 2000;

    function print(val) {
        printedElements += 1;
        setTimeout(function () {
            console.log(val);
        }, printedElements * timeoutLapse);
    }

    do {
        for (i = rounds; i <= colLimit - rounds; i += 1) {// from left to right
            print(matrix[rounds][i]);
        }

        for (i = rounds + 1; i <= rowLimit - rounds; i += 1) {// from top to bottom
            print(matrix[i][colLimit - rounds]);
        }

        for (i = colLimit - rounds - 1; i >= rounds; i -= 1) {// from right to left
            print(matrix[rowLimit - rounds][i]);
        }

        for (i = rowLimit - rounds - 1; i >= rounds + 1; i -= 1) {// from bottom to top
            print(matrix[i][rounds]);
        }
        rounds += 1;
    } while (printedElements < nElements);

})(matrix4);

这是 fiddle (您必须打开控制台才能看到结果)。

递归版本

var matrix1 = [
    [1, 2, 3, 4],
    [5, 6, 7, 8],
    [9, 10, 11, 12],
    [13, 14, 15, 16]
], matrix2 = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
    [10, 11, 12]
], matrix3 = [
    [0, 1, 2, 3],
    [4, 5, 6, 7]
], matrix4 = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
];

(function(matrix){
    var printedElements = 0,
        timeoutLapse = 1000;

    function print(val) {
        printedElements += 1;
        setTimeout(function () {
            console.log(val);
        }, printedElements * timeoutLapse);
    }

    function printArray(arr) {
        for(var i = 0; i < arr.length; i++) {
            print(arr[i]);
        }
    }

    // Recursive algorithm, consumes the matrix.
    function printMatrix(matrix, direction) {
        var dir = direction % 4,
            rowLimit = matrix.length - 1,
            i;

        if (dir === 0) {// from left to right
            printArray(matrix.shift());
        } else if (dir === 1) {// from top to bottom
            for(i = 0; i <= rowLimit; i++) {
                print(matrix[i].pop());
            }
        } else if (dir === 2) {// from right to left
            printArray(matrix.pop().reverse());
        } else {// from bottom to top
            for(i = rowLimit; i >= 0; i--) {
                print(matrix[i].shift());
            }
        }

        if (matrix.length) {// Guard
            printMatrix(matrix, direction + 1);
        }
    }

    // Initial call.
    printMatrix(matrix, 0);
})(matrix4);

我添加了一些例子来测试它。我只是按照螺旋模式每两秒打印一次矩阵的元素。

如您所见，递归版本虽然完全清空了矩阵，但更具声明性。这是 fiddle