美文网首页
JS中数组的reduce方法

JS中数组的reduce方法

作者: 空空雨夜 | 来源:发表于2021-03-13 01:16 被阅读0次

    1.reduce方法的介绍

    reduce()时归并类方法。

    1.1 reduce(fn,value):

    1.1.1 第一个参数是一个函数,每次遍历都会调用的函数
    fn(preview,current,index,arr){
        // 第一个参数是前一个值
        // 第二个参数是当前值
        // 第三个参数是当前元素索引
        // 第四个参数是引用的数组
    }
    
    1.1.2 第二个参数是:归并基础的初始值

    2.reduce()方法一个参数和两个参数的区别

    2.1 只传一个参数
    let arr = [2 ,4 ,5,3,1]
    let result = arr.reduce((preview, current) => {
        return preview + current
    })
    console.log(result) //15
    

      上面的代码用于计算数组的总和。reduce方法之传入了匿名函数,函数只接收两个参数,分别是前一个值preview,当前值current。当reduce方法没有传入第二个参数时,第一次循环的前一个值为数组的第一项,当前值则为数组的第二项。。函数返回的是preview + current的结果会成为第二次循环preview的值,此时的当前值则为数组的第三项。后面的循环以此类推。

    let arr = [2 ,4 ,5,3,1]
    let result = arr.reduce((preview, current) => {
        console.log('前一个值:' + preview)
        console.log('当前值是:' + current)
        return preview + current
    })
    console.log(result)
    // 前一个值:2
    // 当前值是:4(第一次循环)
    // 前一个值:6
    // 当前值是:5(第二次循环)
    // 前一个值:11
    // 当前值是:3(第三次循环)
    // 前一个值:14
    // 当前值是:1(第四次循环)
    // 15(最终返回的值)
    
    2.2传两个参数
    let arr = [2 ,4 ,5,3,1]
    let result = arr.reduce((preview, current) => {
        console.log('前一个值:' + preview)
        console.log('当前值是:' + current)
        return preview + current
    }, 10)
    console.log(result)
    // 前一个值:10
    // 当前值是:2(第一次循环)
    // 前一个值:12
    // 当前值是:4(第二次循环)
    // 前一个值:16
    // 当前值是:5(第三次循环)
    // 前一个值:21
    // 当前值时:3(第四次循环)
    // 前一个值:24
    // 当前值是:1(第五次循环)
    // 25(最终返回的值)
    

      上面的代码reruce方法传入两个参数,此时前一个值为第二个参数的值,当前值为数组的第一项

    3. reduce()的应用

    3.1 计算数组的和
    let arr = [1, 2, 3, 4, 5]
    let result = arr.reduce((preview,current) => {
        return preview + current
    })
    console.log(recult) // 15
    
    3.2 简单的数组去重
    let arr = [1, 2, 3, 4, 5, 2, 2, 3, 4]
    let result = arr.reduce((preview,current) => {
        if(!preview.includes(current)){
            preview.push(current)
        }
        return preview
    }, [])
    console.log(result) // [1, 2, 3, 4, 5]
    
    3.3 统计每个值,在数组中出现的次数
    let arr = [1, 2, 3, 4, 5, 2, 2, 3, 4]
    let result = arr.reduce((preview,current) => {
        console.log('前一个值:' + preview)
        console.log('当前值是:' + current)
        if(preview[current] !== undefined){
            preview[current] ++
        } else {
            preview[current] = 1
        }
        return preview
    }, {})
    console.log(result)
    

    相关文章

      网友评论

          本文标题:JS中数组的reduce方法

          本文链接:https://www.haomeiwen.com/subject/lbitcltx.html