首页 > 其他分享 >JS 中 reduce()方法及使用详解

JS 中 reduce()方法及使用详解

时间:2024-04-18 16:00:12浏览次数:23  
标签:arr cur reduce JS 详解 let 数组 prev

reduce()方法可以搞定的东西特别多,就是循环遍历能做的,reduce都可以做,比如数组求和、数组求积、统计数组中元素出现的次数、数组去重等等。

reduce() 方法对数组中的每个元素执行一个由您提供的reduce函数(依次执行),将其结果汇总为单个返回值。

1、语法介绍

// arr.reduce(callback,[initialValue])
 
array.reduce((prev, cur, index, arr)=> {
    /***/
}, initialValue)
  • reduce 为数组中的每一个元素依次执行回调函数,接受四个参数:初始值 initialValue(或者上一次回调函数的返回值),当前元素值,当前索引,调用 reduce 的数组

参数:
参数一: callback 函数(执行数组中每个值的函数,包含四个参数):

  • prev 必需 (上一次调用回调返回的值,或者是提供的初始值(initialValue))
  • cur 必需(数组中当前被处理的元素)
  • index 可选 (当前元素在数组中的索引)
  • arr 可选 (调用 reduce 的数组)

参数二:initialValue 可选 (表示初始值,作为第一次调用 callback 的第一个参数。)

  提供初始值,cur 从数组第一项开始,若不提供初始值,则 cur 从第二项开始执行,对应的第一次 prev 是数组第一项的值

2、实例解析 initialValue 参数

示例一:

  • 没有设置函数的初始迭代值
<script>
    let arr = [1, 2, 3, 4, 5];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    });
    console.log('arr:', arr, 'sum:', sum);
</script>

运行结果:

 分析:在这里reduce的作用就是对这个数组进行求和,这里可以看出,数组长度是5,但是reduce函数循环4次,函数迭代的初始值是1,也就是默认值(数组的第一项),index是从1开始的,第一次的prev的值是数组的第一个值,而之后prev的值是每次计算后的值。

再看示例二:

  • 设置函数的初始迭代值
<script>
    let arr = [1, 2, 3, 4, 5];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    }, 5) //注意这里设置了初始值
    console.log("arr:", arr, "sum:", sum);
</script>

运行结果:

 分析:这里我们添加了一个初始的迭代值,也就是让prev从5开始计算(以5为初始值求和),index是从0开始的,数组长度是5,reduce函数循环5次,结果也加上了初始值。

结论:

如果没有提供initialValue,reduce 会从索引1的地方开始执行 callback 方法,跳过第一个索引。

如果提供initialValue,从索引0开始。

3、注意事项

1. reduce是一个对数组累积操作的方法,使用时要加上 return 返回累积操作的数据。这样 prev 才能获取上一次执行的结果,否则是 undefined;

2. 空数组执行 reduce 操作且不提供初始值时reduce会报错,错误信息如下:

<script>
    // 空数组的情况
    let arr = [];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    })
//报错,"TypeError: Reduce of empty array with no initial value"
</script>

但是要是我们设置了初始值就不会报错,如下:

<script>
    // 空数组,但设置 初始值 的情况
    let arr = [];
    let sum = arr.reduce(function (prev, cur, index, arr) {
        console.log(prev, cur, index);
        return prev + cur;
    }, 0)
    console.log(arr, sum); // [] 0
</script>

4、reduce的应用

(1)、最简单的就是我们常用的 数组求和,求乘积了。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((x,y)=>x+y)
let mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和,10
console.log( mul ); //求乘积,24

(2)、计算数组中每个元素出现的次数

<script>
    let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
    let nameNum = names.reduce((pre, cur) => {
        if (cur in pre) {
            pre[cur]++
        } else {
            pre[cur] = 1
        }
        return pre
    }, {})
    console.log(nameNum); //{Alice: 2, Bob: 1, Bruce: 1, Tiff: 1}
</script>

分析:

1. 由于设置了迭代初始值,pre的第一个值是一个空对象,此时name为Alice,然后进行判断,发现在pre中没有Alice属性,所以就将Alice对应的属性值赋为1。
2. 后面没有重复的是一样的道理,如果碰到重复值,就会将该属性值加1,这样就能计算元素重复的次数了。

(3)、数组去重

<script>
    let arr = [1, 2, 3, 4, 4, 1]
    let newArr = arr.reduce((pre, cur) => {
        if (!pre.includes(cur)) {
            return pre.concat(cur)
        } else {
            return pre
        }
    }, [])
    console.log(newArr);// [1, 2, 3, 4]
</script>

(4)、将二维数组转化为一维

<script>
    let arr = [[0, 1], [2, 3], [4, 5]]
    let newArr = arr.reduce((pre, cur) => {
        return pre.concat(cur)
    }, [])
    console.log(newArr); // [0, 1, 2, 3, 4, 5]
</script>

(5)、将多维数组转化为一维

<script>
    let arr = [[0, 1], [2, 3], [4, [5, 6, 7]]]
    const newArr = function (arr) {
        return arr.reduce((pre, cur) => pre.concat(Array.isArray(cur) ? newArr(cur) : cur), [])
    }
    console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]
</script>

(6)、对象里的属性求和

<script>
    let result = [
        {
            subject: 'math',
            score: 10
        },
        {
            subject: 'chinese',
            score: 20
        },
        {
            subject: 'english',
            score: 30
        }
    ];
 
    var sum = result.reduce(function (prev, cur) {
        return cur.score + prev;
    }, 0);
    console.log(sum) //60
</script>

(6)、按属性对Object分类

let person = [
    {
        name: 'xiaoming',
        age: 18
    },{
        name: 'xiaohong',
        age: 17
    },{
        name: 'xiaogang',
        age: 17
    }
];
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}
let groupedPerson = groupBy(person, 'age');
console.log(groupedPerson);

运行结果:

 

总结:

reduce() 是数组的归并方法,与 forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历,但是reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算,这一点是其他迭代方法无法企及的。

 

标签:arr,cur,reduce,JS,详解,let,数组,prev
From: https://www.cnblogs.com/smile-fanyin/p/18143685

相关文章

  • jwt json web token
    签发----登录成功后签发认证---需要登录才能访问的接口,通过认证才能继续操作2原理-----jwt和session,cookie区别2.1cookies2.2session2.2.1sessionmiddleware2.3jwttooken长什么样?三段式,用.分割每段b64编码 1st段:公司信息,加密方式就是jwt,一般固定 2nd......
  • graalvmjs 24.0.1 nodejs 镜像
    graalvmjs已经支持jdk22了,基于官方提供的更新了新版本的docker镜像,方便使用DockerfileFROMdebian:bullseye-backportsLABELauthor="rongfengliang"LABELemail="[email protected]"WORKDIR/opt/RUN/bin/cp/usr/share/zoneinfo/Asia/Shanghai/etc......
  • casl 同构授权js 框架
    casl同构授权js框架,提供了web前端以及后端的集成支持(使用相同的api)包含的特性多功能 灵活的基于subject以及属性的授权处理同构 同时支持前端以及后端类型安全 基于ts开发小巧 压缩之后只有6kb声明式的 基于声明式的可以灵活的进行规则的共享,包含了ui,api以及微......
  • 原生js弹字效果
    效果预览:手速不够快,实际上是整体都是一个个崩出来的<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><divstyle="width:100%;margin:0pxauto&q......
  • 详解Hook框架frida,让你在逆向工作中效率成倍提升
    https://zhuanlan.zhihu.com/p/41662447一、frida简介frida是一款基于python+javascript的hook框架,可运行在androidioslinuxwinosx等各平台,主要使用动态二进制插桩技术。本期“安仔课堂”,ISEC实验室的彭老师为大家详解frida,认真读完这篇文章会让你在逆向工作中效率成倍提升哦......
  • 30 天精通 RxJS (23):Subject, BehaviorSubject, ReplaySubject, AsyncSubject
    昨天我们介绍了Subject是什么,今天要讲Subject一些应用方式,以及Subject的另外三种变形。Subject昨天我们讲到了Subject实际上就是ObserverPattern的实例,他会在内部管理一份observer的清单,并在接收到值时遍历这份清单并送出值,所以我们可以这样用Subjectvarsubject......
  • commonjs
    Commonjs什么是CommonJsCommonJs是js模块化的社区规范模块化产生的原因随着前端页面复杂度的提升,依赖的第三方库的增加,导致的js依赖混乱,全局变量的污染,和命名冲突单个js文件内容太多,导致了维护困难,拆分成为多个文件又会发生第一点描述的问题v8引擎的出现,让js......
  • paper list(JS变量名恢复)
    PapersListAGeneralPath-BasedRepresentationforPredictingProgramProperties.[pdf]UriAlon,MeitalZilberstein,OmerLevy,EranYahav.PLDI,2018.CharacterizingtheNaturalLanguageDescriptionsinSoftwareLoggingStatements.[pdf][code]Pinji......
  • JS混淆代码数据集构建方法
    数据获取(1)公开JS数据集,比如CodeSearchNet;(2)自行构建JS数据集,爬取Github开源前端项目;数据描述Github中采集前端项目文件分类如下,从中提取JS文件数据预处理  其中比较重要的步骤:  (1)代码混淆:使用现有工具,如UglifyJS、Terser、babel-minify、JS-Obfuscator;   ......
  • JS代码混淆器:iPaGuard — 让你的代码看起来令人头大
     在当今互联网时代,JavaScript作为一种广泛应用的编程语言,扮演着至关重要的角色。然而,随着网络技术的不断发展,JavaScript代码也面临着日益增加的安全威胁。为了保护JavaScript代码免受未经授权的复制、修改和逆向工程,开发者需要借助专业的工具和技术。其中,iPaGuard就是一款......