JavaScript中常用的高阶函数

65 阅读 0 评论 43 点赞

我是靠谱客的博主优雅白昼，最近开发中收集的这篇文章主要介绍JavaScript中常用的高阶函数，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

作业需求
定义一个数组，里面放入一些数字，有下列需求：

需求1：取出所有小于100的数字
需求2：将所有小于100的数字进行转化：全部*2
需求3：将new2Nums中所有的数字相加，得到最终的结果

实现过程1–>最基本方法

<1>定义一个数组

const nums = [10,20,111,222,333,40,60,50]

1.需求1：取出所有小于100的数字

let newNums = []
for(let n of nums) {
  if(n<100) {
    newNums.push(n)
  }
}
console.log(newNums);

2.需求2：将所有小于100的数字进行转化：全部*2

let new2Nums = []
for(let n of newNums) {
  new2Nums.push(n*2)
}
console.log(new2Nums);

3.需求3：将new2Nums中所有的数字相加，得到最终的结果

let total = 0
for(let n of new2Nums) {
	total += n
}
console.log(total);

实现过程2–>JavaScript高阶函数实现

1.需求1：取出所有小于100的数字

过滤函数filter函数的使用

let newNums = nums.filter(function(n) {
  return n < 100;
})

函数讲解

filter中的回调函数有一个要求：必须返回一个boolean值
true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
false：当返回为false时，函数内部会过滤掉这次的n
回调函数，每次遍历数组
(n<100):是一个boolean类型，true会正常保存

2.需求2：将所有小于100的数字进行转化：全部*2

map函数的使用

let new2Nums = newNums.map(function(n) {
	return n*2;
})
console.log(new2Nums);

函数讲解

可以对数组中的所有函数进行遍历

3.需求3：将new2Nums中所有的数字相加，得到最终的结果

reduce函数的使用

let new3Nums = new2Nums.reduce(function(preValue ,n) {
  return preValue+n;
},0)
console.log(new3Nums);

函数讲解

对数组中所有的值进行汇总
第二个参数0，默认的preValue的值为0

实现过程3–>JavaScript高阶函数高级实现1

let total = nums.filter(function(n) {
	return n<100
}).map(function(n) {
	return n*2
}).reduce(function(preValue,n) {
	return preValue+n
},0)
console.log(total);

实现过程4–>JavaScript高阶函数高级实现2

let total = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) =>pre+n);
console.log(total);

笔记完整代码

//编程范式：命令式编程 声明式遍历
//编程范式：面向对象编程(谁是第一公民：对象) 函数式编程(谁是第一公民：函数)
//高阶函数：filter/map/reduce
const nums = [10,20,111,222,333,40,60,50]
//高级写法1
let total = nums.filter(function(n) {
	return n<100
}).map(function(n) {
	return n*2
}).reduce(function(preValue,n) {
	return preValue+n
},0)
console.log(total);
//高级写法2
let total = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) =>pre+n);
console.log(total);

//1.过滤函数filter函数的使用
// filter中的回调函数有一个要求：必须返回一个boolean值
//true:当返回true时，函数内部会自动将这次回调的n加入到新的数组中
//false：当返回为false时，函数内部会过滤掉这次的n
let newNums = nums.filter(function(n) {
	//回调函数，每次遍历数组
	return n < 100;
	//(n<100):是一个boolean类型，true会正常保存
})
console.log(newNums)
//2.map函数的使用：可以对数组中的所有函数进行遍历
let new2Nums = newNums.map(function(n) {
	return n*2;
})
console.log(new2Nums);
//3.reduce函数的使用：对数组中所有的值进行汇总
let new3Nums = new2Nums.reduce(function(preValue ,n) {
	return preValue+n;
},0)
//第二个参数0，默认的preValue的值为0
console.log(new3Nums);
//1.需求1：取出所有小于100的数字
let newNums = []
for(let n of nums) {
	if(n<100) {
		newNums.push(n)
	}
}
console.log(newNums);
//2.需求2：将所有小于100的数字进行转化：全部*2
let new2Nums = []
for(let n of newNums) {
	new2Nums.push(n*2)
}
console.log(new2Nums);
//3.需求3：将new2Nums中所有的数字相加，得到最终的结果
let total = 0
for(let n of new2Nums) {
	total += n
}
console.log(total);