最近刚接触到高阶函数这个词语,简单了解了下,就在这里记录下学习成果
什么是高阶函数?
高阶函数英文名叫:Higher-order function 。
如果一个函数的参数也是一个或是多个函数,或者函数的返回值是函数的话。就把这个函数称为高阶函数。
类型一:参数是函数 (Function)
JS语言中内置了几种高阶函数,包含 Array.prototype.map, Array.prototype.filter和Array.prototype.reduce, 它们都需要接受一个函数作为参数,并且可以应用函数到数组的每一个元素。下面是对这几种函数应用的具体介绍,
Array.prototype.map
map()方法 又可以称之为映射函数,map()方法最终的结果是创建一个新的数组,其中数组的每个元素就是执行,map()函数内部传入的函数参数每次执行的结果。同时原始数组的值不会改变
语法
arr.map(function(currentValue,index,arr),thisValue)
参数说明
function(currentValue, index, arr)
必需参数。函数参数。用于执行每个数组元素的函数
currentValue: 必需参数,当前数组的元素
index: 可选参数。当前元素的索引
arr: 可选参数。当前元素所属的数组对象,即原始数组
thisValue
可选参数。 对象作为该执行回调时使用,传递给函数,用作“this”的值。
如果省略了thisValue,或者传入null、undefined,那么回调函数的this为全局对象
map() 应用
给个例子,实现一个让数组所有元素*2的操作
不使用map
let arr = [1, 2, 3, 4];
let newarr = [];
for (let i = 0; i < arr.length; i++) {
newArr.push(arr[i] * 2);
}
console.log(newarr) // [2, 4, 6, 8]
console.log(arr) // [1, 2, 3, 4]
使用map
let arr = [1, 2, 3, 4];
let newarr = arr.map(currentV => {
return currentV*2
})
console.log(newarr) // [2, 4, 6, 8]
console.log(arr) // [1, 2, 3, 4]
Array.prototype.filter
filter()方法 又称为过滤函数,同样也是返回一个新的数组,该新数组的元素必须符合传入的callback函数的执行规则,该callback函数有两种结果,true,或者false即满足规则或者不满足规则,如果该列表元素满足规则,则会添加到新的数组里,不满足则被过滤掉,所以是过滤函数。同时原始数组的值不会改变。
语法
arr.filter(function(currentValue,index,arr),thisValue)
参数说明
function(currentValue, index, arr)
必需参数。函数参数。用于执行每个数组元素的函数
currentValue: 必需参数,当前数组的元素
index: 可选参数。当前元素的索引
arr: 可选参数。当前元素所属的数组对象,即原始数组
thisValue
可选参数。 对象作为该执行回调时使用,传递给函数,用作“this”的值。
如果省略了thisValue,或者传入null、undefined,那么回调函数的this为全局对象
filter() 应用
给个例子,实现一个让数组去重的操作
不使用filter
let arr1 = [1, 1, 2, 5, 2, 3, 5, 4, 8];
let arr2 = []
for (let i = 0; i < arr1.length; i++) {
if (arr1.indexOf(arr1[i]) === i) {
arr2.push(arr1[i])
}
}
console.log(arr2) //[1, 2, 5, 3, 4, 8]
console.log(arr1) //[1, 1, 2, 5, 2, 3, 5, 4, 8]
使用filter
let arr1 = [1, 1, 2, 5, 2, 3, 5, 4, 8];
let arr2= arr1.filter((currentV, index, self)=> {
return self.indexOf(currentV) === index
})
console.log(arr2) //[1, 2, 5, 3, 4, 8]
console.log(arr1) //[1, 1, 2, 5, 2, 3, 5, 4, 8]
Array.prototype.reduce
reduce() 方法接收一个函数callback作为累加器,对数组中的每个元素执行该callback函数,最终的结果是计算为一个值。
语法
array.reduce(function(total, currentValue, currentIndex, arr), initalValue)
参数说明
function(total, currentValue, currentIndex, arr)
必需参数。函数参数。用于执行每个数组元素的函数
total:必需参数,初始值,或者是计算结束后的返回值,即每次函数执行结束后的返回值,也可以叫(上一次的值)
currentValue: 必需参数,当前数组的元素
currentIndex: 可选参数。当前元素的索引
arr: 可选参数。当前元素所属的数组对象,即原始数组
initalValue
可选参数。 第一次计算的初始值
reduce()应用
给个例子,四舍五入后计算数组元素的求和
不使用reduce
let array = [1.5, 1.6, 2.0, 5.6, 2.9];
let sum = 10;
for (let index = 0; index < array.length; index++) {
sum = sum + Math.round(array[index]);
}
console.log(sum) //15
console.log(array) //[1.5, 1.6, 2.0, 5.6, 2.9]
使用reduce
let array = [1.5, 1.6, 2.0, 5.6, 2.9];
let sum = array.reduce((total, currentV) => total + Math.round(currentV), 10)
console.log(sum) //25
console.log(array) //[1.5, 1.6, 2.0, 5.6, 2.9]
类型二:函数作为返回值输出
这个比较好理解,就是一个函数的返回值 还是一个函数类型
函数作为返回值输出的应用
封装的一个isType函数
//判断类型 Object.prototype.toString.call(obj)
let isString = obj => Object.prototype.toString.call(obj) === '[object String]'
let isArray = obj => Object.prototype.toString.call(obj) === '[object Array]'
let isNumber = obj => Object.prototype.toString.call(obj) === '[object Number]'
alert(isString('123')) //true
alert(isArray([1, 7])) //true
alert(isNumber(1)) //true
//封装isType 进行判断类型
let isType = type =>obj => {
return Object.prototype.toString.call(obj) === `[object ${type}]`
}
alert(isType('Number')(1))//true
alert(isType('String')('123')) //true
alert(isType('Array')([1, 7])) //true
alert(isType('Number')(1)) //true
备注: 函数内部继续返回函数的话 调用方法是 函数名(函数参数)(内部函数1参数)。
类似这种函数返回另外一个函数的类型,调用的方式是连续执行调用不同层的函数。最外层只是构建了一个外层函数体对象。
相关
初次接触高阶函数,有不正确的请多指导纠正
引用参考:https://muyiy.cn/blog/6/6.1.html#函数作为返回值输出