JavaScript-for、while、do...while 循环语句的使用方法、break、continue 语句如何结束循环及二者的区别

for循环：

先判断，只要条件成立，就重复不断的执行循环体代码

for (变量初始化 ; 条件判断 ;  变量更新) {
	循环体代码;
}

功能：控制某段代码让其重复执行；

变量初始化： 一般为赋值表达式，给控制变量赋初值；

条件判断： 关系表达式或逻辑表达式，循环控制条件；

变量更新： 一般为赋值表达式，给控制变量增量或减量；

循环体代码：循环代码块，当有多条语句时，必须使用复合语句。

for语句执行过程：

• 先对 “变量初始化”；
• 通过 “条件判断” 是否满足给定条件，若其值为真，满足循环条件，则执行 “循环体代码”；
• 然后进行 “变量更新” ，进入第二次循环，再进行 “条件判断” ……；
• 当条件判断得到的值为假，不满足条件，就终止for循环，执行循环体外语句。

示例：

var num = 10;
for (var i = 0; i < 10; i++) {
	console.log('条件成立，第' +i+ '次循环<br />'); //该语句将执行 10 次
}

while 循环

var isTrue = 10;

while (条件判断) {
	// 条件为真时执行的代码
	代码块;
}

while循环结构说明：

• 在循环开始前，必须要对变量初始化(声明变量，给变量给个初始值)。
• 如果while的条件为true，则会去执行循环体中 “{}” 的代码。如果条件为false，则退出循环。
• 在循环体中，必须要有 “变量更新” 的语句。换句话说：两次循环的变量的值不能一样，如果一样，会造成"死循环"。

示例：

var i = 1;  //变量初始化
while (i<=10) {
	console.log(i); 
	i++; //变量更新，是为了避免出现"死循环"
}

do…while循环

先执行一遍循环体代码再判断，只要条件成立，就重复不断的执行循环体代码

do  {
   循环体;
} while (条件判断);

do…while循环结构说明：

• do…while 和 while 的执行过程非常相似，唯一的区别是：“do…while是先执行一次循环体，然后再进行"条件判断”；同样也需要变量初始化。

• 当表达式为"真"时，返回重新执行循环体，如此反复，直到表达式为"假"为止，此时循环结束。

• while 和 do…while 不等价，while "循环体"内部不一定会执行，当"条件判断"一开始就为假的时候它就不会执行。

• 但 do…while 不管"条件判断"开始为真还是为假，循环体内部都会先执行一次。

  注意：while 后面的分号千万不能省略。

示例：

// 初始化变量
var i = 1;
var sum = 0;
do {
  sum += i;//循环体
  i++;//自增
} while (i <= 100);//循环条件

console.log('sum = ' + sum); // sum = 5050

break(打破)语句和continue(继续)语句

break语句

描述： break语句，用于无条件结束各种循环(退出循环) 和 switch；直接跳到 for 的结束大括号之后，break 之后的所有的语句终止执行

说明：一般情况下，需要在break语句之前加一个条件判断。换句话说：就是条件成立了，就退出循环。

注意：break只能跳出单层循环(距离最近的循环)，不能一次跳出多重循环。

示例：

//输出1-100之间所有的数，超过50的不再输出
for (var i=1;i<=100;i++) {
	//超过50的数不再显示
	if (i>50) {
		break; //条件成立，执行该语句，跳出循环
	}
	// 控制台打印
	console.log(i);
}

continue语句

描述：结束本次循环，而开始下一次循环；continue 之后的代码不再执行了。

说明：一般情况下，需要在 continue 语句之前加一个条件判断。

示例：

//输出1-100间所有的偶数，用continue作
for (var i=1;i<=100;i++) {
	//如果是奇数，if条件为true,则continue；如果是偶数，if条件为false
	if (i%2!=0) {
		continue;//终止本次循环，开始下一次循环；continue之后的代码不再执行了。
	}
	
	console.log(i);
}