JavaScript流程控制入门：if判断、for循环、while循环实战

学JavaScript，流程控制是最基础也最常用的一块。说白了，就是让程序根据条件决定做不做、或者把一件事重复做很多遍。今天老陈带你用三个最实在的例子，把if判断、for循环、while循环一次性搞懂，写完后你就能让网页真正动起来了。

一、什么是流程控制

我们平时写代码，默认是从上往下一条条执行。但真实业务里经常要拐弯：比如用户没填手机号就不能提交，或者要把列表里的每一条数据都处理一遍。这种根据条件选择路线、或重复执行的能力，就叫流程控制。核心就两类：分支（if）和循环（for、while）。

二、if判断：条件成立才执行

if就是如果的意思。括号里写条件，条件为真就执行大括号里的代码，否则跳过。

举个例子，判断一个数是不是正数：

let num = 8;
if (num > 0) {
  console.log('这是个正数');
}

如果还要处理反面情况，就加else：条件不满足时走另一段。实际项目里，表单校验、权限判断全靠它。

三、for循环：知道次数就用它

当你明确知道要重复多少次，for循环最合适。它的结构分成三步：起始值、循环条件、每轮后变化。

比如从1数到5：

for (let i = 1; i <= 5; i++) {
  console.log(i);
}

这段会依次打印1、2、3、4、5。遍历数组、渲染商品列表，用的全是for循环的思路。

四、while循环：条件满足就一直跑

while和for的区别在于：while只管一个条件，条件为真就一遍遍执行，直到条件变假才停。

例如累加，直到总和超过100：

let sum = 0, n = 1;
while (sum < 100) {
  sum += n;
  n++;
}

适合那种不知道具体次数、只认结束条件的场景，比如等待用户某个操作完成。

五、新手常踩的三个坑

• 死循环：while里的条件永远为真又不变，页面会卡死，写之前先想清楚怎么让它停下。
• 循环变量写错：for里该用i的地方用了别的，或者忘了i++，导致不执行或无限循环。
• 把赋值号=当等于号==用：判断相等要用==或===，一个等号是赋值，这是初学者最高频的bug。

老陈总结

流程控制就三板斧：if负责选择、for负责按次数重复、while负责按条件重复。老陈建议你动手练起来，别只看：打开浏览器按F12，控制台里把上面三段代码分别敲一遍，改改数字看输出。再试着写个例子——比如用for循环算出1加到100的和。练熟这三样，你就跨过了JavaScript入门最关键的一道坎。