JavaScript 循环方法梳理使用场景

1 、 for

var arr = [1,2,3];
var len = arr.length;

// for break
for(var i = 0; i < len; i += 1){
    for(var j = 0; j < 3; j++){
        if(j === 1){
            break;
        }
        console.log(arr[i]+'-'+j);
    }
}

结果：

1）break：break退出当前循环，也就是第二层循环

var arr = [1,2,3];
var len = arr.length;

// for continue
for(var i = 0; i < len; i += 1){
    for(var j = 0; j < 3; j++){
        if(j === 1){
            continue;
        }
        console.log(arr[i]+'-'+j);
    }
}

结果：

2）continue：continue停止当前循环的执行，继续下一次循环（都是针对第二层）
tips:for循环里不能有return！

2 、 forEach

var arr = [1,2,3];

arr.forEach(function(value,index) {
    if(index === 1){
        return false;
    }
    console.log(arr[index])
});

结果：

1）return false:结束本次循环，进入下一次循环

var arr = [1,2,3];

arr.forEach(function(value,index) {
    if(index === 1){
        return true;
    }
    console.log(arr[index])
});

结果：

2）return true:结束本次循环，进入下一次循环

3 、 Array.map

map和forEach差不多，区别是map的返回值是一个数组

4、 for…in

var arr = [1,2,3];

for(var i in arr){
    if(i === 1){
        break
    }
    console.log(i)
}

结果：

1）for…in ： break或者continue对遍历无影响，当有return时会报错

5、for…of

var arr = [1,2,3];

for(var i of arr){
    if(i === 2){
        break
    }
    console.log(i)
}

结果：

1. break: 跳出当前循环，和for类似，
   需要注意的是这里的 i 是arr的value而不是index

var arr = [1,2,3];

for(var i of arr){
    if(i === 2){
        continue
    }
    console.log(i)
}

结果：

2）continue：结束本次循环，和for类似，
tips:for…of循环里不能有return！第一个参数是值

6、$.each()

var arr = [1,2,3];

$.each(arr,function(index,value){
    if(index === 1){
        return false;
    }
    console.log(value);
})

结果：

1） return false：跳出本次循环！

var arr = [1,2,3];

$.each(arr,function(index,value){
    if(index === 1){
        return true;
    }
    console.log(value);
})

结果：

2） return true：结束本次循环！tips:$.each循环里不能有break||continue！

看了这么多代码块和输出结果后，那就总结一下啊：咳咳，划重点咯：

1、for：当没有label标记时候，break跳出本次循环并执行循环体后的代码，continue结束本次循环执行下一次循环。没有return。
2、 Array.forEach：遍历整个数组，return false或者true都是结束本次循环执行下一次循环。没有break || continue。
3、 Array.map：map和forEach类似，有返回值，返回结果是return 值组成的数组。
4、for…in：会忽略break || continue。没有return。
5、 for…of：break跳出本次循环并执行循环体后的代码，continue结束本次循环执行下一次循环，和for一样。注意：for(var v in arr)v是数组值！。
6、Jquery.each： return false跳出本次循环并执行循环体后的代码；return true结束本次循环执行下一次循环。没有break || continue。