在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=3时
break 退出整个循环,以及后面的代码块
}
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
}