Javascript For 循环(带条件)

Question

我希望使用 for 循环来完成以下任务。

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

1. 如果定义的颜色集中的值数量小于请求的值数量，一旦到达最后一个，它就会从 1 开始并继续循环。

2. 不太重要但可能有用的是从默认值集中的任何索引处获取值并使用与 #1 相同的条件开始，因为如果它到达颜色数组中的最后一个值，它将循环回到起点并继续前进。

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

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"]

Answer 1

您可以使用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