遍历数组和对象的方法

一般的我们遍历数组是用for遍历的

var arr = [2,3,1,5];for( var i=0;i<arr.length;i++){    console.log(arr[i]);}

我们可以使用内置的forEach方法:
此方法用于调用数组中的每个元素，并将元素传递给回调函数。
注意：forEach对于空数组是不会执行回调函数的。forEach不能return，map可以，下文有例子。
forEach支持浏览器ie9以上版本

var sum = 0;var result = arr.forEach(function(item,index){    console.log(item); //每一项    console.log(index); //下标    sum += item;    console.log(sum);})

虽然这个写法简单了许多，但也有不足之处，不能中途中断循环（使用语句）。
map()也可以遍历数组

var arr = [2,3,4,1,66,88];var result = arr.map(function(item,index){    //console.log("数组的每一项：",item,"数组的下标：",index);    return item*10; //这里可以return 这是和forEach的区别})console.log("原数组:",arr);//原数组是不会改变的 原数组: (6) [2, 3, 4, 1, 66, 88]console.log("遍历之后的数组：",result);//遍历之后的数组会改变 原数组: (6) [2, 3, 4, 1, 66, 88]

下面这段代码看不懂没关系，这个是react中的一个场景
主要看下里面的return 便于理解map()方法

<ul className="bannner_container">{       this.state.bannerList.map((item,index)=>{        //console.log(item);        return(            <li key={index} className="banner_li">                <img className="banner_img" src = {item.goodsListImg} />            </li>        )    })}</ul>

forEach和map方法都不兼容IE6-IE8
有兴趣的话，可以看看别人写的
原生JS forEach()和map()遍历的区别以及兼容写法
我们上面提到只能遍历数组，不能遍历对象，那么有没有既可以遍历数组又可以遍历对象呢？
是有的
for……in 既可以遍历数组也可以遍历对象
遍历数组：

var arr = ['xia',22,333];for(var i in arr){    //i为索引值    //arr[i]为数组的每一项    console.log(i,arr[i]);}

遍历对象

var obj = {name: 'xiao',    age: 18}for(var i in obj){    console.log(i); // name age 属性    console.log(obj[i]); // xiao 18 属性值}

for……in遍历是否存在问题？接下来我们看一个例子

var obj = {    'name': 'xiao',    fn: function(){    }}Objct.prototype.clone =  function(){}for( var i in obj){    console.log('对象中的属性：',i); //属性    console.log('对象中的属性值',obj[i]); //属性值}

大家觉得上面的代码会遍历出什么？

对象中的属性：name对象中的属性值： xiao对象中的属性： fn对象中的属性值： function(){}

输出这样的结果对吗？
如果我这样问你，肯定有问题
输出的结果会是什么呢？
其实它不光输出上面这些，还有原型中的方法

对象中的属性：name对象中的属性值： xiao对象中的属性： fn对象中的属性值： function(){}对象中的属性： clone对象中的属性值： function(){}

为了避免输出原型中的方法，我们可以在for in中加一个hasOwnProperty（）方法，该方法的作用是：可以检测一个属性是存在实例中，还是原型中。如果存在实例中返回true，存在原型中返回false。

var obj = {    'name': 'xiao',    fn: function(){    }}Object.prototype.clone =  function(){}for(var i in obj){    if(obj.hasOwnProperty(i)){        console.log("对象中的属性：",i);        console.log("对象中的属性值",obj[i]);    }}

这样就可以输出实例中的属性和方法了。原型中的属性和方法就会屏蔽。
for in遍历对象时还存在一个问题，不能按顺序遍历，看下面代码：

var obj1 = {    name: 'xiao',    1: 'qq',    3: 'aa',    2: 'xx'}for(var i in obj1){    console.log(i,':',obj1[i]);}

结果如下：

1 : qq2 : xx3 : aaname : xiaoclone : function (){}

看明白了吧！
遍历数组正常。

在ES6中，for of方法遍历数组，但不能遍历普通对象，如果遍历对象的话，需要用for in或者内建的Object.keys()方法。

var obj = {    'name': 'xiao',    fn: function(){    }}Object.prototype.clone =  function(){}for( var key of Object.keys(obj)){    console.log(key,':',obj[key]);}

如果你和我一样，渴望掌握这些知识，那么希望你多敲，多总结。

补充：
for in遍历数组和for of 遍历数组。
下面我们看代码

var arr = [11,22,33];Array.prototype.clone = function(){}arr.name = 'xiao';for(var i in arr){    console.log(i,':',arr[i]);}

这样遍历会把原型中的东西也会遍历出来
那么我们看看for of遍历会有是什么样的情况呢？

var arr = [11,22,33];Array.prototype.clone = function(){}arr.name = 'xiao';for(var i of arr){    console.log(i);//看这里哦，注意这里遍历出来的是 数组的每一项，而不是索引值，这也是和for in的不同之处}

还有一个好处就是不会遍历出原型中的属性和方法。
看结果：

112233

理论和实践相结合，才能把一个东西学会，要想真正掌握，光思考和练习远远不够，还需要项目经验。