javascript不同的循环方式

1、说起循环，我么有基本的for循环，类似于这样用：

var arr = [1,2,3];
//循环输出
for(var i = 0; i < arr.length; i++){
    console.log(arr[i]);
}

但是这有一个问题，我们循环遍历，不仅仅是数组，如果遍历对象怎么办？这就需要我们了解我们的另一个循环方式，for…in

2、for…in循环方式的提出，是针对解决对象的遍历问题。一般我们这样使用：

var object = {'name':"mapbar_front",'age':25,'occupation':'web_front'};
//循环输出
for(var i in object){
    console.log(i,object[i]);
}

输出的结果是：

但是随着大量的programmer的使用，发现一个问题，数组的本质也是一个对象，我们给数组这个对象添加一条属性，会出现什么问题呢？（这里最大的问题就是使用for in循环出现length不匹配的问题，下标也会出现错乱）；
实例如下：

var arr = [1,2,3];
arr.name = 'mapbar_front';
for(var i in arr){
   console.log(i,arr[i]);
}
console.log(arr.length);//3,但是长度应该是4才对
console.log(arr[3]);//undefined

这里的输出结果如下所示：

面对解决这样的问题，我们其实很少使用for…in循环
一般而言,我们使用的是一个数组的forEach方法，基本的使用方式是这样的：

var arr = [1,2,3];
arr.name = 'mapbar_front';
arr.forEach((item)=>{
    console.log(item);
});
//1,2,3.不包含'mapbar_front'

3、forEach是作为数组的一种解决方案，但是我们的遍历应该有一种合适的语法结构来解决，而不是依靠某一个方法。这就是今天的主角for…of循环。（完美的解决了前面所提出的问题）；

基本的使用方式是：

var a = ['A', 'B', 'C'];
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
for (var x of a) { // 遍历Array
    console.log(x);
}
for (var x of s) { // 遍历Set
    console.log(x);
}
for (var x of m) { // 遍历Map
    console.log(x[0] + '=' + x[1]);
}

for…of 循环的好处是能够循环任何类型的对象，包括Array、Map、Set类型等等。（在新的ES语法规则中，这三种类型被统一描述为iterable类型。）