请教JavaScript中filterBy函数返回箭头函数的语法及person参数来源

语法解释 #

1. 核心逻辑说明 #

你看到的filterBy是高阶函数，意思是它执行后会返回另一个函数。你困惑的person是返回的这个函数的参数，它不需要你手动定义，是Array.filter方法遍历数组时自动传入的每一项元素。

2. 完整展开的等价代码 #

先展开filterBy的所有简写语法：

const filterBy = function(term) {
  // 搜索词提前转小写，避免重复计算
  const searchTermLower = term.toLowerCase();
  // 返回的这个函数就是filter的回调函数
  return function(person) {
    // 遍历当前person对象的所有属性（示例中是name、number）
    return Object.keys(person).some(function(prop) {
      // 只要有一个属性的值包含搜索词，就返回true，该person会被保留
      return person[prop].toLowerCase().indexOf(searchTermLower) !== -1
    })
  }
}

再展开persons.filter(filterBy(searchTerm))的等价写法：

你写的调用代码和下面这段效果完全一致，可以更直观看到person的来源：

const searchTermLower = searchTerm.toLowerCase();
const filterPerson = persons.filter(function(person) {
  return Object.keys(person).some(prop => 
    person[prop].toLowerCase().indexOf(searchTermLower) !== -1
  )
})

3. 运行流程拆解 #

• 执行filterBy(searchTerm)时，先把搜索词转成小写存到searchTermLower变量中，返回匿名的回调函数
• 这个匿名函数被传入filter方法，filter开始遍历persons数组：每拿到数组里的一个person对象，就把它作为参数传给这个匿名函数，判断是否符合过滤条件
• 这里用到了闭包特性：返回的匿名函数可以访问外部已经执行完的filterBy函数里的searchTermLower变量，不用每次遍历都重复处理搜索词，性能更优

内容的提问来源于stack exchange，提问作者legacy