8.Javascript-map、reduce、filter 等高阶函数
高阶函数
高阶函数是对其他函数进行操作的函数,可以将它们作为参数或通过返回它们。简单来说,高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。
例如Array.prototype.map
,Array.prototype.filter
并且Array.prototype.reduce
是一些高阶功能,内置的语言。
1. Array.prototype.map
该map()
方法通过调用作为输入数组中每个元素的参数提供的回调函数来创建一个新数组。该map()
方法将从回调函数中获取每个返回值,并使用这些值创建一个新数组。
传递给回调函数map()
方法接受3个参数:element,index,和array。
假设我们有一个数组,我们想要创建一个新数组,其中包含第一个数组的每个值的两倍。让我们看看如何使用和不使用高阶函数来解决问题。
不用高阶函数
const arr1 = [1,2,3];
const arr2 = [];
for(let i = 0; i <arr1.length; i ++){
arr2.push(arr1 [i] * 2);
}
//打印[2,4,6]
console.log(arr2);
使用高阶函数
const arr1 = [1, 2, 3]; const arr2 = arr1.map(item => item * 2); //使用es6的箭头函数 打印[2,4,6]
创建自定义高阶函数
//假设我们有一个字符串数组,我们希望将此数组转换为整数数组,其中每个元素表示原始数组中字符串的长度。
const strArray = ['JavaScript', 'Python', 'PHP', 'Java', 'C'];
function mapForEach(arr, fn) {
const newArray = [];
for(let i = 0; i < arr.length; i++) {
newArray.push(
fn(arr[i])
);
}
return newArray;
}
const lenArray = mapForEach(strArray, function(item) {
return item.length;
});
// prints [ 10, 6, 3, 4, 1 ]
console.log(lenArray);
2. Array.prototype.filter
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
//返回数组 ages 中所有元素都大于 18 的元素:
var ages = [32, 33, 16, 40];
var result = ages.filter( item => { return item >= 18})
// 输出结果 32,33,40
3. Array.prototype.reduce
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法: arr.reduce(callback,[initialValue]) total :必需。初始值, 或者计算结束后的返回值。
currentValue:必需。当前元素
currentIndex:可选。当前元素的索引
arr:可选。当前元素所属的数组对象。
initialValue:可选。传递给函数的初始值 (作为第一次调用 callback 的第一个参数。) // 计算数组元素相加后的总和:
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的值是数组的第一个值。数组长度是4,但是reduce函数循环3次。
reduce的简单用法
// 1.简单的就是我们常用的数组求和,求乘积了。
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和,10
console.log( mul ); //求乘积,24 // 2.计算数组中每个元素出现的次数
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, Tiff: 1, Bruce: 1}
// 注意这里设置了 初始值 {} 来存储 pre[cur] key 值;与pre对比含有就自增 // 3.数组去重
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] // 4.将二维数组转化为一维
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] // 5.对象里的属性求和
var 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) //
8.Javascript-map、reduce、filter 等高阶函数的更多相关文章
- python--函数式编程 (高阶函数(map , reduce ,filter,sorted),匿名函数(lambda))
1.1函数式编程 面向过程编程:我们通过把大段代码拆成函数,通过一层一层的函数,可以把复杂的任务分解成简单的任务,这种一步一步的分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...
- Javascript:是你的高阶函数
在通常的编程语言中,函数的参数只能是基本类型或者对象引用,返回值也只是基本数据类型或对象引用.但在Javascript中函数作为一等公民,既可以当做参数传递,也可以被当做返回值返回.所谓高阶函数就是可 ...
- reduce内置高阶函数求和
>>> def f(x, y): ... return x+y ... >>> reduce(f, a, ) >>> reduce(lambda ...
- JavaScript高阶函数 map reduce filter sort
本文是笔者在看廖雪峰老师JavaScript教程时的个人总结 高阶函数 一个函数就接收另一个函数作为参数,这种函数就称之为高阶函数 1.高阶函数之map: ...
- JavaScript高阶函数map/reduce、filter和sort
map() 举例说明,比如我们有一个函数f(x)=x²,要把这个函数作用在一个数组[1,2,3,4,5,6,7,8,9]上. 由于map()方法定义在JavaScript的Array中,我们调用Arr ...
- Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)...啊啊啊
函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计 ...
- Python高阶函数(Map、Reduce、Filter)
Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明 比如我们有一个函数f(x)=x2,要把这个函数作用 ...
- (转)Python进阶:函数式编程(高阶函数,map,reduce,filter,sorted,返回函数,匿名函数,偏函数)
原文:https://www.cnblogs.com/chenwolong/p/reduce.html 函数式编程 函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数 ...
- Python高阶函数(Map、Reduce、Filter)和lambda函数一起使用 ,三剑客
Map函数 map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 举例说明 比如我们有一个函数f(x)=x2,要把这个函数作用 ...
随机推荐
- Win7下安装openssl
安装环境: 操作系统:window7(64位) C++编译器:VS2012 -------------------------------------------------------------- ...
- 积性函数与Dirichlet卷积
转载自https://oi-wiki.org/math/mobius/ 积性函数 定义 若 $gcd(x,y)=1$ 且 $f(xy)=f(x)f(y)$,则 $f(n)$ 为积性函数. 性质 若 $ ...
- 2.8/4/6/8mm/12mm焦距的镜头分别能监控多大范围?
2.8/4/6/8mm/12mm焦距的镜头分别能监控多大范围? 相关介绍 一.焦距和监控距离的关系 我司IPC镜头焦距有2.8/4mm/6mm/8mm等多种选择,可以满足室内外各种环境的拍摄需求.IP ...
- Pandas | 16 聚合
当有了滚动,扩展和ewm对象创建了以后,就有几种方法可以对数据执行聚合. DataFrame应用聚合 可以通过向整个DataFrame传递一个函数来进行聚合,或者通过标准的获取项目方法来选择一个列. ...
- clojure 环境搭建
以下是clojure 基础环境搭建的几种方式 mac brew install clojure linux curl -O https://download.clojure.org/install/l ...
- 请写出css中选择器(元素选择器、类选择器、id选择器)的优先级顺序,和当各种选择器组合时,优先级的计算规则是什么?
id选择器>类选择器>元素选择器 规则:选择器的权重值表述为4个部分,用0,0,0,0表示. 通配符*的权重为0,0,0,0 标签选择器.伪元素选择器的权重为0,0,0,1 类选择器.属性 ...
- 图的遍历 | 1076 bfs
bfs踩了很多坑才写完.注意:出队时不做是否vis判断,但是要加上vis[出队顶点]=1 .入队时进行判断,并且也要 vis[入队顶点]=1 #include <stdio.h> #inc ...
- git提交代码时出现was rejected by remote错误
git常见问题 git是大家在公司基本都项目管理工具,有一次在改了一个bug提交远程提交就出现问题了. 解决方案 首先这个是远程提交的时候被项目权限拦截掉了,一般在我们都用配置ssh公钥的方式操作,那 ...
- nginx虚拟机配置
#虚拟主机的配置server {#监听端口listen 80;#服务器域名server_name localhost;#网页的默认编码#charset koi8r;#访问该虚拟主机的日志位置#acce ...
- wkhtmltopdf cpdf HTML转pdf 及pdf合并
将 html 转为 pdf :wkhtmltopdf wkhtmltopdf 是一个使用 webkit 网页渲染引擎开发的用来将 html 转成 pdf 的工具,可以跟多种脚本语言进行集成来转换文档. ...