for、for...in、forEach、for...of四种循环的区别

1. for: （1）需要明确遍历次数  (2)不能遍历对象，可以遍历对象以外的集合 array,伪数组        （3）可以使用break和continue
2. forEach: (1) 可以遍历对象以外的集合 （数组，Set）  （2）不能使用break和continue
3. for...in  (1)遍历对象  (2)不能直接访问对象的属性值
4. ES6新增的for...of:可以用于部署了Symbol.iterator的对象（自定义的对象不能使用for...of,但大部分原生的数据集合都可以使用）可以使用break和continue

1、for

        （1）需要明确遍历次数
          (2)不能直接遍历对象，可以遍历对象以外的集合 array,伪数组  
        （3）可以使用break和continue

        //for循环遍历数组
        let arr = [1,2,3,4,5]
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);    
        }

        //遍历对象
        let obj = {a:1,b:2,c:3}  //对象
        let obj2 = Object.keys(obj) //用Object.key()属性转化为数组类型
        console.log(obj2);
        for (let i = 0; i < obj2.length; i++) {
            console.log(obj2[i]+':'+obj[obj2[i]]);  
        }

        let arr = [1,2,3,4,5]
        for (let i = 0; i < arr.length; i++) {
            if(i  == 3){
                break //跳出整个循环
            }
            console.log(arr[i]);   //1,2,3 
        }
        let arr2 = [1,2,3,4,5]
        for (let i = 0; i < arr.length; i++) {
            if(i  == 3){
                continue //跳出当前继续下一次循环
            }
            console.log(arr[i]); //1,2,3,5   
        }

2、for...in

        (1)遍历对象  
        (2)不能直接访问对象的属性值

        let person = {name:'张三',age:22,gender:'男'}
 
        for(let key in person){
            console.log(key);
            console.log(key+person[key]);
        }
        let arr = [1,2,3,4,5]
        for (let i in arr){
            console.log(i); //0, 1, 2, 3, 4索引值

        }

3、for...of

        用于遍历可迭代对象的元素

        (1)可以用于部署了Symbol.iterator的对象（自定义的对象不能使用for...of,但大部分原生的数据集合都可以使用） 
        (2)可以使用break和continue 

        //作用于数组
        let arr = [1,2,3,4,5]
        for (let i of arr){
            console.log(i);  //1，2，3，4，5元素值
        }

        console.log(arr);  //原型上有Symbol.iterator(迭代器)


        //作用于字符串
        let str = "abcdef"
        for (let i of str){
            console.log(i);
        }
        console.log(str[Symbol.iterator]);  //原型上有Symbol.iterator(迭代器)

        //作用于Set数据
        let set = new Set([3,5,7])
        for (let i of set){
        if (i === 5) break;
        console.log(i);
        }
        console.log(set);  //原型上有Symbol.iterator(迭代器)
        
        //对象
        let person = {name:'张三',age:22,gender:'男'}
        let obj = Object.keys(person);  //for...of也不能直接遍历对象，跟for一样需要转换
        for(var key of obj){
            console.log(key+person[key]);
        }

4、forEach方法

          (1) 可以遍历对象以外的集合 （数组，Set） 
        （2）不能使用break和continue

        let arr = [1,2,3,4,5,6]
        let newArr = arr.forEach(function (item, index,arr) { //参数3：Array---正在遍历的数组
            console.log(item,index,arr); //item每个元素，index下标，arr正在遍历的数组

        })

总结

        (1) for、for..of和forEach不能直接遍历对象，for...in可以

        (2) for、for...in和for..of能中断循环(使用break,continue)；forEach不可以。

        (3) for...in遍历的是数组的索引，for...of遍历数组元素值。

        (4) forEach（item，index，arr）不能同时遍历多个集合,在遍历的时候无法修改和删除集合数据。