如何实现带条件的JavaScript循环?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (71)

我期待使用for循环来完成以下操作。

我将在数组中定义一组值,一组十六进制值作为图表的默认颜色。我想使用带有2个选项的循环来获取这些值的定义数量。

  1. 如果定义的颜色集中的#值小于所请求的值的数量,则一旦它到达最后一个,它将从1开始并继续循环。
  2. 不太重要但可能有用的是从在默认值集合中的任何索引处获取值并使用与#1相同的条件开始,因为如果它到达colors数组中的最后一个值,它将循环回到开始并且继续前进

下面是我的代码的开头以及显示我正在寻找的小值。

var defaultColors = ["#90CAF9","#B39DDB","#7E57C2","#78909C","#AED581"] ;
var chartData = [12,24,30,40,15,23,35] ;

var dynamicColors = function (a) {
    var colors = [];
    for(i=0;i<a;i++){
        colors.push(defaultColors[i]);
    }
    return colors;
}

并呼吁颜色

backgroundColor: dynamicColors(chartData.length),

在上面的示例中,有多个数据点比颜色值要求循环在颜色数组的开头返回。

#1的预期输出只是从数组的开头循环。

["#90CAF9","#B39DDB","#7E57C2","#78909C","#AED581","#90CAF9","#B39DDB"]

#2的预期输出 - 指定起始索引。

["#7E57C2","#78909C","#AED581","#90CAF9","#B39DDB","#7E57C2","#78909C"]
提问于
用户回答回答于

可以使用带有列表长度的modulo(aka remainder)运算符%循环继续循环遍历列表:

var defaultColors = ["#90CAF9", "#B39DDB", "#7E57C2", "#78909C", "#AED581"];
var chartData = [12, 24, 30, 40, 15, 23, 35];

var dynamicColors = function(a) {
  var colors = [];
  for (i = 0; i < a; i++) {
    colors.push(defaultColors[i % defaultColors.length]);
  }
  return colors;
}

console.log(dynamicColors(10))

要从不同的位置开始,只需将其添加到i并再次使用mod运算符:

var defaultColors = ["#90CAF9", "#B39DDB", "#7E57C2", "#78909C", "#AED581"];
var chartData = [12, 24, 30, 40, 15, 23, 35];

var dynamicColors = function(a, start) {
  var colors = [];
  for (i = 0; i < a; i++) {
    colors.push(defaultColors[(i + start) % defaultColors.length]);
  }
  return colors;
}

console.log(dynamicColors(7, 3)) // seven values starting at index 3

扫码关注云+社区

领取腾讯云代金券