循环语句 for , forin , forEach

前段时间被问到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);
});

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

原文地址:https://www.cnblogs.com/hlweng-0207/p/6542137.html