当前位置： 首页 > news >正文

前端Array.reduce()函数延申用法

news 来源：原创 2024/9/20 7:56:43

1.求和

// 求和const sum = (arr) => arr.reduce((acc,cur) => acc + cur,0)let arr = [1,2,3,4,5]console.log('参数为：',arr);console.log('总和：',sum(arr));

2.求积

//求积const sum1 = (arr) => arr.reduce((acc,cur) => acc * cur,1)let arr1 = [1,2,3,4,5]console.log('参数为：',arr1);console.log('积：',sum1(arr1));

3.扁平化数组

//扁平化数组const flatten = (arr) => arr.reduce((acc,curr) => acc.concat(curr),[])let arr2 = [[1,2],[3,4],[5]]console.log("参数为:",arr2);console.log('转化结果为:',flatten(arr2));

4.平均值

//平均值const average = (arr) => arr.reduce((acc,curr) => acc + curr,0)/arr.lengthlet arr3 = [1,2,3,4,5]console.log("参数为:",arr3);console.log('平均值为:',average(arr3));

5.最大值

//最大值 Number.NEGATIVE_INFINITY 意思就是最小值 保证第一次比较必须获胜const max = (arr) => arr.reduce((acc,curr) => Math.max(acc,curr),Number.NEGATIVE_INFINITY)let arr4 = [1, 2, 3, 4, 5];console.log("参数为：", arr4);console.log("结果为：", max(arr4));

6.最小值

//最大值 Number.POSITIVE_INFINITY 意思就是最大值 保证第一次比较必须获胜const min = (arr) => arr.reduce((acc, curr) => Math.min(acc, curr), Number.POSITIVE_INFINITY);let arr5 = [1, 2, 3, 4, 5];console.log("参数为：", arr5);console.log("结果为：", min(arr));

7.阶乘函数

// 阶乘函数 表示一个正整数的阶乘，即所有小于及等于该数的正整数的乘积。const factorial = (n) => Array.from({ length: n }, (_, i) => i + 1).reduce((acc, curr) => acc * curr, 1);//  Array.from({ length: n }, (_, i) => i + 1) 生成数组数据 [1,2,3,4,5]console.log(Array.from({ length: 5 }, (_, i) => i + 1));console.log("参数为：", 5);console.log("结果为：", factorial(5));

8.数组去重

// 数组去重const unique = (arr) => arr.reduce((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], []);let arr6 = [1, 2,3,4,2, 3, 4, 5];console.log("参数为：", arr6);console.log("结果为：", unique(arr6));

9.元素计数

// 元素计数const countOccurrences = (arr) => arr.reduce((acc, curr) => {console.log(acc,curr)console.log(acc[curr])acc[curr] = (acc[curr] || 0) + 1;console.log(acc[curr])return acc;}, {});let arr7 = [1, 2,3,4,2, 3, 4, 5];console.log("参数为：", arr7);console.log("结果为：", countOccurrences(arr7));

10.并集函数

// 并集函数const union = (...arrays) => arrays.reduce((acc, curr) => {console.log('1111111111',acc,curr);return [...new Set([...acc, ...curr])]}, []);let arr8 = [1, 2,3,4,2, 3, 4, 5,7];let arr9 = [1, 2, 3, 4, 5];console.log("参数为：", arr8,arr9);console.log("结果为：", union(arr8,arr9),[...new Set([...arr8, ...arr9])]);

11.交集函数

// 交集函数const intersection = (...arrays) => arrays.reduce((acc, curr) => acc.filter(value => curr.includes(value)));let arr10 = [1, 2,3,4,2, 3, 4, 5];let arr11 = [1, 2, 4, 5];console.log("参数为：", arr10,arr11);console.log("结果为：", intersection(arr10,arr11));  // 再去下重就行了

12.差集函数

//差集函数 属于集合A不属于集合Bconst difference = (arr1, arr2) => arr1.reduce((acc, curr) => {console.log('2222222222222',acc,curr);return arr2.includes(curr) ? acc : [...acc, curr]}, []);let arr12 = [1, 2,3,4,2, 3, 4, 5,9];let arr13 = [1, 2, 3, 4, 5,7,8];console.log("参数为：", arr12,arr13);console.log("结果为：", difference(arr12,arr13));

13.对称差集函数

// 对称差集函数  反着来一下再组装一下const difference1 = (arr1, arr2) => arr1.reduce((acc, curr) => arr2.includes(curr) ? acc : [...acc, curr], []);const symmetricDifference = (arr1, arr2) => [...difference1(arr1, arr2), ...difference1(arr2, arr1)];let arr14 = [1, 2,3,4,2, 3, 4, 5,9];let arr15 = [1, 2, 3, 4, 5,7,8];console.log("参数为：", arr14,arr15);console.log("结果为：", symmetricDifference(arr14,arr15));

14.切片函数

// 切片函数const chunk = (arr, size) => arr.reduce((acc, _, i) => i % size === 0 ? [...acc, arr.slice(i, i + size)] : acc, []);let arr16 = [1, 2,3,4,2, 3, 4, 5,9];console.log("参数为：", arr16);console.log("结果为：", chunk(arr16,4));

15.分组函数

// 分组函数const groupBy = (arr, key) => arr.reduce((acc, obj) => {const groupKey = obj[key];acc[groupKey] = [...(acc[groupKey] || []), obj];return acc;}, {});let arr17 = [{ id: 1, name: '微芒不朽' }, { id: 2, name: '微芒' }, { id: 3, name: '微芒不朽' }];console.log("参数为：", arr);console.log("结果为：", groupBy(arr17,"name"));

16.数组去重假值

// 16. 数组去除假值/空值const compact = (arr) => arr.reduce((acc, curr) => curr ? [...acc, curr] : acc, []);let arr18 = [0, 1, false, 2, '', 3]console.log("参数为：", arr18);console.log("结果为：", compact(arr18,"name"));

17.去除指定元素

// 去除指定元素const removeItem = (arr, item) => arr.reduce((acc, curr) => curr === item ? acc : [...acc, curr], []);let arr19 = [1, 2, 3, 4, 2, 5]console.log("参数为：", arr19);console.log("结果为：", removeItem(arr19,2));

18.修饰函数

 // 修饰函数const mapArray = (arr, fn) => arr.reduce((acc, curr) => [...acc, fn(curr)], []);let arr20 = [1, 2, 3, 4, 2, 5]console.log("参数为：", arr20,(x)=>x+2);console.log("结果为：", mapArray(arr20,(x)=>x+2));

完整代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>// 重写console.log样式function randomColor() {let r = Math.floor(Math.random()*256);let g = Math.floor(Math.random()*256);let b = Math.floor(Math.random()*256);//返回随机生成的颜色return "rgb("+r+","+g+","+b+")";}console.log = (function(oriLogFunc){return function(...data){const icons = [ "⚽", "⭕", "❌", "❓", "❗"]const icon = icons[Math.floor(Math.random() * icons.length)];const bgColor = randomColor()const color = randomColor()oriLogFunc.call(console,`%c ${icon} `, `border-radius:5px;padding:12px;border:1px solid #000;color: #43bb88;font-size: 16px;font-weight: bold;text-decoration: underline;`, ...data);}})(console.log);// 求和const sum = (arr) => arr.reduce((acc,cur) => acc + cur,0)let arr = [1,2,3,4,5]console.log('参数为：',arr);console.log('总和：',sum(arr));//求积const sum1 = (arr) => arr.reduce((acc,cur) => acc * cur,1)let arr1 = [1,2,3,4,5]console.log('参数为：',arr1);console.log('积：',sum1(arr1));//扁平化数组const flatten = (arr) => arr.reduce((acc,curr) => acc.concat(curr),[])let arr2 = [[1,2],[3,4],[5]]console.log("参数为:",arr2);console.log('转化结果为:',flatten(arr2));//平均值const average = (arr) => arr.reduce((acc,curr) => acc + curr,0)/arr.lengthlet arr3 = [1,2,3,4,5]console.log("参数为:",arr3);console.log('平均值为:',average(arr3));//最大值 Number.NEGATIVE_INFINITY 意思就是最小值 保证第一次比较必须获胜const max = (arr) => arr.reduce((acc,curr) => Math.max(acc,curr),Number.NEGATIVE_INFINITY)let arr4 = [1, 2, 3, 4, 5];console.log("参数为：", arr4);console.log("结果为：", max(arr4));//最大值 Number.POSITIVE_INFINITY 意思就是最大值 保证第一次比较必须获胜const min = (arr) => arr.reduce((acc, curr) => Math.min(acc, curr), Number.POSITIVE_INFINITY);let arr5 = [1, 2, 3, 4, 5];console.log("参数为：", arr5);console.log("结果为：", min(arr));// 阶乘函数 表示一个正整数的阶乘，即所有小于及等于该数的正整数的乘积。const factorial = (n) => Array.from({ length: n }, (_, i) => i + 1).reduce((acc, curr) => acc * curr, 1);//  Array.from({ length: n }, (_, i) => i + 1) 生成数组数据 [1,2,3,4,5]console.log(Array.from({ length: 5 }, (_, i) => i + 1));console.log("参数为：", 5);console.log("结果为：", factorial(5));// 数组去重const unique = (arr) => arr.reduce((acc, curr) => acc.includes(curr) ? acc : [...acc, curr], []);let arr6 = [1, 2,3,4,2, 3, 4, 5];console.log("参数为：", arr6);console.log("结果为：", unique(arr6));// 元素计数const countOccurrences = (arr) => arr.reduce((acc, curr) => {console.log(acc,curr)console.log(acc[curr])acc[curr] = (acc[curr] || 0) + 1;console.log(acc[curr])return acc;}, {});let arr7 = [1, 2,3,4,2, 3, 4, 5];console.log("参数为：", arr7);console.log("结果为：", countOccurrences(arr7));// 并集函数const union = (...arrays) => arrays.reduce((acc, curr) => {console.log('1111111111',acc,curr);return [...new Set([...acc, ...curr])]}, []);let arr8 = [1, 2,3,4,2, 3, 4, 5,7];let arr9 = [1, 2, 3, 4, 5];console.log("参数为：", arr8,arr9);console.log("结果为：", union(arr8,arr9),[...new Set([...arr8, ...arr9])]);// 交集函数const intersection = (...arrays) => arrays.reduce((acc, curr) => acc.filter(value => curr.includes(value)));let arr10 = [1, 2,3,4,2, 3, 4, 5];let arr11 = [1, 2, 4, 5];console.log("参数为：", arr10,arr11);console.log("结果为：", intersection(arr10,arr11));  // 再去下重就行了//差集函数 属于集合A不属于集合Bconst difference = (arr1, arr2) => arr1.reduce((acc, curr) => {console.log('2222222222222',acc,curr);return arr2.includes(curr) ? acc : [...acc, curr]}, []);let arr12 = [1, 2,3,4,2, 3, 4, 5,9];let arr13 = [1, 2, 3, 4, 5,7,8];console.log("参数为：", arr12,arr13);console.log("结果为：", difference(arr12,arr13));// 对称差集函数  反着来一下再组装一下const difference1 = (arr1, arr2) => arr1.reduce((acc, curr) => arr2.includes(curr) ? acc : [...acc, curr], []);const symmetricDifference = (arr1, arr2) => [...difference1(arr1, arr2), ...difference1(arr2, arr1)];let arr14 = [1, 2,3,4,2, 3, 4, 5,9];let arr15 = [1, 2, 3, 4, 5,7,8];console.log("参数为：", arr14,arr15);console.log("结果为：", symmetricDifference(arr14,arr15));// 切片函数const chunk = (arr, size) => arr.reduce((acc, _, i) => i % size === 0 ? [...acc, arr.slice(i, i + size)] : acc, []);let arr16 = [1, 2,3,4,2, 3, 4, 5,9];console.log("参数为：", arr16);console.log("结果为：", chunk(arr16,4));// 分组函数const groupBy = (arr, key) => arr.reduce((acc, obj) => {const groupKey = obj[key];acc[groupKey] = [...(acc[groupKey] || []), obj];return acc;}, {});let arr17 = [{ id: 1, name: '微芒不朽' }, { id: 2, name: '微芒' }, { id: 3, name: '微芒不朽' }];console.log("参数为：", arr);console.log("结果为：", groupBy(arr17,"name"));// 16. 数组去除假值/空值const compact = (arr) => arr.reduce((acc, curr) => curr ? [...acc, curr] : acc, []);let arr18 = [0, 1, false, 2, '', 3]console.log("参数为：", arr18);console.log("结果为：", compact(arr18,"name"));// 去除指定元素const removeItem = (arr, item) => arr.reduce((acc, curr) => curr === item ? acc : [...acc, curr], []);let arr19 = [1, 2, 3, 4, 2, 5]console.log("参数为：", arr19);console.log("结果为：", removeItem(arr19,2));// 修饰函数const mapArray = (arr, fn) => arr.reduce((acc, curr) => [...acc, fn(curr)], []);let arr20 = [1, 2, 3, 4, 2, 5]console.log("参数为：", arr20,(x)=>x+2);console.log("结果为：", mapArray(arr20,(x)=>x+2));// 元素过滤const filterArray = (arr, fn) => arr.reduce((acc, curr) => fn(curr) ? [...acc, curr] : acc, []);let arr21 = [1, 2, 3, 4, 2, 5]console.log("参数为：", arr21,(x) => x % 2 === 0);console.log("结果为：", filterArray(arr21,(x) => x % 2 === 0));</script>
</body>
</html>

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • OpenGL-ES 学习(8) ---- FBO
  • 一款好看的WordPress REST API 主题
  • 又双叒叕JavaScript 新增了 7 个方法！
  • 无人机技术的最新进展及未来趋势
  • 智能指针，然并卵
  • 精致潮人们，抠搜在电商平台
  • 前端常见**MS题 [3]
  • Android常见控件(一)
  • 怎么把JPG转成PDF？这3种转换方法一定不要错过
  • 单片机大小端模式
  • （六）Flink 窗口计算
  • react antd from表单全选按钮Button触发CheckBox状态回显
  • gin快速入门
  • Ps：高速缓存机制
  • 全面解读AI大模型：一文带你看懂发展脉络与未来走向！
  • python3.6+scrapy+mysql 爬虫实战
  • 【挥舞JS】JS实现继承，封装一个extends方法
  • 〔开发系列〕一次关于小程序开发的深度总结
  • Apache Spark Streaming 使用实例
  • conda常用的命令
  • IDEA 插件开发入门教程
  • Idea+maven+scala构建包并在spark on yarn 运行
  • iOS筛选菜单、分段选择器、导航栏、悬浮窗、转场动画、启动视频等源码
  • Java 内存分配及垃圾回收机制初探
  • Js基础知识（一） - 变量
  • October CMS - 快速入门 9 Images And Galleries
  • PAT A1120
  • redis学习笔记(三):列表、集合、有序集合
  • Redux系列x：源码分析
  • Vue.js-Day01
  • Vue官网教程学习过程中值得记录的一些事情
  • windows-nginx-https-本地配置
  • 创建一种深思熟虑的文化
  • 从PHP迁移至Golang - 基础篇
  • 电商搜索引擎的架构设计和性能优化
  • 解析 Webpack中import、require、按需加载的执行过程
  • 前嗅ForeSpider中数据浏览界面介绍
  • 使用Gradle第一次构建Java程序
  • 算法-图和图算法
  • 我从编程教室毕业
  • 译自由幺半群
  • 再次简单明了总结flex布局，一看就懂...
  • ​1：1公有云能力整体输出，腾讯云“七剑”下云端
  • ​七周四次课（5月9日)iptables filter表案例、iptables nat表应用
  • #、%和$符号在OGNL表达式中经常出现
  • #define，static，const，三种常量的区别
  • （175）FPGA门控时钟技术
  • （C语言）编写程序将一个4×4的数组进行顺时针旋转90度后输出。
  • (vue)el-tabs选中最后一项后更新数据后无法展开
  • （分类）KNN算法- 参数调优
  • （机器学习的矩阵）（向量、矩阵与多元线性回归）
  • (三)模仿学习-Action数据的模仿
  • *setTimeout实现text输入在用户停顿时才调用事件！*
  • ./indexer: error while loading shared libraries: libmysqlclient.so.18: cannot open shared object fil
  • .NET 4.0中的泛型协变和反变