对于数组或者对象的遍历  
  
  
  
  
  
  
 ，筛选 
  
  
  
  
  
  
  ，提取等操作是前端开发中经常有的需求


 


 


 


 


 


 


 

，不要再只会写普通的for循环了 
 
 
 
 
 
 
，虽然普通的for循环已经能完成一切的功能的  
   
   
   
   
   
   
   ，是一个特殊方法

 

 

 

 

 

 

 
，但是针对各种需求
 

 

 

 

 

 

 

，js给我们提供了许多方法               ，来更优雅的遍历
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，来学习一下吧!

1. for in

for in 循环














，数组和对象都可以遍历                      ，item为array的下标
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，或者object的key这样的代码





















，比起for循环可读性能强一些  
  
  
  
  
  
  
 。

2.for of

与for in 不同的是               ，for of只能遍历数组
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，item为数组元素的值

3.Object.keys/values/entries

上面提到了for of无法遍历对象














，那么我们还想通过for of遍历对象怎么办呢

那我们就可以用到以上三个方法了 var obj = { a:1, b:2, c:3, d:4, e:5 } console.log(Object.keys(obj)) console.log(Object.values(obj)) console.log(Object.entries(obj))

可见  
  
  
  
  
  
  
 ，for of无法遍历对象 
  
  
  
  
  
  
  ，但我们可以通过Object.keys/values/entries将对象的keys,values或者keys和values转化为数组


 


 


 


 


 


 


 

，借此遍历

for(var key of Object.keys(obj)){ console.log(key) } for(var value of Object.values(obj)){ console.log(value) } for(var [key,value] of Object.entries(obj)){ console.log(key,value) }

至此 
 
 
 
 
 
 
，我们就用for of +Object.keys/values/entries将数组的keys或者values遍历出来了 
  
  
  
  
  
  
  。

以下的forEach,map,filter,some和every可以一起记忆

3.arr.forEach

一下就都是遍历数组的方法了  
   
   
   
   
   
   
   ，如果想遍历对象

 

 

 

 

 

 

 
，也同上的for of一样
 

 

 

 

 

 

 

，将对象的keys或values转化为数组再进行遍历


 


 


 


 


 


 


 

。

forEach的第一个参数是一个函数               ，可以是箭头函数
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，也可以是普通函数














，看需求进行选择                      ，该函数将在每一次数组元素被遍历时执行 forEach的第二个参数是一个对象
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，如果指定了第二个参数





















，则**如果第一个参数是function               ，**function中的this会指向这个对象
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，如果第一个参数是箭头函数














，那么由于箭头函数的特性  
  
  
  
  
  
  
 ，作用域将不会发生改变 重点1: forEach第一个参数的函数中的传入的参数有三个分别为(item,index,arr),即数组当前数组的元素值 
  
  
  
  
  
  
  ，元素下标


 


 


 


 


 


 


 

，和当前数组 重点2：forEach没有返回值 重点3：forEach不能使用break或continue关键字进行跳出循环 
 
 
 
 
 
 
，如果想跳出循环可以使用return var arr = [1,2,3,4,5] var obj = { a:1 } console.log( arr.forEach(function(item,index,arr){ console.log(item,index,arr) console.log(this) },obj)

4.arr.map

Map与forEach非常的用法非常相似  
   
   
   
   
   
   
   ，区别是forEach没有返回值

 

 

 

 

 

 

 
，而Map有
 

 

 

 

 

 

 

，使用Map可以返回一个与原数组有映射关系的数组

var arr = [1,2,3,4,5] var arr1 = arr.map(function(item,index,arr){ return item *2 }) console.log(arr1)

5.arr.filter

作用:过滤掉函数中返回false的元素

var arr = [1,2,3,4,5] var arr1 = arr.filter(function(item,index,arr){ if (index > 3) return true })

6.arr.some

作用:数组中只要有一个元素的返回值为true 返回值就为true               ，否则返回false

7.arr.every

作用:与arr.some刚好相反
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，数组中只要有一个元素的返回值为false,返回值就为false














，只有全部返回值都为true                      ，才返回true

8.arr.reduce

作用 :对数组进行遍历
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，返回一个值

重点1:reduce的第一个参数是一个函数





















，与前五个方法不同的是               ，此函数并非只有3个参数
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，而是由4个参数,分别为 (accumulator,currentValue,index,arr)如同其字面意思一样














，这4个参数分别是累加器  
  
  
  
  
  
  
 ，当前元素值 
  
  
  
  
  
  
  ，当前元素下标


 


 


 


 


 


 


 

，和整个数组 重点2:reduce的第二个参数是一个值 
 
 
 
 
 
 
，该值为累加器的初始值  
   
   
   
   
   
   
   ，如果不指定初始值

 

 

 

 

 

 

 
，则默认为0 var sum = [0,1,2,3,4].reduce(function(accumulator,currentValue,currentIndex,arr){ return accumulator + currentValue }) console.log(sum)

在数组的遍历过程中
 

 

 

 

 

 

 

，累加器由每一个则执行的函数处理后传递给下一个执行的函数               ，最终返回出来 
 
 
 
 
 
 
。