Question

在此JSBIN demo中，您将看到以下代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script>
 function createPallet(){
    R = Array('00', '33', '66', '99', 'CC', 'FF');
    G = Array('00', '33', '66', '99', 'CC', 'FF');
    B = Array('00', '33', '66', '99', 'CC', 'FF');
    pallet = [];
    j = 0;
    for (x = 0; x < R.length; x++){
      for (y = 0; y < G.length; y++){       
        for (z = 0; z < B.length; z++){
          pallet[j] = "#"+R[x]+G[y]+B[z];
          j++;          
        }
         pallet[j] = "#"+R[x]+G[y]+B[z];
        j++;

      }
      pallet[j] = "#"+R[x]+G[y]+B[z];
        j++;
    }
   return pallet;
 }   
  </script>
</head>
<body>
  <select style="width: 150px">
<script>
  pallet = createPallet();
  alert("Number of colors: "+pallet.length)
  for (i = 0; i < pallet.length; i++){
    document.write("<option style='background-color:"+pallet[i]+"' title='"+pallet[i]+"'>&nbsp;</option>");

  }

  </script>
  </select>
</body>
</html>

我有258种颜色，但在白色选项标题中显示的列表中有重复的未定义蓝色值 B。我相信这是因为嵌套循环中的错误，我无法弄清楚它。另一件事，我希望它返回256色而不是258！我怎么能解决这个问题？

Answer 1

我认为只有最内层的循环需要推送：

for (x = 0; x < R.length; x++){
    for (y = 0; y < G.length; y++){       
        for (z = 0; z < B.length; z++){
            pallet[j] = "#"+R[x]+G[y]+B[z];
            j++;          
        }
    }
}

OR

for (x = 0; x < R.length; x++){
    for (y = 0; y < G.length; y++){       
        for (z = 0; z < B.length; z++){
            pallet.push("#"+R[x]+G[y]+B[z]);
        }
    }
}

计数应为216. 6 * 6 * 6 = 216.未定义的值在那里，因为例如循环变量z在上次退出循环时会增加。因此，在循环完成后，您引用了变量，此时该值将比数组的长度多1，从而导致未定义的值。

<强>更新澄清

for (x = 0; x < R.length; x++){
    for (y = 0; y < G.length; y++){       
        for (z = 0; z < B.length; z++){
            pallet[j] = "#"+R[x]+G[y]+B[z];
            j++;          
        }
        //remove ==> pallet[j] = "#"+R[x]+G[y]+B[z];
        //remove ==> j++;          
    }
    //remove ==> pallet[j] = "#"+R[x]+G[y]+B[z];
    //remove ==> j++;          
}

Answer 2

使用JavaScript的数组对象的forEach方法时，这更加清晰。

将其用作createPallet功能：

function createPallet(){
    var R = Array('00', '33', '66', '99', 'CC', 'FF');
    var G = Array('00', '33', '66', '99', 'CC', 'FF');
    var B = Array('00', '33', '66', '99', 'CC', 'FF');
    var pallet = [];
    R.forEach(function(r) {
        G.forEach(function(g) {
            B.forEach(function(b) {
                pallet.push("#"+r+g+b);
            });
        });
   });
   return pallet;
}

另请注意，这正确地返回216种颜色而不是256种颜色的数组，因为R，G和B数组中有6个元素，6 * 6 * 6 == 216。看到： http://www.helensimages.com/hexcolor.htm

Answer 3

请记住确认数组从0开始，而length将为您提供数组的实际长度，即。

R.length // G.length // B.length都等于6

当数组值从[0-5]

开始时

因此，对于你的循环，你需要使用

for (x = 0; x < R.length-1; x++){}

..这适用于所有循环

创建调色板列表循环问题

3 个答案: