小技巧系列 — 函数作为函数的形参，可以传入函数进行运转

前言

我们通常有个需求，就是在一个函数里头，对其里面的循环遍历的每一项进行特定的处理操作，比如打印、拷贝、存储、上传、… 等等。

将外部函数作为函数的形参对应的实参，可以传入外部函数进行运转处理，可以 很大程度地减少耦合现象，也可以让 更多的“机器”（即外部函数）在该函数里面进行处理操作

实例

需求

遍历树结构，然后对树的节点进行处理

树结构如下：

let tree = [
  {
    id: '1',
    title: '节点1',
    children: [
      {
        id: '1-1',
        title: '节点1-1'
      },
      {
        id: '1-2',
        title: '节点1-2'
      }
    ]
  },
  {
    id: '2',
    title: '节点2',
    children: [
      {
        id: '2-1',
        title: '节点2-1'
      }
    ]
  }
]
复制代码

想要进行的处理操作可能是 输出、压入数组、… 等等

代码

遍历树结构的代码，其中node的就是遍历的节点（关于遍历树的逻辑这里可以不看，只是引入例子）

// 广度优先遍历
function treeForeach (tree, fn) {
  let node, list = [...tree] // 使用扩展运算符，不改变原本树结构
  while (node = list.shift()) {
    fn(node)
    node.children && list.push(...node.children)
  }
}
// 先序遍历
function treeForeach (tree, fn) {
  tree.forEach(data => {
    fn(data)
    data.children && treeForeach(data.children, fn) // 遍历子树
  })
}
复制代码

比如我们想要把node.title打印出来：

treeForeach(tree, node => { console.log(node.title) })
复制代码

其中node => { console.log(node.title) } 对应的就是 treeForeach 函数里面的 形参 fn

再比如我们想把node.title压入数组：

let arr = []
treeForeach(tree, node => { 
    arr.push(node.title)
})
console.log(arr)
复制代码