javascript - 循环二维关联数组的最有效方法？

Question

我有一个二维关联数组，其中包含需要在 html5 Canvas 中绘制的 block 图。

目前完成它大约需要 28 毫秒，这太多了(我每秒运行代码 60 次)，我需要以某种方式更有效地运行矩阵。这是我的代码:

for(var x=0; x<Object.keys(matrix).length; x++){ // Run through cols
    col = Object.keys(matrix)[x];
    for(var y=0; y<matrix[col].length; y++){ // Run though rows
        row = Object.keys(matrix[col])[y];
        if(matrix[col][row] != '0'){
            drawRect(col,row,blockSize,blockSize);
            }
        }
    }

我希望它效率低下并且可以纠正一些问题。如何最有效地循环 2D 数组的总和？

Answer 1

您必须使用双 for 循环来循环整个二维数组。与尝试加速任何存在性能问题的代码一样，第一步是找出花费最多时间的内容，并首先针对问题的该元素进行优化。

可能的猜测是，drawRect 花费的时间比循环中的任何问题都多，但如果您想加快代码的其余部分，可以执行以下操作:

1. 缓存Object.keys(matrix)，这样就不会不断地重新计算
2. 缓存每个 for 循环的停止值，这样就不会每次循环都重新计算
3. 缓存列键，这样每次通过内循环就不会重新计算
4. 缓存矩阵列

该代码如下所示:

var keys = Object.keys(matrix);
for(var x = 0, lenX = keys.length; x < lenX; x++) { // Run through cols
    col = keys[x];
    var colKeys = Object.keys(matrix[col]);
    var matrixCol = matrix[col];
    for(var y = 0, lenY = matrix[col].length; y < lenY; y++) { // Run though rows
        row = colKeys[y];
        matrixCol[row] != '0'){
            drawRect(col,row,blockSize,blockSize);
        }
    }
}