React/JavaScript：该函数中的‘item’参数来自何处？

咱先把这个函数和它的使用场景拆解开来讲，你就明白item是哪来的了：

首先，byQuery是个高阶函数——意思是它本身不直接处理数据，而是返回另一个用来处理数据的函数。当你调用byQuery(query)时，它会吐出这个匿名函数：

function(item) {
  return !query || item.name.toLowerCase().includes(query.toLowerCase());
}

再看你的使用场景：

<List list={(list || []).filter(byQuery(query))} />

这里的核心是数组的filter方法，它的工作逻辑是：

• 遍历(list || [])这个数组里的每一个元素
• 把当前遍历到的元素，作为参数传给你传入filter的回调函数（也就是刚才byQuery(query)返回的那个匿名函数）
• 这个被传进去的当前元素，就是你疑惑的item！

举个具体的例子，如果list是这样的：

const list = [
  { name: "Apple", price: 5 },
  { name: "Banana", price: 3 },
  { name: "Orange", price: 4 }
];

当filter开始工作时：

• 第一次遍历，把{ name: "Apple", price: 5 }传给item，判断是否符合过滤条件
• 第二次遍历，把{ name: "Banana", price: 3 }传给item
• 第三次遍历，把{ name: "Orange", price: 4 }传给item

另外再补充下这个函数的作用：如果query是空值或者不存在，就返回数组里所有元素；如果有query，就把元素的name转成小写，检查是否包含转成小写的query，实现不区分大小写的模糊过滤，非常适合搜索筛选的场景~

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