Map、findIndex与filter组合代码的功能及filter执行时机咨询

嘿，我来帮你把这段代码的逻辑拆明白！

1. .filter(note => note) 的具体用途 #

首先，这个filter的作用是过滤掉数组里所有的“假值”（falsy values）。JavaScript里的假值包括：undefined、null、0、空字符串''、false、NaN这些。

结合你这段代码的上下文来看：

laneNotes: props.lane.notes.map(id => state.notes[ state.notes.findIndex(note => note.id === id) ])

这里的map是把props.lane.notes里的每个id，转换成state.notes中对应id的note对象。但如果state.notes里找不到某个id对应的note，findIndex会返回-1，此时state.notes[-1]会得到undefined——因为数组不存在索引为-1的元素。

所以.filter(note => note)就是用来把这些undefined的项从最终的laneNotes数组里剔除掉，确保最终数组里的每一项都是有效的note对象，没有无效的空值。

2. filter的执行时机：是遍历每个note还是仅执行一次？ #

答案是：filter是在map完全遍历完所有元素、生成新数组之后，对这个新数组执行一次遍历过滤。

数组的链式调用是按顺序执行的：

1. 先执行map：遍历props.lane.notes的每一个id，生成一个包含对应note（或undefined）的新数组；
2. 再执行filter：遍历这个map生成的新数组的每一项，对每个note执行note => note的判断，只保留判断结果为“真值”的项。

简单说，map先处理完所有元素产出一个数组，filter再单独处理这个数组的每一项，不是和map同步执行的。

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