高阶函数！

什么是⾼阶函数？

⾼阶函数（Higher-order function）
⾼阶组件（Higher-order component）

• 可以把函数作为参数传递给另外⼀个函数
• 可以把函数作为另⼀个函数的返回结果

函数作为参数

在 js 中，很多数组的⽅法都是以函数作为参数的，我们可以模拟 forEach 和 filter

• forEach

forEach 语法

[ ].forEach(function(value,index,array){
　//code something
});

forEach的使用

var array1 = ['a', 'b', 'c'];
array1.forEach(function(element) {console.log(element);
});
// 每次使⽤ forEach的时候，调⽤的⽅法可能不⼀样，
// 这时候，我们可以把函数的定义交给⽤户，让⽤户在使⽤时，把函数当作参数传⼊。
function forEach(array, fn) {for (let i = 0; i < array.length; i++) {fn(array[i])}
}
// 测试
let arr = [1, 2, 3, 4]
forEach(arr, item => {console.log(item)
})

• filter

filter语法

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

filter的使用

var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter(function (x) {return x % 2 !== 0;
});
console.log(r); // [1, 5, 9, 15]function filter(arr, fn) {
let res = []
for (let i = 0; i < arr.length; i++) {if (fn(arr1[i])) {res.push(arr1[i])}
}
return res
}
// 测试
let arr1 = [1, 2, 3]
let res = filter(arr, item => {return item > 2
})
console.log(res) // [ 3 ]

函数作为返回值

如果函数作为返回值，则是⽤⼀个函数⽣成⼀个函数。

function makeFun() {let msg = 'hello function'return function () {console.log(msg)}
}
const fn = makeFn()
fn()
makeFn()()

在 JQuery 中指的是为 Dom 元素绑定⼀个只执行⼀次的事件，而在 lodash 中则是对⼀个函数只执行⼀次。我们模拟⼀下 lodash 中的 once 只执行⼀次的函数有什么意义呢？函数不是为了重复调⽤而出现的吗？ 想象⼀个场景，在做支付的时候，⼀个订单不管⽤户点多少次按钮，只执行⼀次。

function once(fn) {let done = falsereturn function () {if (!done) {done = truereturn fn.apply(this, arguments)}}
}
let pay = once(function (money) {console.log(`⽀付了:${money} RMB`)
})
pay(100)
pay(100)
pay(100)
pay(100

在闭包和函数柯⾥化中，我们会不停的使⽤。

高阶函数的意义

抽象可以屏蔽细节，只需要关注我们的⽬标。⾼阶函数就是为了抽象通⽤的问题。

// ⾯向过程的⽅式
let arr = [1, 2, 3, 4]
for (let i = 0; i < arr.length; i++) {console.log(arr[i])
}
// ⾼阶函数
arr.forEach(element => {console.log(element)
})

循环的过程可以不关注，只关注具体每次循环要做的事情。⽤ forEach 和 filter 等函数就可以解决通⽤的问题。⾼阶函数还可以使代码更加简洁。

常⽤的⾼阶函数

• forEach
• map

const map = (array, fn) => {let res = []for (let value of array) {res.push(fn(value))}return res
}
let arr = [1, 2, 3, 4]
const arr1 = map(arr, item => {return item * item
})
console.log(arr1)

• every

every 判断数组中的每⼀个元素是否都匹配某⼀个条件

let arr = [1, 2, 3, 4]
const every = (array, fn) => {// 假设全员匹配let res = truefor (let value of array) {// 通过条件进⾏判断res = fn(value)// 如果有⼀个元素不匹配，则终⽌循环，返回resif (!res) {break}}return res
}
console.log(every(arr, item => item > 0))

• filter

• every 判断数组中的每⼀个元素是否都匹配某⼀个条件

const every = (array, fn) => {// 假设全员匹配let res = truefor (let value of array) {// 通过条件进⾏判断res = fn(value)// 如果有⼀个元素不匹配，则终⽌循环，返回resif (!res) {break}}return res
}
console.log(every(arr, item => item > 0))

• some 判断数组中的元素是否满⾜某个条件

语法

arr.some(callback(element[, index[, array]])[, thisArg])
参数
callback 用来测试每个元素的函数，接受三个参数：
element 数组中正在处理的元素。
index 可选 数组中正在处理的元素的索引值。
array可选 some()被调用的数组。
thisArg可选 执行 callback 时使用的 this 值。
返回值
数组中有至少一个元素通过回调函数的测试就会返回true；
所有元素都没有通过回调函数的测试返回值才会为false。

let arr = [1, 2, 3, 4, 5, 102]
const some = (array, fn) => {let res = falsefor (let value of array) {res = fn(value)if (res) {break}}return res
}
console.log(some(arr,function isBiggerThan10(element) {return element > 10;}
))

• find/findIndex

实例
获取数组中年龄大于 18 的第一个元素

var ages = [3, 10, 18, 20];function checkAdult(age) {return age >= 18;
}function myFunction() {document.getElementById("demo").innerHTML = ages.find(checkAdult);
}

fruits 输出结果：

18

• reduce

var numbers = [65, 44, 12, 4];function getSum(total, num) {return total + num;
}
function myFunction(item) {document.getElementById("demo").innerHTML = numbers.reduce(getSum);
}

• sort

定义和用法
sort() 方法用于对数组的元素进行排序。

语法

arrayObject.sort(sortby)

在本例中，我们将创建一个数组，并按字母顺序进行排序：

<script type="text/javascript">var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"document.write(arr + "
")
document.write(arr.sort())</script>

输出：

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

总结

高阶函数

1. 理解: 一类特别的函数
   1. 情况1: 参数是函数
   2. 情况2: 返回是函数
2. 常见的高阶函数:
   1. 定时器设置函数
   2. 数组的forEach()/map()/filter()/reduce()/find()/bind()
   3. promise
   4. react-redux中的connect函数
3. 作用: 能实现更加动态, 更加可扩展的功能

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！