目录参数介绍举例说明
1.把数组合并为一个对象
2.去重
3.求和
4.求最大值和最小值
5.扁平数组
6.求字符串中各个字符出现的次数
reduce总的来说用的不多，但最近看一些文章上的reduce的用法真的是骚气，其实reduce跟常用的map，forEach一样，也是用于遍历循环，只不过它可以设置初始值，这样可以大大增强代码的可读性。
参数介绍array.reduce((pre, cur, index, arr)=>{...
}, init);pre: 必需。初始值, 或者计算结束后的返回值。
cur： 必需。当前元素。
index： 可选。当前元素的索引。
arr： 可选。当前元素所属的数组对象。
init: 可选。传递给函数的初始值，相当于pre的初始值。
reduce里面有一定要return，return出去的值也要注意 const b = [1, 2, 3, 4]b.reduce((x, y) => console.log(x, y), 0)如果有初始值，先取初始值为0，然后取数组第一个值，再取它们(x,y)的返回值为undefined，然后再取数组的第二个值，依次类推
举例说明
1.把数组合并为一个对象
//正常使用forEach循环let arr = [{ a: 1, b: 10 }, { a: 2, b: 20 }, { a: 3, b: 30 }]let obj = {}arr.forEach((item, index) => {Object.keys(item).forEach(each => {obj[`${each}${index + 1}`] = item[each]})}) console.log(obj); //{a1:1,a2:2,a3:3,b1:10,b2:20,b3:30}
//使用reduce遍历，可以看出区别在于初始值，以及reduce中必须要return你想要的值let a = arr.reduce((pre, cur, index) => {Object.keys(cur).forEach((item) => {pre[`${item}${index + 1}`] = cur[item]}) return pre}, {}) console.log(a); //{a1:1,a2:2,a3:3,b1:10,b2:20,b3:30}
2.去重
2.1.基本数据类型去重
let arr2 = [9, 4, 3, 6, 9];//基本类型去重let set = arr2.reduce((pre, cur) => {!pre.includes(cur) && pre.push(cur) return pre}, []) console.log(set); //[9,4,3,6]
2.2.引用数据类型去重
let list = [{subject: "数学",marks: 80},{subject: "语文",marks: 90},{subject: "英语",marks: 80},]function arrSet(value,arr) {let obj = {}let res = arr.reduce((pre, cur) => {if (!obj[cur[value]]) {obj[cur[value]] = true pre.push(cur)}return pre}, []) return res}let result = arrSet("marks",list);console.log(result); //[{subject:"数学",marks:80}，{subject:"语文"：90}]
3.求和
3.1.基本数据类型求和
let arr2 = [9, 4, 3, 6, 9];let sum = arr2.reduce((pre, cur) => {return pre + cur},0) console.log(sum) //31
3.2.引用数据类型求和
let arr = [{value: 45,},{value: 88,},{value: 101,},];let newArr = arr.reduce((pre, cur) => {return pre + cur.value;}, 0);console.log(newArr); //234
4.求最大值和最小值
let arr2 = [9, 4, 3, 6, 9];let max = arr2.reduce((prev, cur)=> {return Math.max(prev, cur);}) let min= arr2.reduce((prev, cur)=> {return Math.min(prev, cur);}) console.log(max,min); //9,3
5.扁平数组
5.1 二维数组转化为一维let arr = [[1, 2, 8], [3, 4, 9], [5, 6, 10]];let res = arr.reduce((pre, cur) => {return pre.concat(cur)},[]);console.log(res) //[1, 2, 8, 3, 4, 9, 5, 6, 10]5.2 多维数组转化为一维let arr = [[1, [2, 8]], [3, 4, 9], [5, [6, 10]]]function fn(arr) {return arr.reduce((pre, cur) => {return pre.concat(Array.isArray(cur) ? fn(cur) : cur);}, []);}const newArr = fn(arr);console.log(newArr); //[1, 2, 8, 3, 4, 9, 5, 6, 10]
6.求字符串中各个字符出现的次数
const str = 'jordanbryantjamescurrydurant';const res1 = str.split('').reduce((pre, cur) => {pre[cur] ? pre[cur]++ : pre[cur] = 1;return pre;}, {});console.log(res1); //{j:2,o:1,r:5,d:2,...}let arr = []let num = Math.max(...new Set(Object.values(res1))) let value;for (let keys in res1) {if (res1[keys] == num) {value = keys break}}console.log(`出现最多的字母为${value},出现的次数为${num}次`); //出现最多的字母为r,出现的次数为5次以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:JS数组Reduce方法功能与用法实例详解JavaScript reduce的基本用法详解JavaScript中reduce()的5个基本用法示例