JavaScript学习-高阶函数二

这是我参与11月更文挑战的第13天，活动详情查看：2021最后一次更文挑战

上一篇文章简单学习了 高阶函数的概念及初识, 本篇继续学习 JavaScript 高阶函数的一些用法

前几篇文章-直达列表 学习了 JavaScript 并不完美但是不影响其运行的一些神奇"bug":

JavaScript 高阶函数-二

高阶函数 Higher-order function

很多时候我们完全可以将重复性的工作抽离出来, 作为一个功能函数, 然后将这个功能函数传递给一个普通函数

高阶函数|廖雪峰wiki: JavaScript 的函数其实都指向某个变量。既然变量可以指向函数，函数的参数能接收变量，那么一个函数就可以接收另一个函数作为参数，这种函数就称之为高阶函数。

理解-高阶函数 : 它允许我们不仅对值, 而且可以对 操作(功能函数 actions) 进行抽象. 对其他函数进行操作, 一个函数将其他函数作为参数 或者 返回其他函数来进行操作, 这样的函数都称之为 高阶函数.

高阶函数的具体使用

其实高阶函数还是很常见的, 比如数组的一些遍历方法, 允许我们传入一个自定义的方法用于对数组的单个元素进行修改.

arr.forEach((callFn) => {
  // 这里传递的就是一个方法函数 对元素进行处理
  // 而 forEach()这个函数就是高阶函数了
})

function greatefn(x, y, fn) {
  return fn(x) + fn(y)
}

let x = 1, y = -1
fn = Math.abs

greateFn(x, y, fn)
// return Math.abs(1) + Math.abs(-1)
// -> 2

Vue 开发中使用的高阶函数:

在 Vue 项目开发中, 我们常常通过使用高阶函数来简化我们的代码:

比如下面简单的需求: 找出数据中符合要求的内容:(这里数组中大于10的数据并返回保存)

const nums = [1, 2, 3, 5, 7, 9, 99]
let newarr = []
for(let i = 0; i < nums.length; i++) {
  if(nums[i] > 10) {
  arr[i] = nums[i]
}

而这样的需求, 使用高阶函数则只需要一行代码

let newarr = nums.filter(function(item) {
  return item > 10
})
console.log(newarr) // [99]

这也是众多高阶函数的封装的一个例子. 需要我们灵活使用