Question

我试图从数组中选择颜色，并且我已经看到了很多关于如何随机执行此操作的示例，但有没有一种方法可以按照数组元素的顺序执行此操作。例如，这会随机从数组中选择颜色，并且它可以完美地运行。

function getColor() {
  var colors = [ '#4B3E4D', '#D74F33', '#7C0380', '#CC0099', '#FF6600', '#1E8C93', '#009900', '#D74F33',
                 '#D31900', '#2F0093', '#CC3300', '#002254', '#9d0000', '#006B8F', '#3f0e0e', '#0066FF',
                 '#338533', '#0066CC' ];

  var random_color = colors[Math.floor(Math.random() * colors.length)];

  return random_color;
}

我需要遵循以下订单＆＃39;＃4B3E4D＆＃39;，＃39;＃D74F33＆＃39;，＃39;＃7C0380＆＃39; 。 .. 等等？感谢您对这个初学者问题的任何帮助。

Answer 1

您可以将所需的行为添加到阵列中。下面的代码添加了一个getNext函数，该函数将从currentIndex获取下一个值。如果currentIndex达到或超过数组的长度，它会将当前索引重置为0并获取第一个元素。

var colors = [];
colors.currentIndex = -1;
colors.getNext = function() {
    if (this.length > 0) {
        this.currentIndex += 1;
        if (this.currentIndex >= this.length) this.currentIndex = 0;
        return this[this.currentIndex];
    }
}

$('#nextColor').click(function() {
   $('#currentColor').text(colors.getNext()); 
});

jsFiddle

将成员添加到数组的好处是，您不必使用跟踪特定于此对象的变量来污染任何范围。

Answer 2

您需要的是某种州或上下文。即，我的颜色是什么颜色，接下来是什么颜色？

通常情况下，函数的选择较差，因为这意味着您有副作用。也就是说，该函数改变了程序的更大上下文，并且不再可预测。（返回随机结果的函数通常是可以的，因为它被理解为它们是不可预测的。）

实现此目的的一种方法是使用具有方法的对象，这是一种面向对象的方法来管理状态：

function ColorProvider() {
    this.colors = ['#4B3E4D', '#D74F33' /*...*/];
    this.currentColorIndex = 0;
}
// gets the next color; returns "undefined" when all colors
// have been exhausted
ColorProvider.prototype.getNextColor = function() {
    return this.colors[this.currentColorIndex++];
}
ColorProvider.prototype.reset = function() {
    this.currentColorIndex = 0;
}

这对于小功能来说是很多工作，但它是处理基于状态的功能的“理智的”（面向对象的）方式。你可以这样使用它：

var cp = new ColorProvider();
cp.getNextColor();   // returns '#4B3E4D'
cp.getNextColor();   // returns '#D74F33'

（注意这个，以及我建议的其他实现，当没有更多颜色时，只需开始返回undefined。修改这些示例以便它们循环并在一开始。）

另一种方法是使用闭包，这类似于面向对象的方法：

var getNextColor = (function() {
    var currentColorIndex = 0;
    var colors = ['#4B3E4D', '#D74F33' /*...*/];
    return function() {
        return colors[currentColorIndex++];
    }
})();

最后，也许你根本不想要一个函数......也许你只想让colors成为一个正在处理的数组，你可以根据需要迭代它：

var colors = ['#4B3E4D', '#D74F33' /*...*/];
// whenever you need it....
for(var i=0; i<colors.length; i++) {
    colors[i];   // '#4B3E4D', '#D74F33', etc.
}
// or....
colors.forEach(function(c) {
    // c takes on the values '#4B3E4D', '#D74F33', etc.
});

Answer 3

您必须跟踪功能之外当前使用的颜色，如下所示：

var currentColorIndex = -1;

然后每当你想要下一个颜色时，你可以像这样调用函数：

var newColor = getColor(++currentColorIndex);

function getColor(currentColorIndex) {

var colors = ['#4B3E4D', '#D74F33', '#7C0380', '#CC0099', '#FF6600', '#1E8C93', '#009900', '#D74F33',
    '#D31900', '#2F0093', '#CC3300', '#002254', '#9d0000', '#006B8F', '#3f0e0e', '#0066FF',
    '#338533', '#0066CC'];


return colors[currentColorIndex];
}

Answer 4

如前所述，您可以使用变量来跟踪颜色，并使用if语句来确保您没有达到数组的限制。

var counter = 0

function getColor() {

  var colors = ['#4B3E4D', '#D74F33', '#7C0380', '#CC0099', '#FF6600', '#1E8C93', '#009900', '#D74F33',
        '#D31900', '#2F0093', '#CC3300', '#002254', '#9d0000', '#006B8F', '#3f0e0e', '#0066FF',
        '#338533', '#0066CC'];

  var random_color = colors[counter];
  counter ++;
  if (counter === colors.length) counter = 0;
  return random_color;
};

Answer 5

假设您不想使用全局变量（因为这是一个坏主意），您可以使用IIFE创建一个私有范围来跟踪索引。

var getColor = (function() {
  var index = 0;
  var colors = [ '#4B3E4D', '#D74F33', '#7C0380', '#CC0099', '#FF6600', '#1E8C93', '#009900', '#D74F33',
                 '#D31900', '#2F0093', '#CC3300', '#002254', '#9d0000', '#006B8F', '#3f0e0e', '#0066FF',
                 '#338533', '#0066CC' ];

  return function() {
    var color = colors[index];
    index = (index + 1) % colors.length;
    return color;
  }
})();

getColor(); // => "#4B3E4D"
getColor(); // => "#D74F33"
// ...
getColor(); // => "#0066CC"
getColor(); // => "#4B3E4D"

这将依次返回每种颜色，当它到达数组的末尾时，从头开始。

Answer 6

您只需要跟踪颜色索引。

var i = 0;
function getColor() {

var colors = ['#4B3E4D', '#D74F33', '#7C0380', '#CC0099', '#FF6600',     '#1E8C93', '#009900', '#D74F33',
    '#D31900', '#2F0093', '#CC3300', '#002254', '#9d0000', '#006B8F',     '#3f0e0e', '#0066FF',
    '#338533', '#0066CC'];

var color = colors[i];
i++;

return color;
}

为了控制一切，你可以添加一个IEF。

var getColor = (function(){
    var colors = ['#4B3E4D', '#D74F33', '#7C0380', '#CC0099', '#FF6600',     '#1E8C93', '#009900', '#D74F33',
        '#D31900', '#2F0093', '#CC3300', '#002254', '#9d0000', '#006B8F',     '#3f0e0e', '#0066FF',
        '#338533', '#0066CC'];
    var i = 0;

    var getColor = function(){
        return colors[i++];
    };

    return getColor;
})();

一些测试：

console.log(getColor()); // #4B3E4D
console.log(getColor()); // #D74F33
// ...

当索引达到array.length时会出现问题，但我认为你可以管理它。

在javascript中非随机地从数组中挑选颜色

6 个答案:

jsFiddle