所有生成的随机值都相同答案

【问题标题】：All generated random value is same所有生成的随机值都相同
【发布时间】：2017-08-12 04:06:27
【问题描述】：

这是我写的代码，我不知道为什么即使我在randomRGBValue中写了随机函数，所有50个rgbColor都生成相同的值。

var html = '';
var valueArr = [];
var rgbColor;

function randomValue() {
  for (var i = 0; i < 3; i += 1) {
    valueArr.push(Math.floor(Math.random() * 256 ));
  }
  return valueArr;
}

function randomRGB() {
  randomValue();
  var color;
  color = 'rgb(';
  color += valueArr[0] + ',';
  color += valueArr[1] + ',';
  color += valueArr[2] + ')';
  return color;
}

for (var i = 0; i < 50; i += 1) {
  rgbColor = randomRGB();
  html += '<div style="background-color:' + rgbColor + '"></div>';
}

document.write(html);

为了便于理解我写得不好的代码，

-> randomValue 函数用于生成从 1 到 255（3 组）的随机值并推入 valueArr。返回值Arr。

示例 valueArr = (value1, value2, value3)

-> randomRGB 函数调用 randomValue 函数并将 valueArr 值插入到颜色数组中。

【问题讨论】：

标签： javascript arrays random

【解决方案1】：

你的问题是你从来没有重置你的valueArr - 你不断地让它变得越来越大。但是在您的 randomRGB() 函数中，您始终访问数组的前三个元素。

您可以通过在 randomValue() 函数中添加 var valueArr = [] 来解决此问题，您应该没问题。

【讨论】：

解决了！现在我知道变量作用域的重要性了！
另外！在不改变范围的情况下，通过添加valueArr.shift()，也是另一种方式:)

【解决方案2】：

你好，你可以这样缩短它

function randomRGB() {
  return 'rgb(' + [
    Math.random() * 256 | 0,
    Math.random() * 256 | 0,
    Math.random() * 256 | 0
  ].join(',') + ')';
}
var html = '';
for (var i = 0; i < 50; i++) {
  html += '<div style="background-color:' + randomRGB() + '"></div>';
}
console.log(html);

【讨论】：

Math.random() * 256 | 0
是的，Javascript 有很多技巧可以用来缩短代码

【解决方案3】：

因为valueArr是全局定义的，所以每次调用randomValue()时都不会重置为[]，接下来的三个值只是pushed到valueArr的末尾（不是在全部修改前三个值）。

因此，当randomRGB() 构造它的颜色字符串时，它会查看valueArr 中的前三个值（它们总是相同的，因为新生成的随机值被附加到数组的末尾）。

两种解决方案：

(1) 使valueArr 成为在randomValue() 内部定义的局部变量

function randomValue() {
  var valueArr = [];
  ...
}

(2) 将valueArr 保留在原处，但在randomValue() 中将其重置为[]

var valueArr;
...
function randomValue() {
  valueArr = [];
  ...
}

希望这会有所帮助！

【讨论】：

【解决方案4】：

将全局声明的变量 valueArr, rgbColor 移动到各自的函数中检查工作代码here 演示：https://codepen.io/karthikdivi/pen/ZJJeoa?editors=0010

var html = '';
//var valueArr = [];
//var rgbColor;

function randomValue() {
  var valueArr = [];
  for (var i = 0; i < 3; i += 1) {
    valueArr.push(Math.floor(Math.random() * 256 ));
  }
  return valueArr;
}

function randomRGB() {
  var valueArr = randomValue();
  var color;
  color = 'rgb(';
  color += valueArr[0] + ',';
  color += valueArr[1] + ',';
  color += valueArr[2] + ')';
  return color;
}

for (var i = 0; i < 50; i += 1) {
  var rgbColor = randomRGB();
  html += '<div style="background-color:' + rgbColor + '">foo</div>';
}

document.write(html);

【讨论】：

我没有意识到 rgbColor 不需要在全局范围变量中！
实际上，你的代码在全局范围内运行得很好；但是，我相信这个建议是因为您使用 rgbColor 的唯一地方是在最后一个 for 循环中。基本上，它可以通过减少文件顶部的全局变量来使您的代码更清晰。

【解决方案5】：

十六进制颜色可以更容易一些：

for (var i = 0; i < 10; i += 1) 
    document.write('<div style="background-color:#' + 
        ('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6) + '">.</div>');

【讨论】：