JavaScript数组filter()与includes()配合过滤的工作原理解析

先把涉及到的语法点挨个说清楚，没有复杂术语：

• filter() 是数组自带的筛选方法：它会从头到尾遍历数组的每一个元素，对每个元素执行你写的判断逻辑，只有判断结果为真的元素会被保留，最后把所有保留的元素拼成一个新数组返回，不会修改原数组。
• includes() 是数组自带的存在判断方法：它会检查数组里是否存在你传入的值，存在就返回true（真），不存在就返回false（假）。
• 代码里的!是JS的逻辑非运算符，作用非常简单：把后面跟着的布尔值反过来，真变假、假变真，就是大家常说的「取反」。

拿你举的调用示例removeFromArray([1, 2, 3, 4], 3)，拆解核心代码return array.filter(val => !num.includes(val))的完整运行流程：

1. 函数参数里写了...num，这是剩余参数语法，你调用时传的所有参数都会被打包成一个数组存在num里，这个例子里num的值是[[1,2,3,4], 3]。第一行代码let array = num[0]就是把第一个参数（也就是你要处理的目标数组[1,2,3,4]）取出来存好。
2. 开始执行filter遍历目标数组：每遍历到一个元素，就把这个元素暂时命名为val，执行后面的判断逻辑。
3. 对每个val，首先执行num.includes(val)，检查这个val是不是存在于参数数组num里：
   • 遍历到值为1的元素：num里存的是目标数组和3，没有单独的1，所以返回false
   • 遍历到值为2的元素：同理num里没有单独的2，返回false
   • 遍历到值为3的元素：num里确实存了3这个参数，返回true
   • 遍历到值为4的元素：num里没有单独的4，返回false
4. 因为前面加了!取反，上面的判断结果会被翻转：
   • 1、2、4对应的结果从false变成true，满足filter的保留条件，会被留在新数组里
   • 3对应的结果从true变成false，不满足保留条件，就被过滤掉了
5. 遍历完成后，filter把保留下来的1、2、4拼成新数组[1,2,4]返回，就是你要的效果。

补充个小细节：如果调用的时候传多个要移除的值，比如removeFromArray([1,2,3,4], 2, 3)，逻辑也是完全一样的——所有出现在后续参数里的值，都会在判断时被includes识别到，取反后返回false被过滤掉，最终返回[1,4]。

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