js中几种循环的区别

js中几种循环的区别

循环概述

循环的作用

循环的作用是用来重复做相同或类似的操作，减少代码冗余
如果没有循环我们执行多次同样的操作，一般就是复制 n 次，但是这种方式会增加额外的代码，也会增加程序员的负担。
一旦数量太大，会增加文件的大小，也会浪费不必要的时间。
有了循环执行重复操作就很简洁

循环三要素

1. 循环变量
   循环变量主要是用来参与循环条件的判断
2. 循环条件
   循环条件决定循环是否继续，一般情况下，如果满足循环条件体则循环继续执行循环，否则循环结束
3. 循环变量的改变
   循环变量会随着循环的发生而不断变化，但循环变量变化的趋势要趋于循环结束，也就是说循环变量的改变最终必定会导致循环结束
   如果循环变量改变不会使循环结束，该循环称之为无限循环也叫死循环，此时循环会一直执行导致电脑内存为 100% 程序崩溃。
   示例如下

for(var i = 0;i < 5;i++){
    console.log(i);
}

此时，循环变量 i 的变化是逐渐向 5 靠拢，最终会等于或大于 5，当循环变量 i 的值等于5 时就结束循环
此时输出

如果循环变量 i 的变化不趋向 5 循环会一直执行循环体，此时就会出现电脑内存被全部占用浏览器自动关闭的情况

for(var i = 0;i < 5;i--){
    console.log(i);
}

此时循环变量 i 的变化就是远离使循环结束的趋势，也就是说 i 的变化不会使循环停止
浏览器会崩溃

因此在使用循环的时候要注意循环变量的变化以及循环条件最终是否会使循环结束，尽量避免死循环

循环的执行流程

此循环流程为除do while 循环以外的循环的执行流程

1. 初始化循环变量
2. 判断循环条件
   如果满足循环条件执行循环体，否则循环结束
3. 执行循环体
4. 循环变量发生改变

js中的循环

for循环

该循环在js中的使用较为常见,通常用来遍历数组
通常适用于知道循环次数的情况
该循环的循环变量、循环条件、循环变量的改变都写在 for 关键字后面的括号里
该循环执行时初始化循环变量后，判断循环条件，满足条件则继续执行循环体，否则不执行循环体
其语法为

for(var 循环变量 = 循环变量的值;循环条件;循环变量的改变){
    //循环体
}

for in 循环

该循环用于不知道循环次数，但是知道某个数组或对象里有元素的情况
该循环通常用来遍历对象，也可以遍历数组
其语法为

for(var 变量 in 要遍历的对象){
    //循环体
}

while 循环

该循环用于不知道循环次数，但是知道终止循环的条件或继续循环的条件的情况
该循环的循环变量一般在循环外面声明并初始化，循环条件写在 while 后面的括号里，循环变量的改变在循环体中发生
该循环执行时先判断循环条件，满足循环条件执行循环体，否则不执行
其语法为

var 循环变量
while(循环条件){
    // 循环体
    // 循环变量的改变
}

do while 循环

该循环也适用于不知道循环次数，但是知道终止循环的条件或继续循环的条件的情况
该循环的循环变量、循环条件、循环变量的改变的位置与 while 循环一样
该循环的特点是不管循环条件是否成立都至少执行一次循环体
该循环是先执行循环体然后判断循环条件，如果满足循环条件继续执行循环体，否则不执行循环体
其语法为

do{
    // 循环体
    // 循环变量的改变
}while(循环条件)

几种循环的区别

for 循环 与 for in 循环 的区别

1. for 循环应用的范围更广，for in 循环的应用范围相对较小，只用来遍历 对象 和 数组
2. for 循环具有循环的三要素且很明确，for in 循环的循环三要素中的循环变量是数组和对象的属性名或索引，并不能人为的给for in 循环的循环变量赋值，
   for in循环的循环变量又直接是循环条件中的一部分，并没有像for 循环中三要素分离的那么明确。
3. 对于索引数组的遍历，并无明显的区别，但是对于关联数组的遍历，只能用for in 循环，for 循环遍历不了关联数组
4. 对于稀疏数组的遍历，for 循环能够将数组中的空值输出，但是for in 循环会将空值漏掉不会输出

var arr = [1,32,45,65,,87,,,,54];
for(var i = 0;i<arr.length;i++){
    console.log(arr[i]);
}
for(var key in arr){
    console.log(arr[key]);
}

for 循环遍历输出的结果

for in 循环输出的结果

很明显，for 循环中输出 undefined 说明该项没有值，for in 没有输出 undefined 长度比for循环输出的长度小
因此我们认为for in 循环将数组中的空值漏掉或过滤掉了

while 循环和 do while 循环的区别

1. while 循环和 do while 循环最明显的区别就是，do while循环不管循环条件是否成立都至少执行一次循环体，这一区别不只是对 while 循环而言，对其他循环也是一样

var i =0;
do{
    console.log(i);
    i++;
}while(i<0)

此时输出

var j = 0;
while(j<0){
    console.log(j);
    j++;
}

此时没有输出

2. do while 循环的循环流程是先执行循环体再判断循环条件，while循环是先判断循环条件再执行循环体，这一区别不只是对 while 循环而言，对其他循环也是一样
   根据执行循环的流程来讲，循环可以分为do while循环和非do while循环，因为do while循环是先执行一次循环体再判断循环条件，而其他循环都是先判断循环条件再决定是否执行循环体

总结

1. 循环的作用是重复执行相同或类似操作
2. 循环的三要素分别是：循环变量、循环条件、循环变量的改变并且此改变必须趋向于循环结束
3. for in 循环遍历稀疏数组会将空值漏掉或过滤掉
4. do while 循环不满足循环条件时会执行一次，其他循环不满足循环条件则一次都不执行