【重温基础】JS中的常用高阶函数介绍
Ps. 晚上加班到快十点,回来赶紧整理整理这篇文章,今天老大给我推荐了一篇文章,我从写技术博客中收获到了什么?- J_Knight_,感受也是很多,自己也需要慢慢养成记录博客的习惯,即使起步艰难,难以坚持,但还是要让自己加油加油。
前两天把我整理的【复习资料】ES6/ES7/ES8/ES9资料整理(个人整理)分享给大家啦。
正文内容开始:
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)
: 处理的方法,四个参数;currentValue
当前处理的元素的值
index
当前处理的元素的索引,可选
array
调用map()
方法的数组,可选
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)
: 累记器的方法,四个参数:returnValue
上一次处理的返回值,或者初始值
currentValue
当前处理的元素的值,可选
currentIndex
当前处理的元素的索引,可选
array
调用reduce()
方法的数组,可选
initValue
初次调用callback()
时候returnValue
参数的初始值,默认数组第一个元素,可选
返回值:
返回一个最终的累计值。
实例:
- 数组求和
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
- 二维数组转化为一维
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
则保存该元素,反之不保留,三个参数:ele
当前处理的元素
index
当前处理的元素的索引,可选
array
调用filter()
方法的数组,可选
thisArg
执行callback
时的用于this
的值,可选
返回值:
返回一个过滤剩下的元素组成的新数组。
实例:
- 过滤奇数值
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x % 2 != 0);
// res => [1, 3, 5]
- 过滤不满足条件的值
let arr = [1, 2, 3, 4, 5, 6];
let res = arr.filter(x => x > 3);
// res => [4, 5, 6]
- 过滤空字符串
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()
返回a
和b
两个值的大小的比较结果,sort()
根据返回结果进行排序:- 若
fun(a, b)
小于 0 ,则a
排在b
前面; - 若
fun(a, b)
等于 0 ,则a
b
位置不变; - 若
fun(a, b)
大于 0 ,则a
排在b
后面;
返回值:
返回排序后的新数组,并修改原数组。
实例:
- 升序降序数组
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]
- 字符串排序
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()
主要作为排序功能,因此核心就是正确实现一个“排序”函数。
3. 参考文章
分享的内容比较简单,但是还是希望能帮助到需要的人哈。~~感谢
Author | 王平安 |
---|---|
pingan8787@qq.com | |
博 客 | www.pingan8787.com |
微 信 | pingan8787 |
每日文章推荐 | https://github.com/pingan8787/Leo_Reading/issues |
ES小册 | es.pingan8787.com |
【重温基础】JS中的常用高阶函数介绍的更多相关文章
- python内置常用高阶函数(列出了5个常用的)
原文使用的是python2,现修改为python3,全部都实际输出过,可以运行. 引用自:http://www.cnblogs.com/duyaya/p/8562898.html https://bl ...
- Kotlin的高阶函数和常用高阶函数
Kotlin的高阶函数和常用高阶函数 文章来源:企鹅号 - Android先生 高阶函数的定义 将函数当做参数或者是返回值的函数 什么是高阶函数 可以看看我们常用的 函数: 首先我们可以知道, 是 的 ...
- 【Python】高阶函数介绍
其实函数可以作为变量,之前学过C++,对于这种用法并不奇怪.无非就是函数充当变量,可以传入函数而已. 下面分别介绍 Python 中常见的高阶函数:map/reduce, filter, sorted ...
- 5. vue常用高阶函数及综合案例
一. 常用的数组的高阶函数 假设, 现在有一个数组, 我们要对数组做如下一些列操作 1. 找出小于100的数字: 2. 将小于100的数字, 全部乘以2: 3. 在2的基础上, 对所有数求和: 通常我 ...
- 理解运用JS的闭包、高阶函数、柯里化
JS的闭包,是一个谈论得比较多的话题了,不过细细想来,有些人还是理不清闭包的概念定义以及相关的特性. 这里就整理一些,做个总结. 一.闭包 1. 闭包的概念 闭包与执行上下文.环境.作用域息息相关 执 ...
- JS的闭包、高阶函数、柯里化
本文原链接:https://cloud.tencent.com/developer/article/1326958 https://cloud.tencent.com/developer/articl ...
- Javascript中的高阶函数介绍
高阶函数:高阶看上去就像是一种先进的编程技术的一个深奥术语,一开始我看到的时候我也这样认为的. Javascript的高阶函数 然而,高阶函数只是将函数作为参数或返回值的函数.以下面的Hello,Wo ...
- Python学习札记(二十) 函数式编程1 介绍 高阶函数介绍
参考: 函数式编程 高阶函数 Note A.函数式编程(Functional Programming)介绍 1.函数是Python内建支持的一种封装,我们通过一层一层的函数调用把复杂任务分解成简单的任 ...
- Swift高阶函数介绍(闭包、Map、Filter、Reduce)
Swift语言有非常多函数式编程的特性.常见的map,reduce,filter都有,初看和python几乎相同,以下简介下 闭包介绍: 闭包是自包括的功能代码块,能够在代码中使用或者用来作为參数传值 ...
随机推荐
- opencv MatchTemplate()模板匹配寻找最匹配部分
通常,随着从简单的测量(平方差)到更复杂的测量(相关系数),可以获得越来越准确的匹配,然而,这同时也会以越来越大的计算量为代价.比较科学的方法是对所有这些方法多次测试实验,以便为自己的应用选择同时兼顾 ...
- leetcode-242 判断两个字符串是不是 Anagram ?
题目描述 假设给定两个字符串 s 和 t, 让我们写出一个方法来判断这两个字符串是否是字母异位词? 字母异位词就是,两个字符串中含有字母的个数和数量都一样,比如: Example 1: Input: ...
- 在linux系统下进行pip升级注意事项
今天鼓捣爬虫的时候需要用pip安装beautifulsoup4,但是出现了错误,说我的pip版本太低,需要升级一下.刚开始我用了下面这段代码: pip install --upgrade pip 显示 ...
- Xamarin.Forms 学习系列之底部tab
App中一般都会有一个底部tab,用于切换不同的功能,在Xamarin中应该制作底部tab了,需要把Android的TabbedPage做一次渲染,IOS的则不用,接下来说下详细步骤: 1.在共享项目 ...
- Maven安装目录分析
maven目录结构介绍 bin: 包含了mvn运行的脚本(既在cmd输入命令执行依赖,在命令行输入任何一条mvn命令时,实际上就是在调用这些脚本) boot: 该目录只包含一个文件,是一个类加载器,m ...
- SimpleXML使用详解
SimpleXML使用详解 介绍 SimpleXML提供了一种简单,直观的方法来处理XML.它只有一个单一类型的类,三个函数和六个方法. 使用SimpleXML SimpleXMLElement 类是 ...
- python迭代器生成器-迭代器和list区别
迭代 生成 for循环遍历的原理 for循环遍历的原理就是迭代,in后面必须是可迭代对象 为什么要有迭代器 对于序列类型:字符串.列表.元组,我们可以使用索引的方式迭代取出其包含的元素.但对于字典.集 ...
- 4k图片爬取+中文乱码
4k图片爬取+中文乱码 此案例有三种乱码解决方法,推荐第一种 4k图片爬取其实和普通图片爬取的过程是没有本质区别的 import requests import os from lxml import ...
- c语言l博客作业09
问题 答案 这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里 https://edu.cnblogs.com/campus/zswxy/CST2019-2/homework/8655 我在 ...
- java 实现文件读写操作
import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; /* JAVA IO 读写操作 20 ...