创建调色板列表循环问题答案

【问题标题】：Creating color pallet list loop issue创建调色板列表循环问题
【发布时间】：2014-06-14 05:15:34
【问题描述】：

在这个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 种颜色！我该如何解决这个问题？

【问题讨论】：

标签： javascript for-loop nested-loops

【解决方案1】：

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

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

当数组值从[0-5]开始时

所以对于你的循环，你需要使用

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

..这适用于你所有的循环

【讨论】：

不，它的索引从0开始计数，条件小于，不等于！这不是问题。

【解决方案2】：

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

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

或

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

【讨论】：

我确实按照你的看法进行推送，但仍然未定义：jsbin.com/dozipumu/4
请使用我的样品。重点不是push，而是删除了第二和第三行pallet[j] = "#"+R[x]+G[y]+B[z];。
好的，它可以工作，但我无法理解推送规则！我认为，在我的原始代码中，z 是在首先执行的最内层循环中定义的，因此 z 已经在所有循环的其余部分中定义了！似乎大多数外部循环中都没有定义它！
undefined 错误不是因为z = undefined，而是当你在中间和第一个循环中使用它时z = B.length。所以B[z] 在那个时候是在数组的范围之外。 B 的索引从 0 到 5。z = 6。所以B[6] = undefined

【解决方案3】：

当使用 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

【讨论】：