js中的reduce()方法 讲解 和实现

reduce()

① 介绍:

该方法对数组中的每个元素 按序执行 一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

② 语法以及参数说明:

reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

• accumulator : 上一次调用 callbackFn 的结果。在第一次调用时，如果指定了 initialValue 则为指定的值，否则为 array[0] 的值。

• currentValue : 当前元素的值。在第一次调用时，如果指定了 initialValue，则为 array[0] 的值，否则为 array[1]。

• currentIndex : currentValue 在数组中的索引位置。在第一次调用时，如果指定了 initialValue 则为 0，否则为 1

• array : 调用的数组本身

reduce使用的时候必须要有返回值,作为下次迭代的参数传入.后面实现源码的时候就会知道了,其实在for循环里面嵌套了一个callback函数

③ 使用场景

1. 求数组元素总和,求平均数

// 1. 求数组元素的和
const arr7 = [1, 2, 3, 4, 5]

// reduce要求有返回值的

const sum = arr7.reduce((temp,item,index,array)=>{
    console.log(temp,item); 
    return temp + item
},0)

const avg = sum / arr7.length
console.log(`平均值:${avg}`);

console.log("-------------------------");
console.log(`使用reduce api 求和之后:${sum}`);

// 下面看传统的求数组各个元素的总和的方法
let sum1 = 0;
arr7.forEach((item, index) => {
    sum1 += item
    console.log(index);
})
console.log(`使用forEach api 求和之后:${sum1}`);

accumulator(累加值)	currentValue(当前元素的值)	index(当前元素的索引)
0	1	0
1	2	1
3	3	2
6	4	3
10	5	4

2. 统计数组各个元素出现的个数

// 2. 统计数组里面重复字段出现的个数
const arr4 = ["上海", "北京", "广州", "济南", "北京"]
// 定义一个空数组，用来存储每个元素的出现次数
const countArr = arr4.reduce((temp, item) => {
    // 这个对象里面存在item :"上海","北京"... 等键,就将该键的值加一
    if (temp[item]) {
        temp[item]++
    } else { // 如果不存在,就将该键 加入到空对象中,并赋值表示出现一次
        temp[item] = 1
    }
    // 遍历完之后将这个对象进行返回
    return temp
}, {}) //{} 初始temp 为一个空对象
// 将countArr数组中的元素添加到temp数组中，并返回
console.log(countArr); // {上海:1,北京:2,广州:1,济南:1}

3. 数组过滤

这里可以使用reduce的第四个参数,initialValue初始值我们给他一个[] 空数组,作为累积值（上一次回调函数的返回值或初始值),如果传入第四个参数 这里就是初始值.

如果数组中的某一项 能够整除2 就将该元素放入初始好的[]空数组,相反不能够整除2 我们就放入外面定义好的arr3这个数组里面.

当数组里面全部元素遍历完毕之后,我们再将temp进行一个return返回,这时候我们就拿到原数组里面所有能够整除2的元素了.

// 3. 对数组进行一个过滤 (奇偶数分离)
const numArr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const arr3 = []
const filterNumArr = numArr1.reduce((temp, item) => {
    if (item % 2 === 0) {
        temp.push(item)
    } else {
        arr3.push(item)
    }
    return temp
}, [])
console.log(filterNumArr); // [2,4,6,8,10]
console.log(arr3);//[1,3,5,7,9]

4. 对数组各项进行相同的操作 (增加n倍,缩小n倍...)

这个和上面那个思路相同. 只不过执行的操作不同. 但都是通过内置的for循环对数组中的各个元素进行某个操作的.

// 4. 对数组各项进行相同的操作
const numArr = [1, 2, 3, 4, 5]
const doublenumArr = numArr.reduce((temp, item) => {
    temp.push(item * 2)
    return temp
}, [])
console.log(doublenumArr); // [2,4,6,8,10]

5. 数组去重

如果数组temp 不包含item也就是 arr5里面的各个元素,就将该元素放入temp.

这里使用到数组的另外一个api includes()
includes()方法是用于判断一个数组或字符串是否包含指定的值，并返回一个布尔值。该方法可以用于数组和字符串。

// 5. 数组去重
const arr5 = [2, 2, 3, 3, 5, 3, 5, 9, 9, 10]
const uniqueArr = arr5.reduce((temp, item) => {
    if (!temp.includes(item)) {
        temp.push(item)
    } else {
        console.log("重复的元素", item);
    }
    return temp

}, [])
console.log("数组去重",uniqueArr); // [2,3,5,9,10]

6. 对象属性值的总和

Object.values(cost) 返回该对象所有可枚举属性的值组成的数组

const cost = {
    "snack": 20,
    "cloth": 300,
    "drink": 50,
    "shop": 500
}

// 属性值的总和
// Object.values(cost) 转换为数组
const sum1 = Object.values(cost).reduce((temp, item) => {
    return temp + item
})
console.log(sum1); // 870

④ 实现一个reduce方法

// 自行封装一个reduce
Array.prototype.reduce1 = function (fn, initVal) {
    // 首先定义一个数组
    var arr = this;

    // 如果调用api的人第一个参数不是function,进行一个抛错
    if (typeof fn !== "function") {
        // 第一个参数必须是函数
        throw new TypeError("First argument must be a function");
    }

    // 第一种情况:使用者没有传入初始值initVal
    if (typeof initVal === "undefined") {
        // 初始值是数组的第一个元素
        initVal = arr[0];
        // 循环遍历数组
        for (var i = 1; i < arr.length; i++) {
            // 调用reduce方法
            //每次执行一遍这个fn函数 就会返回一个值 并且重新赋值给initvalue ,并在下次调用
            initVal = fn(initVal, arr[i], i, arr);

        }

    }
    // 第二种情况: 使用者传入了初始值 initVal
    else {
        for (var i = 0; i < arr.length; i++) {
            initVal = fn(initVal, arr[i], i, arr);
        }
    }

    // 最后将这个值进行一个返回
    return initVal

};

// 测试用例 求数组总和 
var arr = [1, 2, 3, 4, 5];
var sum = arr.reduce1((initVal, temp, index, arr) => {
    return initVal + temp;
});

console.log(sum); // 15

使用reduce() 可以搭配其他关于数组的api 实现更多的需求