JavaScript数组filter方法结合indexOf实现去重的运行原理疑问

原理说明 #

首先明确两个API的核心特性：

• Array.prototype.indexOf(element)：接收目标元素作为入参，返回该元素在数组中第一次出现的下标，找不到则返回-1
• Array.prototype.filter(callback)：遍历数组每一项，回调返回值为true的元素会被保留到最终返回的新数组中

你这段去重逻辑的核心就是：仅保留元素第一次出现的对应项，后续重复出现的同值元素全部过滤。 #

逐行遍历验证（以你给出的数组[55, 44, 55, 30, 30]为例） #

我们逐个看每一次遍历的判断结果：

1. 当前元素e=55，当前索引i=0，x.indexOf(55)返回该元素第一次出现的索引0，0===0结果为true，保留该元素
2. 当前元素e=44，当前索引i=1，x.indexOf(44)返回该元素第一次出现的索引1，1===1结果为true，保留该元素
3. 当前元素e=55，当前索引i=2，x.indexOf(55)依旧返回第一次出现的索引0，0===2结果为false，过滤该元素
4. 当前元素e=30，当前索引i=3，x.indexOf(30)返回该元素第一次出现的索引3，3===3结果为true，保留该元素
5. 当前元素e=30，当前索引i=4，x.indexOf(30)返回第一次出现的索引3，3===4结果为false，过滤该元素

最终过滤得到的数组就是[55, 44, 30]，完成去重。 #

补充说明 #

• 该方法仅适用于基础类型（数字、字符串、布尔值、null、undefined）的数组去重，引用类型（对象、数组、函数）因为存的是内存地址，indexOf无法匹配值相同但引用不同的元素
• 该方法时间复杂度为O(n²)，如果处理的数组长度很大，更推荐用Set实现去重：const unique = [...new Set(x)]，时间复杂度为O(n)性能更好

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