最近在处理一些偏逻辑的代码块经常遇到遍历问题，接下来跟大家一起温习一下有关于JS的遍历吧。

js数组遍历1、for循环

//不缓存var arr = [5,2,0,1,3,1,4];for ( var i = 0; i

for循环优化版：在JS性能优化中，有一个常见的小优化，即缓存数组长度

//缓存var arr = [5,2,0,1,3,1,4];var len = arr.length;for ( var i = 0; i <len; i ){ console.log(arr[i]);//遍历所得子项}

第二种方式是大多数的程序猿推荐的一种写法，据说是有利于性能提升，个人没有检测过，但看过一篇文章可以参考：https://blog.crimx.com/2015/04/21/should-array-length-be-cached-or-not/虽然优化版写法不太优雅，但有时候还真用得上，举个栗子：

//不缓存var divs = document.getElementsByTagName(“div”), i, div;for( i=0; i

。。。。。。才第一个，篇幅有点长，还是简化简说吧

2、map映射

map遍历支持使用return语句，和forEach都是es5新增的数组方法，所以ie9以下的浏览器还不支持。

var arr = [5,2,0,1,3,1,4];//返回新数组，不改变旧数组arr.map(function(v,i){ console.log(i ‘–‘ v);});var temp=arr.map(function(v,i){ return v*v})console.log(temp);3、forEach

跟map一样是数组自带的方法，性能比for还弱，用的比较少，不能使用break语句中断循环，也不能使用return语句返回到外层函数。

var arr = [5,2,0,1,3,1,4];arr.forEach(function(v,i){　　console.log(i ‘–‘ v);})4、for-of遍历

es6新增,很强大，支持数组、对象、字符串的遍历

var arr = [5,2,0,1,3,1,4];for( let i of arr){ console.log(i);}

与forEach()不同的是，它可以正确响应break、continue和return语句。

对象的遍历1，for-in遍历

for-in是为遍历对象而设计的，用于循环遍历数组或对象属性，遍历对象简洁方便。for in循环里面的index是string类型的，代码每执行一次，就会对数组的元素或者对象的属性进行一次操作，不建议用来遍历数组。

var obj= {j:5,a:2,v:0,a:1,s:3,c:1,r:4,p:5,t:2,};for (var index in obj){ console.log(index ‘——‘ obj[index]);}2、使用Object.keys()遍历

Object.keys(obj)参数：要返回其枚举自身属性的对象返回值：一个表示给定对象的所有可枚举属性的字符串数组可用于数组、对象、字符串，这里只说对象的，其它的自己面向百度喔！

let person = {name:”陈奕迅”,age:3,address:”香港”,getName:function(){}}Object.keys(person) // [“name”, “age”, “address”,”getName”]

遍历对象

var obj= {j:5,a:2,v:0,a:1,s:3,c:1,r:4,p:5,t:2,};Object.keys(obj).forEach(function(key){ console.log(key ‘—–‘ obj[key]);});3、使用Object.getOwnPropertyNames(obj)遍历

定义：返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性)

var obj= {j:5,a:2,v:0,a:1,s:3,c:1,r:4,p:5,t:2,};Object.getOwnPropertyNames(obj).forEach(function(key){ console.log(key ‘—–‘ obj[key]);});