javascript中从数组中非随机选取颜色

我试图从数组中选择颜色，我已经看到了很多关于如何随机选择颜色的例子，但是有没有一种方法可以按照数组元素的顺序来选择颜色呢。例如，这会随机从数组中拾取颜色，而且效果非常好

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

---

我需要做什么才能遵循“4B3E4D”、“D74F33”、“7C0380”的顺序。。。等等我非常感谢您对这个初学者问题的帮助。

您必须跟踪函数外当前使用的颜色，如：

var currentColorIndex = -1;

var newColor = getColor(++currentColorIndex);

然后，每次需要下一种颜色时，都可以这样调用函数：

var currentColorIndex = -1;

var newColor = getColor(++currentColorIndex);

---

如前所述，您可以使用一个变量来跟踪颜色，并使用一个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;
};

---

可以将所需的行为添加到数组中。下面的代码添加了一个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()); 
});

---

将成员添加到数组的优点是，您不必使用跟踪此对象特定内容的变量污染任何作用域。

您需要的是某种状态或上下文。也就是说，我穿的是什么颜色，接下来是什么颜色

通常，函数是一个糟糕的选择，因为这意味着你有副作用。也就是说，该函数改变了程序的更大上下文，不再是可预测的。（返回随机结果的函数通常是可以接受的，因为它们是不可预测的。）

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

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

最后，也许你根本不想要函数……也许你只想让

颜色

成为一个数组，你可以根据需要迭代它：

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

var colors=['#4B3E4D'，'#D74F33'/*…*/]；
//无论何时你需要它。。。。
对于（var i=0；i假设您不想使用全局变量（因为这是个坏主意），您可以使用创建私有范围来跟踪索引

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"

这将依次返回每种颜色，当它到达数组的末尾时，从数组的开头重新开始。
您只需要跟踪颜色索引

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
// ...

当索引到达
数组.length
时会出现问题，但我认为您可以做到这一点。
您可以使用一个全局变量来跟踪所处的索引，并在每次调用函数时递增该变量。然后，您可以使用该变量替换
Math.floor（Math.random（）*颜色、长度）
@danBuonocore当然是对的，但是你的问题让我想知道你所做的是否是实现你想要的最简单的方法。你有没有理由不能简单地循环颜色？即使你不能-每次调用函数时都声明函数内部的颜色有意义吗？如果你有一个变量需要跟踪您所在的位置，是否需要函数？