为了账号安全,请及时绑定邮箱和手机立即绑定

JS数组常用遍历方法用法及其各项区别

  • for,forEach,for in,for of的使用及区别
  • filter,map的使用及区别
  • includes,find的使用及区别
  • some,every的使用及区别
  • reduce的使用及常见用法

for,forEach,for in,for of的区别:

    var arr = [1,2,3,4,5];
    arr.p = 'private'

for

    for(let i = 0;i<arr.length;i++){
        console.log(arr[i])
    }

1、for循环不到数组的私有属性
2、可以使用return|break|continue终止|结束循环
3、for属于编程式写法

forEach

    arr.forEach((item)=>{
        console.log(item);
    })

1、forEach循环不到数组的私有属性
2、return|break|continue不起作用
3、forEach属于声明式写法,不关心具体实现

for in

    for(let key in arr){
        console.log(key)
    }

1、可以遍历到数组私有属性的值
2、key的类型是string型
3、可以使用return|break|continue终止|结束循环
4、循环顺序不一定按照数组索引值来循环

for of

    for(let val of arr){
        console.log(val);
    }

1、不可以遍历数组的私有属性的值
2、val的值就是arr项的值
3、可以使用return|break|continue终止|结束循环

filter,map

方法名 filter map
是否操作原数组 不会 不会
返回结果 过滤后的新数组 新数组
回调函数的返回结果 如果返回true这一项放到新数组中 回调函数中返回什么这一项就是什么

filter

    [1,2,3,4].filter((item)=>{
        return item>3
    })

map

    var li = [1,2,3,4].map((item)=>{
        return `<li>${item}</li>`
    })
    <!--
        1、li的值为:['<li>1</li>','<li>2</li>','<li>3</li>']
    -->
    var liList = li.join('');//返回结果为:'<li>1</li><li>2</li><li>3</li>'

includes返回的是boolean

    var arr = [1,2,3,4,5];
    arr.inclueds(7);//arr数组里有7吗?没有返回false

find

    var arr = [1,2,3,4];
    var result = arr.find(function(item,index){
        return item.toString().indexOf('5')>-1
    })
    // result:undefined
     var result2 = arr.find(function(item,index){
        return item.toString().indexOf('2')>-1
    })
    //result2:2

1、回调函数中返回true停止循环并返回那一项的值,未找到返回undefined
2、不改变原数组

some&every

    var arr = [1,2,3,4,5];
    var someArr =  arr.some(function(item){
        return item>3
    });
    //someArr : true
    var everyArr = arr.every(function(item){
        return item<0
    });
    //everyArr:false

some:找true,找到true后停止循环,返回true,找不到返回false
every:找false,找到false后停止循环,返回false。找不到返回true
(os:这俩真是一对儿)

reduce:不改变原数组值

    var arr = [1,2,3,4,5];
    arr.reduce(function(prev,next,index,item){
        console.log(arguments)
    })
    <!--
        第一次循环:
            prev:代表数组的第一项
            next:代表数组的第二项
            index:索引
            item:当前数组
        第二次循环:
            prev:前两项的和
            next:数组的第三项
    -->

求数组的累加和:[1,2,3,4,5,…,100]

    var arr = [1,2,3,4,5,...,100];
    arr.reduce(function(prev,next){
        return prev+next;//本次的返回值会作为下次的prev的值
    })

已知数组:[{price:30,count:1},{price:20,count:2},{price:40,count:3}]
求:price*cout的各项累加和

    var arr = [{price:30,count:1},{price:20,count:2},{price:40,count:3}]
    let sumArr = arr.reduce(function(prev,next){
        return prev+next.price*next.count 
    },0);//默认指定第一次prev的值为0

多维数组转一维数组
[[1,2,3],[2,3,4],[5,7,8]];

    var arr = [[1,2,3],[2,3,4],[5,7,8]];
    var newArr = arr.reduce(function(prev,next){
        return prev.concat(next)
    });
    console.log(newArr);
    <!--[1,2,3,2,3,4,5,7,8]-->

但是如果数组长这个样子要怎么转一维数组且去重呢,一起来思考一下吧?
var arr = [ [1, 2, 2], [3, 4, 5, 5], [6, 7, 8, 9, [11, 12, [12, 13, [14] ] ] ], 10];
终于过完年了,新年第一篇总结,数组的常用方法及其区分~
2019常翻看常总结

点击查看更多内容
3人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
28
获赞与收藏
163

关注作者,订阅最新文章

阅读免费教程

感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消