JavaScript 的 for 循环

JavaScript 里头有四种 for 循环，下面将其一一介绍

其一，最基本的

大部分语言都具备的 for 循环，长相普通，是为标准 for 循环

var sum = 0;
for (var i=0;i<101;i++){
    sum += i;
}
console.log(sum); // 5050

适用于有索引的循环，比如数组

其二，for…in

也是大部分语言具备的 for 循环，比如 python 就只有这种 for 循环。在 JavaScript 中，可以作用于对象和数组上

遍历对象

var o = {
    name:"Hehe",
    age:20,
    city:'Beijing'
};

for(var key in o){
    if (o.hasOwnProperty(key)) {//过滤掉继承的属性
        console.log(key +" : " + o[key]);
        // name : Hehe
        // age : 20
        // city : Beijing
    }
}

遍历对象得到的是对象的属性，可以通过属性得到属性值

遍历数组

准确来说，Array 也是对象，但 Array 比较特殊，来看看遍历出的是啥

var arr = ['A','B','C'];
for(var i in arr){
    console.log(i); // '0' '1' '2'
    console.log(arr[i]); // 'A', 'B', 'C'
    console.log(isNaN(i)); // false false false
}

遍历出的是数组的索引，需要注意的是打印出来的索引是 String 而非 Number

其三，for…of

ES6 引入了一个新的 for 循环，主要针对 ES6 引入的 iterable 类型，其中 Array、Set 和 Map 都属于 iterable 类型

for…of 和 for…in 写法是一样的，但为啥要弄个新的呢，因为 for…in 是作用于对象的，我们知道 Array 也是对象，那就会存在一个问题，比如

var arr = ['A','B','C'];
arr.name = 'Hee'
for(var i in arr){
    console.log(i); // '0' '1' '2' 'name'
}

因为对象时可以随意添加属性的，所有如果给数组添加一个属性，在用 for…in 遍历的时候，就会把这个属性也打印出来，但是用 for…of 则不会

var arr = ['A','B','C'];
arr.name = 'Hee'
for(var i of arr){
    console.log(i); // 'A' 'B' 'C'
}

而且，输出的不再是数组的索引，而是数组的值

对于 Set 和 Map 的遍历

var  s = new Set(['A','B','C']);
var m = new Map([[1,'A'],[2,'B'],[3,'C']]);
for (var i of s){
    console.log(i); // 'A','B','C'
}

for (var i of m){
    console.log(i); // [1,'A'] [2,'B'] [3,'C']
}

注意，for…in 对 Set 和 Map 无效

其四，forEach

forEach() 方法是 ES5.1 引入的，iterable 内置了 forEach 方法，它接收一个函数，回调自身元素和自身

var arr = ['A','B','C'];
var  s = new Set(['A','B','C']);
var m = new Map([[1,'A'],[2,'B'],[3,'C']]);

arr.forEach(function(element, index, array){
    // element: 指向当前元素的值
    // index: 指向当前索引
    // array: 指向Array对象本身
    console.log(element + ', index = ' + index);
});

s.forEach(function(element, sameElement, set){
    // 因为 Set 无索引，所以第二个参数就是元素本身
    console.log(element + ', sameElement = ' + sameElement);
});

m.forEach(function(value, key, map){
    // Map 好理解，分别是 value 对应值，key 对应键， map 对应本身
    console.log(key + ' : ' + value);
});

小总结，打完收工！