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());
    }
};

这很好用。 现在我的客户要求我提供更复杂的东西，我只是想看看是否有一种简单的方法可以做到这一点。

他们给了我一张有点像这样的表：

| 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;
    }
};

因为我只是在switch语句中构建了多于3种颜色，并使用 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/

[编辑]：不幸的是，缺少一个合适的mod运算符来处理Javascript中的负数会使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);
}

Answer 2

我写了以下功能。我想这可能会对你有所帮助。这适用于您的客户的任何组合：

功能定义

function calculatePosition(colorArr, element, fixedPositionArr) {
    var result = [], usedElement = [];
    var permutationArr = (function recursive() {
        for (var i = 0; i < colorArr.length; i++) {
            var ch = colorArr.splice(i, 1)[0];
            usedElement.push(ch);
            if (colorArr.length == 0) {
                result.push(usedElement.slice());
            }
            recursive();
            colorArr.splice(i, 0, ch);
            usedElement.pop();
        }
        return result;
    })();


    return permutationArr.filter(function(arr){
        var elementPos = parseInt(arr.indexOf(element));
        if(fixedPositionArr.indexOf(elementPos) > -1) return true;

    })
}

函数调用三个元素

var color = new Array('c1', 'c2', 'c3');
var fixedPositionArr = [1, 2];

var res = calculatePosition(color, 'c3', fixedPositionArr)
console.log(res);

函数调用四个元素

var color = new Array('c1', 'c2', 'c3', 'c4');
var fixedPositionArr = [2, 3];

var res = calculatePosition(color, 'c4', fixedPositionArr)
console.log(res);