JavaScript 循环与迭代

46 阅读6分钟

在JavaScript中,循环就是提供一种快速简便的方式去做一些重复事件,本文将会探讨循环和在JavaScript中存在哪些迭代语句。

循环有很多种类,但其本质都是做同样一件事情,把一个动作重复很多次,实际循环的次数可能为0,可能为无限次。不同的循环机制提供不同的方法来确定循环的开始和结束,在不同情况下,某一类的循环要比其他循环简单。

例如,你想要在页面上显示出五个星星,我们可以一遍一遍打出这个执行语句,一旦次数变多,就会显得很乱,这个时候就会用到循环语句去执行。

let star;
for(star =  0; star  5; star++){
循环五次,star的值从0变化到4
document.write('⭐');
}

接下来,我们来了解在JavaScript中存在的迭代语句有:for语句,do...while语句,while语句,label语句,break语句,continue语句,for...in语句,for...of语句。

for语句

JavaScript中的for循环和Java,C语言的for循环是很相似的,for循环语句会一直循环,直到指定的循环条件为false,才会暂停循环。for语句的结构是:

for ([初始化表达式];[循环条件];[改变初始变量的值]){
代码块
}

for循环执行的过程:

1.如果有初始化表达式,则被执行;也可以省略初始化表达式(比如在循环开始前已经设置了值),但是分号不可以省略,初始化表达式可以初始化任意(或者多个)值,语法上是允许一个任意复杂度的表达式的。

2.判断表达式是否满足循环条件,如果满足为true时则执行循环语句中的代码,如果不满足为false时,for循环终止;如果循环条件被省略,则循环条件默认为true。那么此时必须在循环中提供break,否则循环无法终止。

3.执行代码块,如果执行多条语句,则使用{...}包裹语句,单条代码则可以省略。

4.如果有改变初始变量值的表达式,则执行该语句;增量可以是负数(i--),可以自增1,也可以更大(i += 10)。

5.返回步骤2。

示例

声明一个数组,利用for循环遍历数组 从第一个循环到最后一个

 for循环最大价值:循环数组
 let arr = ['刘德华', '黎明', '郭德纲']
  //变量初始值必须为0,因为数组索引号从0开始
    for (let i = 0; i = arr.length - 1; i++) {
       console.log(arr[i])
    }

do...while语句

do...while语句的结构是:

do{
  代码块
}while(循环条件)

在进入判断循环条件前会先执行代码块一次,如果循环条件为true时,代码块将再次执行,在每个执行代码块的结尾会进行循环条件的检查。 do...while语句一直重复执行直到指定条件取到false值,就终止do...while的循环。

示例

在下面例子中,可以看出do循环至少重复一次,如果需要使用变量,则需要在do...while循环语句前进行声明变量并初始化其值。

let i = 0;
do{
i++;
 console.log(i);
}while(i=6)一直重复到i不再小于等于6

while语句

只要while循环条件为true,就会一直执行代码块,如果这个条件为false,就不会执行该代码块,while语句的结构是:

while(循环条件){
    代码块;
}

条件检测会在执行代码块前进行,如果条件返回为真,就会执行代码块,紧接着会再次测试是否满足条件;如果条件返回为假,不再进行循环。

示例

只要i所输入的end次数,while循环会一直执行;在每次循环里,i都会加1,然后就会进行判断是否满足i end条件,直到不满足后,循环终止。

    1.变量的起始值
     let i = 0
     let end = +prompt('请输入次数:')
    2.终止条件
     while (i  end) {
       document.write('我要输入' + end + '次br')
       3.变量的变化量
       i++
     }

label语句

label提供了让你在程序中其他位置引用他的标识符,比如,可以用label来表示一个循环,然后使用break或者continue来决定是结束循环还是继续循环。

label语句的语法类似:

    label
         代码块

label的值可以是任何非保留字的JavaScript标识符,代码块可以是任何你想要标识的代码。

示例

比如在下面这个例子中,标记markLoop标识了一个while循环。

 let i = 0
 markLoop while (i  5) {
       document.write('我要输入' + i + '次br')
       i++
     }

接下来再看个例子来明白添加和未添加label的区别;

未添加label:

 let total = 0
 for (let i = 0; i  6; i++) {i循环
    for (let j = 0; j  6; j++) {j循环
        if (i == 3 && j == 3) {
            break  当i=3并且j=3时,会跳出当前j循环,重新返回i循环
         }i循环会继续执行,j循环同样还会执行
        total++
    }
 }
alert(total)输出33

添加label后:

let total = 0
outPoint for (let i = 0; i  6; i++) {
            for (let j = 0; j  6; j++) {
                if (i == 3 && j == 3) {
                    break outPoint  当i=3并且j=3时,会跳出整个循环
                }返回到整个outPoint下方,执行输出语句
                total++
             }
           }
alert(total)输出21

使用continue语句,和未添加label的效果相同,在多层循环下,使用循环的跳出进入流程更加明了,具体代码示例如下:

let total = 0
outPoint for (let i = 0; i  6; i++) {
            for (let j = 0; j  6; j++) {
                if (i == 3 && j == 3) {
                   continue outPoint
                }
                total++
             }
           }
alert(total)输出33

break语句

break语句用来终止循环,可以使用在switch循环语句中,或链接到label语句中。break语句的语法为:

break [label]

当你使用带label的break时,会终止执行带标识的语句(具体代码label语句中的示例);

当你使用不带label的break时,会跳出当前循环,执行这个结构后的语句。

示例

 let i = 1
 while (i=5){
   if (i === 3) {一直循环,直到i=3break  退出整个循环,以及后面的代码块
    }
     document.write(`我要吃第${i}个青团`)
     i++
 }

continue语句

continue语句用来继续执行跳过代码块剩余部分并进入到下一个循环,和break链接到label语句用法相似,区别在于continue是终止当前循环,进入下个循环。break语句的语法为:

continue [label]

示例

 let i = 1
 while (i = 5) {
     if (i === 3) {
        i++   一定要先执行i++,避免出现始终为三的结果
        continue  结束本次循环,继续下一轮循环
       }
    console.log(`我要吃第${i}个青团`)
    i++
}

for...in语句

for...in语句是循环一个指定的变量来循环一个对象的所有可枚举属性,for...in语句是为循环遍历对象的属性而构建的,不建议与数组一起使用;最常用的地方应该是用于调试,可以更方便的去检查对象属性。

for...in语句的语法是:

for (variable in object) {
    代码块
}

示例

let obj = {
    name '林一一',
    age 18,
    sex'女'
}
for(let key in obj){
    console.log(key)  输出name age sex
}

for...of语句

for...of语句一般用于循环遍历对象的value,不同的是for...in循环遍历的结果是数组元素的下标; for...of语句的语法:

for (variable of object) {
    代码块
}

示例

let arr = [3, 5, 7];
for (let key in arr) {
    console.log(key);  输出 0, 1, 2
}
for (let key of arr) {
    console.log(key);  输出 3, 5, 7
}