js遍历小结

一、数组遍历方式：

1.for循环
这个算是最长接触的数组遍历方式，这里不多说，但是补充的一点就是for循环的优化。上例子！

• 优化前

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

• 优化后

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

2.while以及do while
这里不在详细介绍，都是条件返回true时执行循环体，但是while是先判断后执行循环体，但是do while是先执行一次循环体后判断条件。
3.foreach
遍历数组中的每一项，没有返回值，对原数组没有影响，不支持IE

var resData=[1,2,3,4]
	resData.forEach((item,index,array)=>{
		item=item+1
	})
	console.log(resData)
//参数：value数组中的当前项, index当前项的索引, array原始数组；
// (4) [1, 2, 3, 4]改变item并没有修改原数组resData

4.map循环
map的回调函数中支持return返回值；相当于把数组中的这一项item改变后克隆出来赋给新数组（并不影响原来的数组，只是相当于把原数组克隆一份，把克隆的这一份的数组中的对应项改变了）；来个例子！

var ary = [12,23,24,42,1]; 
var res = ary.map(function (item,index,ary ) { 
    return item*10; 
}) 
console.log(res);//-->[120,230,240,420,10];  原数组拷贝了一份，并进行了修改
console.log(ary);//-->[12,23,24,42,1]；  原数组并未发生变化

foreach 和map都是数组遍历，两者的区别就在于 foreach 没有返回值，而 map 会返回每项执行完毕后数据组成的新数组。所以在选择时，如果不需要返回新数组，就选择 foreach ， 如果需要得到新数组，就选择 map 。

5.for…in
用于对数组或者对象的属性进行循环/迭代操作。用自己的话总结得到的i就是key值。

//数组
var resData=["a","b","c","d"]
	for (i in resData){
		console.log(i,resData[i])
		resData[i]+="---"
	}
	console.log(resData)
 //0 a
 //1 b
 //2 c
 //3 d
//(4) ["a---", "b---", "c---", "d---"]


//对象
var resData={"1":"one","2":"two","3":"three","4":"four"}
for (i in resData){
	console.log(i,resData[i],resData.i)
	resData[i]+="---"
}
console.log(resData)
//1 one undefined
//2 two undefined
//3 three undefined
//4 four undefined
//{1: "one---", 2: "two---", 3: "three---", 4: "four---"}

6.for…of
for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for…of 循环，以替代 for…in 和 forEach() ，并支持新的迭代协议。for…of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等。此外它还可以正确响应break、continue和return语句。是不是很强大。但是for of也有自己的短板，不能像for in那样遍历普通对象。如果实在想用for of来遍历普通对象需要先通过Object.Keys()获取key数组再去forof这个keys数组。

• 推荐在循环对象属性的时候，使用for…in,在遍历数组的时候的时候使用for…of。

• for…in循环出的是key，for…of循环出的是value

7.filter函数
过滤通过条件的元素组成一个新数组， 原数组不变

8.some函数
遍历数组中是否有符合条件的元素，返回Boolean值

9.every函数
遍历数组中是否每个元素都符合条件， 返回Boolean值

二、对象遍历方法

其实在数组遍历的方法中已经有几个提及的方法同样可以遍历对象比如for…in以及for…of
1.for…in方法：
这个方法应该算是遍历对象的时候比较常用的遍历方式了吧。看例子吧：

var obj = {'0':'a','1':'b','2':'c'};

for(var i in obj) {

     console.log(i,":",obj[i]);

}

2.Object.keys()
返回一个数组,包括对象自身的所有可枚举属性。得到这个数组后就可以使用数组遍历的方法来遍历对象了。

 var obj = {'0':'a','1':'b','2':'c'};

 Object.keys(obj).forEach(function(key){

     console.log(key,obj[key]);

});

3.Reflect.ownKeys(obj)遍历
返回一个数组,包含对象自身的所有属性,不管属性名是Symbol或字符串,也不管是否可枚举.

var obj = {'0':'a','1':'b','2':'c'};
Reflect.ownKeys(obj).forEach(function(key){

console.log(key,obj[key]);

});

4.Object.getOwnPropertyNames(obj)遍历
返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性).

var obj = {'0':'a','1':'b','2':'c'};
Object.getOwnPropertyNames(obj).forEach(function(key){

    console.log(key,obj[key]);

});

前端菜鸟的一点小总结，希望路过的大神看到不对的地方，多多指教指导哈！鞠躬鞠躬~