JavaScript中forEach，for in，for of的区别

在学习TypeScript时，又遇见了for of，一直以来对于这三者之间的区别都有些模糊，现在就通过几个简单的例子，做一下系统的区分。 上代码：

var arr = [1,2,3,4,5,6];
console.log(arr);

运行结果： 先简单输出一下，方便接下来进行比较；

一：forEach（）

var arr = [1,2,3,4,5,6];
arr.forEach(function(value){
    console.log(value);
});

运行结果： 尝试添加break语句，报错信息如下： 分析： 使用forEach方法可以将数组中的元素进行循环遍历输出；但是有一个缺点就是他不能在某一个条件下跳出循环。

二：for in

var arr1 = [11,22,33,44,55,66];
for (var n in arr1){
    console.log(n);
}；

运行结果为： 卧槽？？？？？ 什么情况？？循环中输出的n竟然不是数组中的元素。 在使用for in循环时，循环的n是下标！是数组的键值。 修改代码：

var arr1 = [11,22,33,44,55,66];
for (var n in arr1){
    console.log(arr1[n]);
}；

运行结果： 分析： 此时已经可以正常输出数组的元素了； 在使用for in循环时，他循环的是数组集合中的下标，即键的名字；在js中每一个对象和数组都是一个个键值对的集合，在这个数组中一共有6个键值对，那么他所循环的就是数组的键Key而不是value； for in循环的方法虽然可以用来遍历数组，但是他被设计出来实际上是为了遍历对象的属性的；因此：for in的作用是遍历对象【注意for in有时会遍历出一些你不想要的东西，他会把原型中的属性方法遍历出来，有一种恶心的感觉】

var obj = {
    arr1:[1,2,3],
    arr2:[3,4,5],
    age:12,
    name:"zs"
};
for(var n in obj){
    console.log(n + "：" + obj[n]);
}

运行结果为：

三： for of

在forEach和for in的基础上ES6做出了拓展，而身为JavaScript的超集TypeScript他也包含了for of的强大功能： 1：他可以在满足一定条件的情况下退出循环（弥补forEach的缺陷）

var arr2 = [11,22,33,44,55,66];
for (var n of arr2){
    if (n > 3){
        break;
    }
    console.log(arr2[n]);
}

运行结果： 分析： 从上述可以看出for of的遍历基础仍然是key值； 而且他也可以在满足一定条件的情况下break出来； 在TypeScript中的for of循环中不会像for in循环一样将不该遍历的遍历出来；

总结

1：forEach 缺点是不能够break； 2：for in虽然可以用来遍历数组，但是他主要是用来遍历对象的；而且他还会将原型中的方法遍历出来； 3：for of是这两者的强化版，可以break，也不会遍历出原型中的东西；

简单的将这三者进行自认为系统的总结，如果有错误非常欢迎能够指正