JavaScript之数组高阶API—reduce

2022/11/27 1:23:54

编程Tag： javascript 数组函数传递 Java icode9 实际数组

本文主要是介绍JavaScript之数组高阶API—reduce，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一文搞懂JavaScript数组中最难的数组API——reduce()

前面我们讲了数组的一些基本方法，今天给大家讲一下数组的reduce(),它是数组里面非常重要也是比较难的函数，那么这篇文章就好好给大家介绍下reduce函数。
还是老样子，我们直接在应用中学习，直接上例子。让我们先定义一个包含几个对象的数组，注意观察下这个数组，可以看到里面有两个对象的age都是30。(下面会用到)

	`// 一个包含几个人物对象的数组。`
	`const people = [`
	`{ name: "John", age: 20 },`
	`{ name: "Jane", age: 22 },`
	`{ name: "Joe", age: 23 },`
	`{ name: "Jack", age: 24 },`
	`{ name: "Jackson", age: 30 },`
	`{ name: "Jeff", age: 30 },`
	`]`

1.求数组中所有对象的年龄和

通过数组的reduce方法可以很方便的实现求和。reduce方法有两个参数，第一个参数是一个回调函数，第二个参数是初始值。下面就讲下这两个参数，回调函数，有四个参数，函数体处理自己的逻辑。第二个参数，它的值决定回调函数第一个参数的初始值。重点就是这个初始值。(文末会详细介绍这几个参数)

	`// 注意init 什么类型 res就是什么类型的`
	`// res的初始值为0 ，求和所以得从0开始`
	`const sum = people.reduce((res, cur) => res+cur.age, 0)`
	console.log(`结果：${sum}`); // 结果：149
	`// 如果我们把初始值设为100 那么结果应该是149+100了`
	`const sum = people.reduce((res, cur) => res+cur.age, 100)`
	console.log(`结果：${sum}`); // 结果：249

2.按照年龄分组（比如上面有两个人都是30岁，那么他们应该分在一起）

	`const sum = people.reduce((res, cur) => {`
	`// console.log(res,cur);`
	`const age = cur.age`
	`if (res[age] == null) {`
	`// 这里需要使用[]动态获取age值，用.age会有不一样的效果`
	`res[age] = []`
	`}`
	`// 通过push插入值`
	`res[age].push(cur.name)`
	`return res`
	`}, {})`
	`code1.png`

3.将数组对象转化为对象，name为key ，age为value

	`// 写法1`
	`const sum = people.reduce((res, cur) => {`
	`const name = cur.name`
	`res[name]=cur.age`
	`return res`
	`}, {})`
	`// 写法2 解构返回值化简`
	`const sum = people.reduce((res, cur) => ({`
	`...res,`
	`[cur.name] : cur.age`
	`}), {})`
	`// 写法3 回调方法的第二个参数也可以解构`
	`const sum = people.reduce((res, { name, age }) => ({`
	`...res,`
	`[name] : age`
	`}), {})`
	`// 结果都是一样的`
	`console.log(sum)`
	`image.png`

4.最后看下各个参数打印的结果，以及不写定义初始值的情况

	`// 1.定义初始值`
	`const sum = people.reduce((res, cur, index, array) => {`
	console.log(' 标签：Javascript,函数,实际数组,传递,java,icode9,数组来源：本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

这篇关于JavaScript之数组高阶API—reduce的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！