JS中数组的reduce方法

1.reduce方法的介绍
reduce()时归并类方法。

定义和用法
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。

reduce() 可以作为一个高阶函数,用于函数的 compose。

注意: reduce() 对于空数组是不会执行回调函数的。

语法

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

JS中数组的reduce方法_第1张图片

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) 

你可能感兴趣的:(1024程序员节,前端,es6,javascript,typescript,ecmascript,vue.js)