JavaScript中常见的高阶函数总结
目录
- 前言
- map函数
- reduce函数
- filter函数
- sort
- every方法
- find方法
- findIndex方法
- foreach方法
- 总结
前言 一个函数可以接受另一个函数作为参数,就把这个函数叫做高阶函数。
一个最简单的高阶函数:
function add(x, y, f) {return f(x) + f(y); }//当调用add(-5, 6, Math.abs)时,参数x,y和f分别接收-5,6和函数Math.abs,根据函数定义,可以推导计算过程为://x = -5; //y = 6; //f = Math.abs; //f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11; //return 11; //用代码验证一下:add(-5, 6, Math.abs); // 11
map函数 map()方法定义在JavaScript的数组中,我们调用Array的map()方法,传入我们自己的函数,就得到了一个新的数组。
举个例子:现在有一个数组,想让每个数组元素都变成它的平方,输出这个新数组,传统方法也很简单,今天我们用map函数来写:
function pow(x) {return x * x; }var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; alert (arr.map(pow))
文章图片
reduce函数 数组的reduce()把一个函数作用在这个数组的[x1, x2, x3…]上,这个函数必须接收两个参数,reduce()把结果继续和序列的下一个元素做累积计算。
举个例子:
let arr=[6,8,8,6,9,6]let a=arr.reduce(function(x,y){return x+y; })alert(a)
文章图片
filter函数 filter函数可以说是数组的一个过滤函数,它会将接收的函数作用于每一个元素,然后根据返回的布尔值决定这个元素留下还是丢掉。
filter()接收的回调函数,其实可以有多个参数 ,通常我们仅使用 第一个参数 表示元素的位置和数组本身。
看一个简单的例子:有一个数组,现在想只保留数组的偶数元素,奇数元素全部过滤掉,看下代码:
var arr = [1,2,1,2,1,2,1,2]; var r = arr.filter(function (x) {return x % 2 == 0; }); alert(r)
文章图片
sort sort主要用于排序
看下例子:有一个数组,想将它按从小到大或从大到小的顺序排列,看下代码:
//从小到大排列 let arr=[1,3,1,2,3,6,4,3]let arr1=arr.sort((a,b)=>a-b)alert(arr1)
文章图片
//从大到小排列 let arr=[1,3,1,2,3,6,4,3]let arr1=arr.sort((a,b)=>b-a)alert(arr1)
文章图片
every方法 数组对象提供的every()方法判断数组的所有元素是否满足测试条件
举个例子:测试数组元素是否大于6
let arr=[4,6,8,8]let result=arr.every(function(a){return a>6})alert(result)
文章图片
find方法 数组对象提供的find()方法用于查找符合条件的第一个元素,如果找到 了,返回这个元素,否则,返回undefined
let arr=[4,6,8,9]let result=arr.find(function(a){return a>6})alert(result)
文章图片
findIndex方法 数组对象提供的find()方法用于查找符合条件的第一个元素,如果找到 了,返回这个元素的索引
let arr=[4,6,8,9]let result=arr.findIndex(function(a){return a>6})alert(result)
文章图片
foreach方法 forEach() 方法对数组的每个元素执行一次给定的函数
举个例子:遍历数组,先使用传统的for循环,再使用foreach函数,看下代码:
const items = ['item1', 'item2', 'item3']; const copy = []; //传统方式for (let i=0; i
总结 【JavaScript中常见的高阶函数总结】到此这篇关于JavaScript中常见的高阶函数总结的文章就介绍到这了,更多相关JavaScript高阶函数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 解决react中label标签for报错问题
- vue项目中使用websocket的实现
- 面试官(Redis中字符串的内部实现方式是什么())
- JavaScript|JavaScript字符串反转
- javascript|JavaScript实现飞机大战
- 视频爬虫及破解|python反混淆javascript代码
- 大数据|JavaScript遭嫌弃,“反JS”主义者兴起
- 如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
- 鸿蒙系统的细节,鸿蒙系统为什么让世界瞩目(给你讲一讲其中5个重要细节)
- 如何在hexo博客中在线阅读pdf