• for,forEach,for in,for of的使用及区别
  • filter,map的使用及区别
  • includes,finde的使用及区别
  • 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、不返回新数组
5、可以遍历对象,遍历对象时key编程对象的属性名

for of

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

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

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]-->

终于过完年了,新年第一篇总结,数组的常用方法及其区分~
2019常翻看常总结

版权声明:本文为angfl原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/angfl/p/10362159.html