JavaScript 交换功能有 3 个项目 - 可逆

Question

我的数组中有三种颜色。最初，我被要求创建一个函数，该函数只需要第一个函数并将其附加到末尾或执行相反的操作，因此我创建了这个函数:

// Get our colours
var colours = scope.colours;

// Create our function
scope.swap = function (opposite) {

    // If we want to go in the opposite direction
    if (opposite) {

        // Shift the array in reverse
        colours.unshift(colours.pop());

    // Else
    } else {

        // Shift the array
        colours.push(colours.shift());
    }
};

这工作得很好。现在我的客户要求我做一些更复杂的事情，我只是想看看是否有一种简单的方法可以做到这一点。

他们给了我一张类似这样的 table :

<小时/>

| C1 | C2 | C3 |

| C2 | C1 | C3 |

| C1 | C3 | C2 |

| C2 | C3 | C1 |

所以基本上，

• C3 只能位于位置 2 和 3
• C2 和 C1 可以位于任意位置

在我开始胡闹之前，有人知道这样做的简单方法吗？

可能的解决方案

所以，写完这篇文章后，我决定无论如何都要尝试一下。我想出了这个:

// Get our colours
var colours = scope.colours;

// Create our variables
counter = 2;

// Create our function
scope.swap = function (opposite) {

    switch (counter) {
        case 3:

            // Get our colours
            var colour2 = colours.shift();
            var colour3 = colours.shift();

            // Rearange them
            colours.splice(1, 0, colour2);
            colours.splice(2, 0, colour3);

            // Exit the switch
            break;

        case 1:

            // Get our colours
            var colour2 = colours.shift();
            var colour1 = colours.shift();

            // Rearange them
            colours.splice(0, 0, colour1);
            colours.splice(2, 0, colour2);

            // Exit the switch
            break;
        case 0:

            // Get our colours
            var colour1 = colours.shift();
            var colour3 = colours.shift();

            // Rearange them
            colours.splice(1, 0, colour3);
            colours.splice(2, 0, colour1);

            // Exit the switch
            break;
        default:

            // Remove and store our first array value
            var colour1 = colours.shift();

            // Add the colour into the array in the second position
            colours.splice(1, 0, colour1);

            // Exit the switch
            break;
    }

    // Decrease
    counter--;

    // If our counter is less than 0
    if (counter < 0) {

        // Reset the counter
        counter = 3;
    }
};

因为永远不会有超过 3 种颜色，所以我只是在 switch 语句中构建并使用 shift() 来重新排列我的数组。现在这很好，但是如果我想朝另一个方向发展怎么办？即，我不想减少计数器，而是希望能够增加它(并在大于 3 时重置为 0)。

Answer 1

如果有四种排列，只需对它们进行硬编码。无需详细阐述一些复杂的逻辑，当您的客户改变想法时，这些逻辑可能会再次改变。

var C1 = '#ff0000',
    C2 = '#00ff00',
    C3 = '#0000ff',
    permutations = [
        [C1, C2, C3],
        [C2, C1, C3],
        [C1, C3, C2],
        [C2, C3, C1]
    ],
    currentPermutationIndex = 0;

function swap() {
    currentPermutationIndex = (currentPermutationIndex + 1) % 4;
}

function backSwap() {
    // the following doesn't work, see edit
    currentPermutationIndex = (currentPermutationIndex - 1) % 4;
}

使用示例:http://jsfiddle.net/acasaccia/qy56x8o0/

[编辑]:不幸的是，JavaScript 中缺乏适当的 mod 运算符来处理负数，这使得 backSwap 的解决方案不太简洁:我们需要实现一个 >mod polyfill 直到他们实现 this建议，并使用它代替 %:

Number.prototype.mod = function(n) {
    return (((this)%n)+n)%n;
}

function swap() {
    currentPermutationIndex = (currentPermutationIndex + 1).mod(4);
}

function backSwap() {
    currentPermutationIndex = (currentPermutationIndex - 1).mod(4);
}