3

我想知道是否有更有效的方法来循环数组。出于我的目的，该数组包含图像源。当显示最后一张图像并按下下一个按钮时，它会回到第一张图像。如果在第一个图像上按下前一个按钮，它会循环到最后一个图像。

这是我能够想出的，但我觉得有一种更有效的方法来解决它。

var marker = 0;

// Circle through an array.
function moveMarker(array, action, direction) {
    if (!direction) {
        if(marker == array.length - 1)
            marker = -1;
        marker += 1;
        action();
    }

    else {
        if (marker == 0)
            marker = array.length;
        marker -=1;
        action();
    }
}
4

3 回答 3

10

是的，您可以使用%模运算符：

var marker = 0;

// Circle through an array.
function moveMarker(array, action, direction) {
    if (!direction) {
        marker = (marker + 1) % array.length;
    }
    else {
        marker = (marker + array.length - 1) % array.length;
    }
    action();
}

甚至：

var marker = 0;

// Circle through an array.
function moveMarker(array, action, direction) {
    marker = (marker + array.length + (direction ? -1 : 1)) % array.length;
    action();
}
于 2013-03-10T10:41:38.033 回答
1

首先，您可以使用数学简化 if/else，并使用模数删除边界检查。

var marker = 0;

// Circle through an array.
function moveMarker(array, action, direction) {
    var increment = direction ? 1 : -1;
    marker = Math.modulo(marker + increment, array.length);        
    action();
}

但是，我建议将标记合并到对象中，而不是使用全局变量：

function markerMover(array, action, direction) {
    var marker = 0;
    function next() {
        var increment = direction ? 1 : -1;
        marker = Math.modulo(marker + increment);        
        action();
    }
}
var mover = new markerMover(someArray, someAction, someDirection);
mover.next()
// or even
var intervalHandle = setInterval(mover.next, 25);
于 2013-03-10T10:49:12.677 回答
0

预先声明一个局部变量来处理数组的最后一个位置，然后使用三元运算符来确定应该如何处理marker. 三元运算符基本上允许您在执行操作时在同一行上执行条件。之后，您应该只需要一次调用action().

function moveMarker(array, action, direction) {
    var a = array.length - 1;

    if (!direction) {
        marker += (marker === a) ? -(a) : 1;
    } else {
        marker += (marker === 0) ? (a) : -1;
    }

    action();
};

额外提示：您可能还想考虑将这些函数（即moveMarker()和action()）作为方法放入单个对象中，这样您就不会声明和更改像marker. 但是在不知道您的其余代码的情况下，我不知道这种方法是否适合您。

于 2013-03-10T10:49:14.790 回答