03：循环

一、循环结构介绍

  1. 循环结构存在的意义
    • 计算1+2+3+……+1000的和
    • 需要向计算机输入重复的命令
    • 节省向计算机输入命令的时间，并没有提升性能
  2. 循环结构的三要素
    • 创建（初始化）计数器
    • 执行条件
    • 计数器的改变
  3. 死循环：无法通过自身控制结束的循环
    • 瞬间占用大量性能，造成计算机死机，程序崩溃
    • 尽量避免产生死循环
    • 但可以利用死循环解决无法确定重复执行次数的问题

二、循环语句

  1. while 循环语句
1
2
3
4
5
6
7
8
9
10
11
// while(){}
    // while       语句名，关键字
    // ()          执行条件
    // {}          当执行条件为true时，要重复执行的语句

// 打印10次hello
var i = 0;
while(i < 10){
    console.log("hello");
    i++;
}
  1. do...while 循环语句
1
2
3
4
5
6
7
8
9
10
11
12
// do{}while()
    // do      语句名1，关键字
    // {}      当执行条件为true时，要重复执行的语句
    // while   语句名2，关键字
    // ()      执行条件

// 打印10次hello
var i = 0;
do{
    console.log("hello");
    i++;
}while(i < 10);
  1. for 循环语句
1
2
3
4
5
6
7
8
9
10
11
12
// for(){}
//     for     语句名，关键字
//     ()      循环三要素
//     {}      当执行条件为true时，要重复执行的语句
// for(计数器的初始化; 执行条件; 计数器的改变){
//     当执行条件为true时，要重复执行的语句
// }

// 打印10次hello
for(var i=0;i<10;i++){
    console.log("hello");
}

三、死循环

无法通过自身控制结束的循环

1
2
3
4
5
6
7
8
9
10
11
while(true){
    console.log("hello");
}

do{
    console.log("world");
}while(true);

for( ; true; ){
    console.log("qf");
}

四、流程控制语句

  1. break 关键字：立即结束当前语句
1
2
3
4
5
6
7
8
for(var i=0;i<10;i++){
    console.log(i);
    if(i === 5){
        break;
    }
}

// 0,1,2,3,4,5
  1. continue 关键字：跳过某次循环，继续执行之后的次数
1
2
3
4
5
6
7
for(var i=0;i<10;i++){
    if(i === 5){
        continue;
    }
    console.log(i);
}
// 0,1,2,3,4,6,7,8,9

五、循环嵌套

  • 循环嵌套的书写以及注意
    1. 双层循环用来解决多行多列的计算结构
    2. 外层循环控制行，内层循环控制列
    3. 一般情况下，内外层循环的计数器不允许重复
    4. 一般情况下，同级循环的计数器可以重复

六、使用js控制页面上的元素

  1. 使用js选择器选中元素
    • id选择器：var xxx = document.getElementById("xxx");
  2. 输入框元素的内容
    • 获取：xxx.value
    • 设置：xxx.value = "新值"
    • 注意：从页面上获取到的任何标签的内容，都是字符
  3. 给按钮添加点击事件
    • xxx.onclick = function(){ 点击时要执行的功能 }