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常翻看常总结