for循环比较

Posted 2021-01-29 cn-andy

在实际的开发过程中，一般都会用到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语句除了可以枚举自身的属性之外，还可以遍历原型身上的属性，同样的，数组也存在这个问题

四： 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才提出来的，所以存在兼容性问题，如果需要兼容低版本浏览器的话，不建议使用；同时只能用户遍历可迭代的对象，不可迭代对象直接报错