for、foreach、for-in、for-of之间的区别与联系

条条道路通罗马，但走最短的道路往往更加轻松和高效。

我们在进行javascript(JS)编程时，能够熟练的使用各种标准语法，做到一个萝卜一个坑程度，这样往往能使编写出来的代码更加整洁和高效。

今天我们来谈谈for、foreach、for-in和for-of四种循环语法。

毋庸置疑这四个语法都是在我们编程过程中用来做数据循环的，这是它们之间的共同点，这一点也就这样一笔带过，我们主要探讨的是它们的不同点，如下：

for:这是JS诞生之日起就已经存在的循环语法了，我们当然可以在任何需要用到的地方使用它，但在如今前端发展如火如荼的环境下代码就看起来不是很简洁了，例如循环一个数组就得写如下一串代码：

var testArr = [1,2,3,4];
for (var i = 0; i < testArr.length; i++) {
    console.log(testArr[i]);
}

foreach:这个循环语法是ES5发布后出现的它可比for循环语法要简洁多了，不信你看（本来想在这里加个滑稽表情包的，嘻嘻），循环一个数组如下：

//第一种写法
testArr.forEach(function( item ){
    console.log(item);
});
//第二种写法
testArr.forEach(function( item, index ){
    console.log(item);//数组中的每个元素
    console.log(index);//每个元素对应的下标
});

这种语法虽然简洁但有一个小缺陷，当循环数组时，我们可能需要在某个条件下中断循环(break)或者终端此次循环继续下一次循环（continue）或者return，这时foreach就不行了，当然我们依旧可以使用for循环来break、continue、return等。

for-in:这个循环语法也是ES5发布后出现的，但这个语法比较适合循环对象，而不是数组，这是为什么呢？因为这个循环语法循环数组时返回的下标是字符型的数字，当我们做数学运算时就很不方便，例如：

for (var index in testArr){
    console.log(typeof index);
    console.log(index + index);//这里的+号为字符串拼接字符串
}

循环对象就适合多了，例如：

var obj = {
    one: "你好",
    two: "你好啊",
    three: "你好啊啊"
};
for (var value in obj){
    console.log(value);
    console.log(obj[value]);
}

for-of:这是ES6发布后出现的新循环语法，这语法是当前最简洁的语法了，它避开了for-in的缺陷，有forEach没有的break、continue、return语句，例如：

for(var value of testArr){
    console.log(value);//直接取出数组中的每个值
}
//break
/**输出
*1
*/
for(var value of testArr){
   if (value == 2) {
        break;
    }
    console.log(value);
}
//continue
/**输出
*1
*3
*4
*/
for(var value of testArr){
   if (value == 2) {
        continue;
    }
    console.log(value);
}
//return
/**输出
*1
*/
function testfun(){
    for(var value of testArr){
       if (value == 2) {
        return;
        }
        console.log(value);
    }
}
testfun();

for-of不仅仅支持数组遍历还支持大多数类数组对象、字符串遍历、set、map对象，例如：

//输出：
/**
*a
*b
*c
*d
*/
var str = "abcd";//字符串
for (var value of str){
    console.log(value);
}
//输出：
/**
*1
*2
*3
*/
var test = [1,2,3,2,3,3];
var set = new Set(test);
for (var value of set ){
    console.log(value);
}
//输出：
/**
*one,1
*two,2
*/
var map = new Map();
map.set("one","1");
map.set("two","2");
for (var [key, value] of map){
    console.log(key+","+value);
}

---------------------------------------------------end-------------------------------------------------------------------------