js中数组reduce的使用原来这么简单

更新日期: 2022-06-16阅读: 757标签: reduce

reduce 的学习方法

array.reduce(callback(prev, currentValue, index, arr), initialValue)
//简写就是下面这样的
arr.reduce(callback,[initialValue])
callback (执行数组中每个值的函数,包含四个参数) 
1、prev (上一次回调返回的值,或者是提供的初始值(initialValue)) 
2、currentValue (数组中当前被处理的元素) 
3、index (当前元素在数组中的索引) 
4、array (调用 reduce 的数组) 
需要注意的是 initialValue的值是任意的哈。可以是数组可以是对象。

简单使用 reduce

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
//打印结果:
//1 2 1 
//3 3 2
//6 4 3
//[1, 2, 3, 4] 10

分析上面这个案例

这里可以看出,上面的例子index是从1开始的。 
第一次的prev的值是上一次回调返回的值,或者是提供的初始值。 或者是数组的第一项的值。 
因此第二次的 prev 是3=1+2(上一次回调返回的值 prev + cur) 
因此第三次的 prev 是6=1+2(上一次回调返回的值 3 + 3) 
 我们发现数组长度是4,但是reduce函数循环3次。 说明reduce是从索引index为是从1开始循环的。

reduce 第二个参数提供初始值

var arr = [1, 2, 3, 4];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}, 10)
console.log(arr, sum);
//打印结果:
// 10 1 0
// 11 2 1
// 13 3 2
// 16 4 3
// [1, 2, 3, 4] 20

分析第二个参数提供初始值

前端我们说了:prev (上一次回调返回的值,或者是提供的初始值(initialValue)) 
因为提供了初始值,所以第一次是10, 当前值就变为了1,索引就从0开始了。 
因此第一次的值是 10 1 0 
第二次prev (上一次回调返回的值)11=10+1 
第三次prev (上一次回调返回的值)13=13+3

数组为空,运用reduce是什么情况

 var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
})
console.log(arr, sum);
//报错: Reduce of empty array with no initial value  at Array.reduce (<anonymous>)

如果我们设置了初始值呢?
var arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index); //这一条语句不
    return prev + cur;
}, 10)
console.log(arr, sum); //[] 10

reduce的累加,累乘

// 累加
let sum = [1, 2, 3, 4, 5].reduce((prev, cur) => prev + cur);
console.log(sum) //输出15

let sum = [1, 2, 3, 4, 5].reduce((prev,cur) => prev * cur);
console.log(sum) //输出120

let sum = [1, 2, 3, 4, 5].reduce((prev, cur) => prev * cur, 10);
console.log(sum) //输出1200

reduce数组对象求和

let arr = [{
    money: 100,
    name: '苹果'
}, {
    money: 50,
    name: '香蕉'
}]

不使用初始值
function sum(arr) {
    return arr.reduce((prev, cur) => {
        return prev.money + cur.money
    })
}

使用初始值
function sum(arr) {
    return arr.reduce((prev, cur) => {
        return cur.money + prev
    }, 0)
}
console.log(sum(arr)) //输出150

reduce计算数组中每个元素出现的次数[面试经常问]

let names = ['yes', 'hello', 'hi', 'yes', 'yy'];
// 第二个初始值是一个对象,因为有初始值,所以cur的值是数组的第一项[yes]
let nameNum = names.reduce((pre, cur) => {
    // 第一次pre是一个对象,返回将这个对象返回,下一次pre又是一个对象了
    if (cur in pre) {
        pre[cur]++
    } else {
        pre[cur] = 1
    }
    return pre
}, {})
console.log(nameNum); //{yes: 2, hello: 1, hi: 1, yy: 1}

reduce实现数组去重[面试经常问]

let arr = [10, 20, 20, 41, 41, 1]
// 这次初始值是一个数组,,因为有初始值,所以cur的值是数组的第一项10
let newArr = arr.reduce((pre, cur) => {
    // 如果没有,使用concat添加进去。这样就可以实现数组去重了
    if (!pre.includes(cur)) {
        return pre.concat(cur)
    } else {
        return pre
    }
}, [])
console.log(newArr); 
// [10, 20, 41, 1]

reduce实现数组扁平化

let arr = [
    [1, 2],
    [1, 2, 3],
    [1, [1, 3, [1, 2, 3]]]
]

function flatten(arr) {
    return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? flatten(cur) : cur), []);
}
console.log(flatten(arr)) //[1, 2, 1, 2, 3, 1, 1, 3, 1, 2, 3]

总结:reduce有无第二个参数的区别

1、没有提供初始值,索引是从1开始的。提供了初始值索引是从0开始的。 
2、没有提供初始值循环次数等于数组长度-1。 提供了初始值循环次数等于数组的长度; 
3、没有提供初始值第一次cur是索引为1的那个值。提供了初始值cur是索引为0的那个值 
4、没有提供初始值空数组会报错。提供了初始值空数组不会报错。[] 10

链接: https://www.fly63.com/article/detial/11740

Reducer的深入理解

要理解 reducer 的第一点也是最重要的一点是它永远返回一个值,这个值可以是数字、字符串、数组或对象,但它始终只能是一个。reducer 对于很多场景都很适用,但是它们对于将一种逻辑应用到一组值中并最终得到一个单一结果的情况特别适用

reduce方法应用技巧

reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。注意: reduce() 对于空数组是不会执行回调函数的。

Js中的reduce,fold和unfold

说说reduce吧, 很喜欢这个函数,节省了不少代码量,而且有一些声明式的雏形了,一些常见的工具函数,flatten,deepCopy,mergeDeep等用reduce实现的很优雅简洁。reduce也称为fold,本质上就是一个折叠数组的过程

js中reduce的神奇用法

最近经常在项目中经常看到别人用reduce处理数据,很是牛掰,很梦幻, 不如自己琢磨琢磨。

关于JavaScript中的reduce()方法

reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数,并将结果汇总为单个返回值,如果不传第二参数 initialValue,那么相当于函数从数组第二个值开始,并且将第一个值最为第一次执行的返回值,如果传了第二个参数 initialValue

JavaScript中的reduce()的5个用例

在本文中,我们讨论了数组 reduce() 方法。首先介绍 reduce() 方法,然后,使用一个简单的示例讨论其行为。最后,通过示例讨论了 reduce() 方法最常见的五个用例

代码写得好,Reduce 方法少不了

reduce 接受两个参数,回调函数和初识值,初始值是可选的。回调函数接受4个参数:积累值、当前值、当前下标、当前数组。如果 reduce的参数只有一个,那么积累值一开始是数组中第一个值

面试官直呼内行!如何实现一个比较完美的reduce函数?

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

js 使用reduce方法合并两个对象数组,有则替换,无则新增

有两个对象数组A和B,现在需要将两个数组中的对象合并,有则替换,无则新增,数组如下所示;我们分析下A和B数组,A和B中都存在name=李四的对象

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!