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

在循环遍历数组或对象时，经常会使用到这几种循环方式，主要介绍下它们的区别。先定义一个一维数组：
var arr = [ 1, 2, 3, 4 ];

1. for

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

这里的i是指数组的索引下标，for循环只能通过循环索引值，再通过索引值来获取对应数据。

2. foreach （ES5发布后出现）

arr.foreach((val, key) => {
    console.log(val, key);
})

forEach循环可以定义参数，这里的参数：
参数1：val，直接存储的是数组单元的数据，不需要通过索引值来获取；
参数2：key，存储的是对应数组单元的索引值。

这里的两个参数互不影响，一般在循环数组时，我们通常使用这种循环方式，并且根据需求来考虑定义几个参数。但是，这种循环是不能通过break、continue和return语句来终止循环的。比如当循环数组时，不能在某个条件下中断循环(break)或者中断此次循环继续下一次循环（continue）或者return。

3. for-in （ES5发布后出现）

for in循环，是通过自定义变量k循环遍历数组，同样要通过索引值，来获取数组单元的数据。 但是这里的变量k，存储的数据是字符串类型（字符型的数字），若后续要使用参与相关运算，要先提前转变为数值类型。

for in循环，更多用来循环遍历对象，当循环遍历对象时，变量k中存储的是对象的属性。

for (var index in arr){
    console.log(typeof index);
}

4. for-of （ES6发布后出现的新循环语法）

是当前最简洁的语法，它避开了for-in的缺陷，有forEach没有的break、continue、return语句，例如：

for(var value of arr){
    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
for(var value of testArr){
   if (value == 2) {
        return;
    }
    console.log(value);
}

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