zoukankan      html  css  js  c++  java
  • 数组的高阶方法map filter reduce的使用

    数组中常用的高阶方法:

      foreach    map    filter    reduce    some    every

    在这些方法中都是对数组中每一个元素进行遍历操作,只有foreach是没有返回值的,reduce是的回调函数中,是有四个参数的,下面说一下他们的基本用法

     
    map:    映射,可以对数组中每个元素进行操作,并逐一返回,生成一个理想的新数组
    arr.map(function(item,index,arr){
        ..............
    })
    
    //map方法内可以传入一个js自带的字段处理函数,需要注意的是传入的函数参数问题
    let arr1 = [1,4,9]
    let newArr1 = arr1.map(Math.sqrt)       //Math.sqrt() 只接受一个参数,所以默认接受的是数组内每一个元素   传入对数组的每一个元素进行开放 
    console.log(newArr1);        //  [1,2,3]
    
    let arr2 = [1,4,9]
    let newArr2 = arr2.map(parseInt)
    console.log(newArr2);        // [1,NaN,NaN]        因为parseInt()可以接受两个参数,第一个参数是处理的数,第二个参数是转换的进制,在这里将数组中的下标当做了第二个参数,所以后两个元素是将4转为1进制,9转为2进制,都是NaN
    
    //map可以对数组中的每个对象进行处理
    let arr3 = [{a:1},{b:2},{c:3}]
    // 对数组中的每个对象元素增加一个y属性,并且将每个新对象返回,组成一个新的数组
    let newArr3 = arr3.map(item => {
        item.y = 0
        return item
    })
    console.log(newArr3);    //[{a:1,y:0},{b:2,y:0},{c:3,y:0}]
    
    //返回对象中指定的字段,组成新数组
    let arr4 = [{a:1,x:2},{a:2,x:2},{a:3,x:2}]
    let newArr4 = arr4.map(item => item.a)
    console.log(newArr4);        //[1, 2, 3]


    filter:过滤(当返回值为ture时,才会返回当前处理的元素):

    //过滤掉数组中不符合的元素
    let arr = [1,2,3]
    ler newArr = arr.map(item => return item > 1)
    
    // 过滤掉数组中空项,转为布尔为false的元素
    let arr = [1,'',undefined,2,3]
    let newArr = arr.filter(item => item)
    
    // 过滤掉数组内不符合条件的对象
    let arr = [{a:1},{a:2},{a:3}]
    let newArr = arr.filter(item => item.a > 1)
    console.log(newArr);    // [{a:2},{a:3}]
    
    //过滤掉指定的空项,将没有x属性的对象过滤掉
    let arr = [{a:1,x:2},{b:1},{c:1,x:3}]
    let newArr = arr.filter(item => item.x)
    console.log(newArr);
    
    // 数组去重
    var arr = [1,2,3,1,2,5,4,3,3,1]
    var newArr = arr.filter((item,index,arr)=>{
    return arr.indexOf(item) === index
    })
    console.log(newArr)
    reduce:
        接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始合并,最终为一个值。
     
     callback(执行数组中每个值的函数,包含四个参数)        
         previousValue(上一次调用回调函数返回的值,或者是提供的初始值(initialValue))
         currentValue(数组中当前被处理的元素)
         index(当前元素在数组中的索引)
        array(调用reduce的数组)      
     
    reduce可以传一个初始值,也可以不传,直接,将previousValue当做初始值
    初始值可以传任何类型的值
    // 不传递初始值,直接以数组内的第一个元素为初始值。没传递初始值时,第一个参数就是上一次回调返回的值,这里的init依次是:1   3   6
    let arr = [1,2,3,4]
    let data = arr.reduce((init,now) => {
        return init+now
    })
    // data 为10
    
    // 传递一个Number初始值,
    //init第一次是初始值10,之后每次都是上一次回调函数返回的值:
    10      11    13    16
    let arr = [1,2,3,4]
    let data = arr.reduce((init,now) => {
        return init+now
    },10)
    //data为20
    
    //传递一个Object初始值.  使对象里的属性和某数组内的元素累加
    let arr = [1,2,3,4]
    let data = arr.reduce((init,now) => {
        init.sum = init.sum + now
        return init
    },{sum:2})
    console.log(data);  // {sum:12}
    
    //对象内的某个属性进行累加
    let arr = [
        {a:1,name:'a'},
        {a:2,name:'b'},
        {a:3,name:'c'},
    ]
    let data = arr.reduce((init,now) => {
        return init + now.a
    },0)
    console.log(data);    // 6
    
    //  查看某字符串,每个字符出现的次数
    var str = 'abccacbbaacaa'
    var obj = str.split('').reduce((init,now) => {
    init[now] ? ++init[now] : init[now] = 1
    return init
    },{})
    console.log(obj); //{a: 6, b: 3, c: 4}
  • 相关阅读:
    外部存储 使用详解
    内部存储 使用详解
    SQLite 使用详解
    SharePerference 使用详解
    Preference 使用详解
    Notification 使用详解
    PopupWindow 使用详解
    Fragment 使用详解
    Dialog 使用详解
    ListView 使用详解
  • 原文地址:https://www.cnblogs.com/mtl-key/p/14487316.html
Copyright © 2011-2022 走看看