在实际的开发过程中,一般都会用到for循环,都可以用来遍历,但是这几个之间又存在细微的差别!

一,传统的for循环;

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

优点: 如果循环的次数比较多的时候,相较于其他的循环方法,运行的时间会更快;如果循环的次数比较少的时候,运行时间几乎差不多

缺点: 1,这种传统方法,无法只关注元素本身,还得维护变量i和以及边界length;

    2,  当嵌套的循环很多层的时候,需要维护多个变量i,代码会变得很复杂

二,forEach;

var arr = ['good', 'good', 'study'];
arr.forEach(item => {
    console.log(item);
});

优点:不用维护变量i和边界length

缺点: 在循环的过程中,如果有break或者continue的时候,会报错(只能一个循环走到底,不能中途退出循环)

三,for....in

var arr = ['good', 'good', 'study'];
for (var i in arr) {
    console.log(arr[i]);
};

for..in 是一种精准的迭代语句,可以枚举对象的所有可枚举的属性,除了可以遍历数组,对象之外,还可以遍历字符串

优点:不需要维护变量i以及边界length,也支持break以及continue等操作

var father = {
    fatherArr: 'attr'
};
var instance = Object.create(father);
instance.a = 1;
instance.b = 2;
instance.c = 3;
for (var i in instance) {
    console.log(instance[i]);
};
1,2,3,attr

缺点:for..in语句除了可以枚举自身的属性之外,还可以遍历原型身上的属性,同样的,数组也存在这个问题,使用的时候需要添加obj.hasOwnProperty()属性的判断

四: for..of;

var attr = ['good', 'good', 'study'];
for (var i of attr) {
    console.log(attr[i]);
};

优点:不用维护变量i和边界length,可以使用break,continue等操作,也不存在for..in的遍历原型的属性等问题

缺点:但是for..of是es6才提出来的,所以存在兼容性问题,如果需要兼容低版本浏览器的话,不建议使用;同时只能用户遍历可迭代的对象,不可迭代对象直接报错