循环语句 for , forin , forEach

Posted 2020-09-04 小小李的新征程

前段时间被问到js中for，forin，forEach之间的相同点与不同点，发现并没有认真整理过，只是平时使用，今天进行一下整理，加强记忆，首先相同点是都可对数组进行循环遍历，下面主要简单讲解不同之处。

 

for循环是对数组的元素进行循环，不能引用非数组对象

var newArr = [1,2,3];

for(var i=0, len=newAr.length ; i<len ; i++) { // i为number类型
    console.log( newArr[i] );
}

 

for...in语句用于对数组或者对象的属性进行循环操作

var newArr = [‘jack‘,‘marry‘,‘yoyo‘];
for(var i in newArr) { // i为string类型
     console.log( i +‘.....‘ + newArr[i] );
}
// 0.....jack
// 1.....marry
// 2.....yoyo

var newObj = {name : ‘lili‘ , age: 22 , sex:‘female‘};
for(var obj in newObj) {
   console.log( obj + ‘.....‘+ newObj[obj] );
}
// name.....lili
// age.....22
// sex.....female

for...in 拓展请参考：http://www.jb51.net/article/44028.htm

Tip：for...in循环不会按照属性的下标来排列输出。执行时按chrome执行，先把当中的非负整数键提出来，排序好输出，然后将剩下的定义时的顺序输出。由于这个设定，让avalon的ms-with对象排序不按预期输出了。只能强制用户不要以纯数字定义键名

var obj ={"first" : "first",
            "zoo" : "zoo",
              "2" : "2",
             "34" : "34",
              "1" : "1",
         "second" : "second" };
for (var i in obj) { 
      console.log(i); 
};

// 1
// 2
// 34
// first
// zoo
// second

var newObj ={"banana" : "banana",
               "pear" : "pear",
              "apple" : "apple",
              "peach" : "peach" };
for (var i in newObj ) { 
      console.log(i); 
};

// banana
// pear
// apple
// peach

 

forEach是ECMA5中Array新方法中最基本的一个，就是遍历，循环。

Tip: ie9以下的浏览器不支持此方法(⊙﹏⊙)

var newArr = [‘A‘,‘B‘,‘C‘,‘D‘];

newArr.forEach(function(val, index, arr){
   console.log(val + ‘---‘ + index + ‘--‘+arr);

});
// A---0--A,B,C,D
// B---1--A,B,C,D
// C---2--A,B,C,D
// D---3--A,B,C,D

// 与jquery中$.each对比
$.each(newArr , function(index, val, arr) {
     console.log(val + ‘---‘ + index + ‘--‘+arr);
});

 

备注：自己查找资料整理，仅供参考，谢谢~~