【重温基础】21.高阶函数

简介: 【重温基础】21.高阶函数


本文是 重温基础 系列文章的第二十一篇。

今日感受:想家。

本人自己整理的【Cute-JavaScript】资料,包含:【ES6/ES7/ES8/ES9】,【JavaScript基础(初级/中级/高级)】以及后面会添加的【JS面试题】三个系列。

欢迎您的支持!

系列目录:

本章节复习的是JS中的高阶函数,可以提高我们的开发效率。


1.介绍

个人简单理解为,一个函数可以接收其他函数作为参数,这种函数便称为高阶函数,而主要目的就是为了能接收其他函数作为参数。

Q: 为什么可以接收一个函数作为参数?

A: 因为函数可以接收变量作为参数,而变量可以声明一个方法。

简单实例:

function a (x){
    return 'hi ' + x;
}
function f (a, b){
    return a(b);
}
f(a, 'leo');   // "hi leo"

这段代码的意思:定义方法f,接收两个参数,方法a和变量b,在方法a中返回一段字符串,当执行方法f并传入参数方法a和参数b的时候,返回"hi leo"

也可以直接调用JS内置方法:

let a = 3, b = -2;
function my_abs (val, fun){
    return fun(val);
}
my_abs(a, Math.abs);  // 3
my_abs(b, Math.abs);  // 2 

2.常用高阶函数

2.1 map()

map()方法的作用是:接收一个函数作为参数,对数组中每个元素按顺序调用一次传入的函数并返回结果,不改变原数组,返回一个新数组

通常使用方式:arr.map(callback()),更多详细介绍可以参考 MDN Array.map()

参数

  • arr : 需要操作的数组;
  • callback(currentValue, index, array, thisArg): 处理的方法,四个参数;
  1. currentValue 当前处理的元素的
  2. index 当前处理的元素的索引,可选
  3. array 调用map()方法的数组,可选
  4. currentVthisArgalue 执行 callback 函数时使用的 this 值,可选

返回值

返回一个处理后的新数组。

实例

let arr = [1, 3, -5];
let a1 = arr.map(Math.abs);  
// a1 => [1, 3, 5];
let a2 = arr.map(String);
// a2 => ["1", "3", "-5"]
let a3 = arr.map(function (x){
    return x + 1;
})
// 等价于 a3=arr.map(x => x+1)
// a3 => [2, 4, -4]

对比 for...in 循环,map()书写起来更加简洁:

let arr = [1, 3, -5];
let a1 = [];
for (var i=0; i<arr.length; i++){
    a1.push(arr[i] + 1); 
}
// a1 => [2, 4, -4]

map()作为高阶函数,事实上它把运算规则抽象了。

2.2 reduce()

reduce()方法的作用是:接收一个函数,对数组进行累加操作,把累计结果和下一个值进行操作,最后返回最终的单个结果值。

通常使用方式:arr.reduce(callback(), initValue),更多详细介绍可以参考 MDN Array.reduce()

参数

  • callback(returnValue, currentValue, currentIndex, array): 累记器的方法,四个参数:
  1. returnValue 上一次处理的返回值,或者初始值
  2. currentValue 当前处理的元素的,可选
  3. currentIndex 当前处理的元素的索引,可选
  4. array 调用reduce()方法的数组,可选
  • initValue 初次调用callback()时候returnValue参数的初始值,默认数组第一个元素,可选

返回值

返回一个最终的累计值。

实例

  1. 数组求和
let arr = [1, 3, -5];
let sum1 = arr.reduce((res, cur) => res + cur);
// sum1 => -1
let sum2 = arr.reduce((res, cur) => res + cur , 1);
// sum1 => 0
  1. 二维数组转化为一维
let arr = [[1, 2], [3, 4], [5, 6]];
let con = arr.reduce((res, cur) => res.concat(cur));
// con => [1, 2, 3, 4, 5, 6]

2.3 filter()

filter()方法的作用是:接收一个函数,依次作用数组每个元素,并过滤符合函数条件的元素,将剩下的数组作为一个新数组返回。

通常使用方式:arr.filter(callback(), thisArg),更多详细介绍可以参考 MDN Array.filter()

参数

  • callback(ele, index, array): 过滤条件的方法,当返回true则保存该元素,反之不保留,三个参数:
  1. ele 当前处理的元素
  2. index 当前处理的元素的索引,可选
  3. array 调用filter()方法的数组,可选
  • thisArg 执行 callback 时的用于 this 的值,可选

返回值

返回一个过滤剩下的元素组成的新数组。

实例

  1. 过滤奇数值
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x % 2 != 0);
// res => [1, 3, 5]
  1. 过滤不满足条件的值
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x > 3);
// res => [4, 5, 6]
  1. 过滤空字符串
let arr = ['a', '', null, undefined, 'b', ''];
let tri = arr.filter(x => x && x.trim());
// tri => ["a", "b"]

总结下: filter()主要作为筛选功能,因此核心就是正确实现一个“筛选”函数。

2.4 sort()

sort()方法的作用是:接收一个函数,对数组的元素进行排序,并返回排序后的新数组。默认排序顺序是根据字符串Unicode码点

通常使用方式:arr.sort(fun()),更多详细介绍可以参考 MDN  Array.sort()compareFunction 可选 用来指定按某种顺序进行排列的函数。如果省略,元素按照转换为的字符串的各个字符的Unicode位点进行排序。参数

  • fun(a, b) : 指定按某种顺序进行排列的函数,若省略则按照转换为的字符串的各个字符的Unicode位点进行排序,两个可选参数:
    fun() 返回 ab两个值的大小的比较结果,sort()根据返回结果进行排序:
  • fun(a, b) 小于 0 ,则 a 排在 b 前面;
  • fun(a, b) 等于 0 ,则 ab 位置不变;
  • fun(a, b) 大于 0 ,则 a 排在 b 后面;

返回值

返回排序后的新数组,并修改原数组

实例

  1. 升序降序数组
let arr = [1,5,2,3];
let sort1 = arr.sort();
// 等同于 let sort1 = arr.sort((a, b) => a - b);
// sort1 => [1, 2, 3, 5]
let sort2 = arr.sort((a, b) => b - a);
// sort2 => [5, 3, 2, 1]
  1. 字符串排序
let arr1 = ['AA', 'CC', 'BB'];
let sort1 = arr1.sort();
// sort1 => ["AA", "BB", "CC"]
let arr2 = ['AA', 'aa', 'BB'];
let sort2 = arr2.sort();
// sort2 => ["AA", "BB", "aa"]
let arr3 = ['AA', 'aa', 'BB'];
let sort3 = arr3.sort((a, b) => a.toLowerCase() > b.toLowerCase());
// sort3 => ["AA", "aa", "BB"]
// 也可以写成:
let sort3 = arr3.sort((a, b) => {
    let s1 = a.toLowerCase();
    let s2 = b.toLowerCase();
    return s1 > s2 ? 1 : s1 < s2 ? -1 : 0;
})

总结下: sort()主要作为排序功能,因此核心就是正确实现一个“排序”函数。



目录
相关文章
|
存储 关系型数据库 数据库
postgresql|数据库|提升查询性能的物化视图解析
postgresql|数据库|提升查询性能的物化视图解析
1344 0
|
存储 关系型数据库 分布式数据库
GraphRAG:基于PolarDB+通义千问+LangChain的知识图谱+大模型最佳实践
本文介绍了如何使用PolarDB、通义千问和LangChain搭建GraphRAG系统,结合知识图谱和向量检索提升问答质量。通过实例展示了单独使用向量检索和图检索的局限性,并通过图+向量联合搜索增强了问答准确性。PolarDB支持AGE图引擎和pgvector插件,实现图数据和向量数据的统一存储与检索,提升了RAG系统的性能和效果。
|
算法 C语言
KMP算法(C语言实现)
KMP算法(C语言实现)
128 0
|
架构师 Oracle 搜索推荐
【企业架构】当今企业架构实践的相关性是什么?
【企业架构】当今企业架构实践的相关性是什么?
|
存储 机器学习/深度学习 SQL
使用 E-MapReduce 构建云上数据湖
本篇来自于阿里巴巴E-MapReduce(简称为EMR)产品经理子关,分享云上使用E-MapReduce快速构建企业数据湖的落地方案以及客户最佳实践。
使用 E-MapReduce 构建云上数据湖
日本之旅
第一次去日本,也是第一次出国。在此记录自己的所有见闻。回来以后,发现自己有点喜欢日本这个国家。 给我一些印象深刻的点如下: 环境干净,城市安静 刚进日本,你就会发现日本的街道,酒店都是无比的干净整洁。
1088 0
|
10天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1223 5
|
9天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1199 87