JavaScript循环结构

循环结构

• 循环结构，就是根据某些给出的条件，重复的执行同一段代码
• 循环必须要有某些固定的内容组成。
  （1.初始化 2.条件判断 3.要执行的代码 4.条件值改变）

1、while 循环

当条件满足时就执行代码，不满足不执行

1.1 while 循环的语法

while (条件) { 满足条件时执行的代码 }

注意：因为此循环只要满足条件就执行，所以我们写的时候一定要设置一个边界值，不然循环就会一直执行下去。

1.2 while 循环代码演示

// 1. 初始化条件，用来记录循环执行的次数
var num = 0;
// 2. 判断是否满足条件，满足就执行
while (num < 10) {
  // 3. 重复执行的代码
  console.log('当前循环的次数为： ' + num)
  // 4. 循环每执行结束一次，改变条件值
  num++
}

2、do while 循环

1. 它是一个和 while 循环类似的循环
2. while 会先进行条件判断，满足就执行，不满足不执行
3. do while 和 while 的区别，它先不管条件，先执行一次，然后在开始进行条件判断是否执行循环。

2.1 do while 循环的语法

do { 要执行的代码 } while (条件)

2.2 do while 循环代码演示

// 下面这个代码，条件一开始就不满足
//但是依旧会执行一次 do 后面 {} 内部的代码
var i = 10
do {
  console.log('不管条件怎么样我先执行一次')
  i++
} while (i < 10)

3、for 循环

• 用for循环取数组的值
• 用for循环取对象的值
• 和 while 和 do while 循环都不太一样的一种循环结构
• 道理是和其他两种一样的，都是循环执行代码

3.1 for 循环的语法

语法： for (var i = 0; i < 10; i++) { 要执行的代码 }

3.2 for 循环代码演示

// 把初始化条件，条件判断，改变条件值，写在了一起
for (var i = 1; i <= 10; i++) {
  // 这里写的是要执行的代码
  console.log(i)
}

3.3 for 循环的补充

for in循环（用于循环对象Object）
for in 语句有循环遍历对象的属性：

for(var s in data){

　　console.log(s)  //对象属性

    console.log(data[s]) //对象属性对应的值

}

4.Break 终止循环

1. 在循环没有进行完毕的时候，因为我设置的条件满足，提前终止循环。
2. 要终止循环，就可以直接使用 break 关键字

4.1 终止循环代码演示

for (var i = 1; i <= 5; i++) {
  // 每循环一次，加一
  console.log('我循环了第'+i+'i次')
  // 当 i 的值为 3 的时候，条件为 true
  //执行 {} 里面的代码,终止循环
  // 循环就不会继续向下执行了，也就没有 4 和 5 了
  if (i === 3) {
    break
  }
}

5.continue 结束本次循环

1. 在循环中，把循环的本次跳过去，继续执行后续的循环
2. 跳过本次循环，就可以使用 continue 关键字

5.1 结束本次循环代码演示

for (var i = 1; i <= 5; i++) {
  // 当 i 的值为 3 的时候，执行 {} 里面的代码
  // {} 里面有 continue，那么本次循环后面的代码就都不执行了
  // 自动算作 i 为 3 的这一次结束了，去继续执行 i = 4 的那次循环了
  if (i === 3) {
    console.log('这次我想结束，不循环了')
    continue
  }
  console.log('我执行了'+i+'次')
}

6.循环的嵌套

在一个循环体语句中又包含另一个循环语句，称为循环嵌套

6.1 循环的嵌套代码演示（九九乘法表）

for (var i = 1; i <= 9; i++) {
	//外层循环执行一次，里层的循环要执行一遍
	for (var j = 1; j <= i; j++){
		document.write('<span>' + j + ' * ' + i + ' = ' + i * j + '&nbsp;</span>')
	}
	document.write('</br>')
}

6.2 演示效果（九九乘法表）