JavaScript中的while循环中的if语句

Question

以下是创建1到80之间8个随机数的代码。它将这些随机数存入一个名为“numbers”的数组，并写入divs中。如果在if括号内增加x，则该代码可以正常运行。

如果我将“x++”放在if括号外面，经过几次尝试后，有时会创建相同的随机数字并在numbers数组内找到。然后它会跳过该div并留下空白。在if块内和if块外递增x有什么区别？

var numbers = []
var luckyNumber;
var x = 1;

while (x <= 8) {
  luckyNumber = Math.floor(Math.random() * 80 + 1);
  if (numbers.indexOf(luckyNumber) == -1) {
    document.getElementById('k' + x).innerHTML = luckyNumber;
    numbers.push(luckyNumber);
    x++;
  }
}

if语句块外：

var numbers = []
var luckyNumber;
var x = 1;

while (x <= 8) {
  luckyNumber = Math.floor(Math.random() * 80 + 1);
  if (numbers.indexOf(luckyNumber) == -1) {
    document.getElementById('k' + x).innerHTML = luckyNumber;
    numbers.push(luckyNumber);
  }
  x++;
}

HTML:

<div id="k1">K1</div>
<div id="k2">K2</div>
<div id="k3">K3</div>
<div id="k4">K4</div>
<div id="k5">K5</div>
<div id="k6">K6</div>
<div id="k7">K7</div>
<div id="k8">K8</div>

- user7580495

Answer 1

当你把增量放在if条件外面时，如果numbers数组中已经有一个数字存在，则它不会进入if条件，并且div永远不会填充。但是，由于增加了x值，您会进入下一个div。如果将x的增量移至外部，则在未满足if内部条件时，x值保持不变，因此在下一次迭代中可能会通过条件或继续尝试。

执行流程

当if内部有增量时

1) Generate random number.
2) Check in is already generated, if yes skip it. // you see ? when skip no increment happens, because the increment inside the the condition.
3) Generate again and go to step 2.

当您在if外部进行增量操作时

1) Generate random number.
2) Check in is already generated, if yes skip it. Increase x value to next. //** you see ? incrementing no matter you skip it or not.
3) Generate again and go to step 2.

- Suresh Atta

---

它是否继续创建随机数并检查它是否已经在数字数组中？我认为if语句在while循环的每次迭代中只运行一次。因此，它不会增加直到if条件为真并且继续尝试。对吗？ - user7580495

@user7580495 是的。否则，如果它已经生成并在数组中找到，你需要重新生成并检查。不是吗？这正是现在正在发生的事情。 - Suresh Atta

Answer 2

• 因为在第一个示例中，只有在生成唯一的随机数时才会推进x。
• 在第二个示例中，无论生成的数字是否唯一，都会推进x。因此，在这种情况下，它可能只生成了两个唯一的随机数（因为这是您的while条件）。

- Giorgi Moniava

Answer 3

如果你在if外面写x++，它总是增加1..而如果你把它放在if里面，当你的条件满足时它会增加..根据这个，你的输出可能会有所不同。

- Kishan Oza

Answer 4

在外部递增，if块将无条件执行。

但是如果你在内部递增，if块只有在条件为真时才会执行。

- Ankit Kumar Gupta

Answer 5

你可以使用 do while 循环来检查数字是否已被占用。

var numbers = [],
    luckyNumber,
    x = 1;

while (x <= 8) {
    do {
        luckyNumber = Math.floor(Math.random() * 80 + 1);
    } while (numbers.indexOf(luckyNumber) !== -1)
    document.getElementById('k' + x).innerHTML = luckyNumber;
    numbers.push(luckyNumber);
    x++;
}

<div id="k1">K1</div>
<div id="k2">K2</div>
<div id="k3">K3</div>
<div id="k4">K4</div>
<div id="k5">K5</div>
<div id="k6">K6</div>
<div id="k7">K7</div>
<div id="k8">K8</div>

- Nina Scholz