for...of/ for..in/forEach循环的区别

一、循环数组相同点

1、for…in循环遍历数组

    var arr = [1,2,3,4]
    for(var index in arr){
        console.log(arr[index);
    }     //打印结果为1，2，3, 4

2、for…of循环遍历数组

     var arr = [1,2,3,4]
     for(var value of arr){
         console.log(value);   //打印结果为：1，2，3，4
     }

3、for…in是否可以使用break、continue、return 下面我们将他嵌套在函数当中。

    var arr = [1,2,3,4]
    function fn(){
       for(var index in arr){
           if(index == 2)
           // break;    //1，2
           // continue     //1，2，4，
           return    //1，2
        console.log(arr[index]);
        
    }
}
fn();

4、for…of是否也可以使用break、continue、return 下面也将代码演示一下

    var arr = [1,2,3,4]
     function fn(){
        for(var value of arr){
            if(value == 2)
            //break;  //1
            //continue;  //1,3,4
           return;   //1
         console.log(value);
     }
 }
 fn();

通过打印结果可知for…in/ for…of 都是可以使用break、continue、return 的

二、循环数组不同点：

     Array.prototype.method = function(){
        console.log(this.length);
     }
     let arr = [1,2,3,4]
     for(let index in arr){
         console.log(arr[index]);
         console.log(typeof index);
     }

总结for..in遍历数组的特点
遍历的索引为字符串类型
遍历顺序可能不是按照数组顺序（随机顺序）
使用for…of 会遍历数组所有的可枚举属性，包括原型

    var arr = [1,2,3,4]
     Array.prototype.id = 123
     arr.name = 'anni'
     function fn(){
        for(var value of arr){
         console.log(value);
     }
}
fn();

总结for..of遍历数组的特点
for…of 遍历数组的只是数组内部的元素，而不包括数组对象的原型属性和对象属性

区别：

• for…in 更适合遍历对象，不适合遍历数组(因为输出的顺序是不固定的)
• for…in 只是遍历数组的索引（键名），而for …of 遍历的是数组的值
• for…of 适用遍历数组/字符串/map/set 等迭代器对象的集合，但是不能遍历普通对象

三、forEach语句

forEach（）方法用于调用数组的每个元素，并将元素传递给回调函数。

var array = ['a','b','c']
array.forEach(function(element){
   console.log(element)
})      //打印结果 a,b,c

总结：
使用简洁，
不用关心索引问题
不能遍历对象
不可以使用continue语句跳过一次循环和使用break语句结束循环

四、总结：

• for…in 可以遍历数组和对象，for…of 不能遍历对象
• for…in循环不仅遍历数字键名，还会遍历手动添加的其他建，甚至包括原型链上的建
• 具有迭代器对象才可以使用for …of
• for…of 与forEach () 不同的是，它可以响应break. continue, return 语句
• 遍历数组使用for…of, 遍历对象使用for…in