js中数组的遍历方法(JS总结——数组,对象遍历的方法)
对于数组或者对象的遍历 ,筛选 ,提取等操作是前端开发中经常有的需求 ,不要再只会写普通的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)在数组的遍历过程中 ,累加器由每一个则执行的函数处理后传递给下一个执行的函数 ,最终返回出来 。
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!