这段JS过滤重复元素的代码如何运行？if语句逻辑解析

基础信息 #

• 待去重输入数组：[[],[2],[2],[2,2],[1],[1,2],[1,2],[1,2,2]]
• 完整可运行的去重代码（原代码省略了fil的初始化，实际初始值是空对象）：

const fil = {};
for(let ele of result){
    if(fil[ele])continue;
    fil[ele] = ele
}
return Object.values(fil);

• 代码运行输出：[[1],[2],[],[2,2],[1,2],[1,2,2]]

核心原理说明 #

很多人第一次看这段代码摸不着头脑，核心是没记住JS对象属性键的隐式转换规则：当你用数组作为键去读写对象属性时，JS会自动调用数组的toString()方法，把数组转成逗号拼接元素的字符串作为实际键名。
对应测试用例的转换结果如下：

• 空数组[]转字符串为""
• [2]转字符串为"2"
• [2,2]转字符串为"2,2"
• [1]转字符串为"1"
• [1,2]转字符串为"1,2"
• [1,2,2]转字符串为"1,2,2"
  内容完全一致的数组，转出来的字符串肯定相同，这就是这段代码能识别重复元素的核心依据。

if判断语句的工作逻辑 #

if(fil[ele])continue;是整个去重逻辑的查重核心，执行逻辑非常直白：

1. 拿当前遍历到的元素ele转成的字符串当键，去fil对象里查询是否已经存过对应的值
2. 如果查到了值（这个测试用例里存的都是数组，所有数组都是真值，能通过if判断），说明当前元素之前已经出现过，直接执行continue跳过本轮循环后面的赋值逻辑，重复元素就不会被重复存储
3. 如果没查到值，说明是第一次遇到这个元素，if判断不成立，就会往下执行赋值逻辑fil[ele] = ele，把当前元素存到fil对应的键下，供后续遍历查重使用

逐轮遍历过程对照 #

顺着输入顺序走一遍循环，就能完全看明白执行流程：

1. 初始状态fil = {}是空对象
2. 遍历第一个元素[]：查询fil[""]不存在，if不成立，赋值fil[""] = []
3. 遍历第二个元素[2]：查询fil["2"]不存在，if不成立，赋值fil["2"] = [2]
4. 遍历第三个元素[2]：查询fil["2"]已经存了[2]，if成立，执行continue跳过，重复值被过滤
5. 遍历第四个元素[2,2]：查询fil["2,2"]不存在，if不成立，赋值fil["2,2"] = [2,2]
6. 遍历第五个元素[1]：查询fil["1"]不存在，if不成立，赋值fil["1"] = [1]
7. 遍历第六个元素[1,2]：查询fil["1,2"]不存在，if不成立，赋值fil["1,2"] = [1,2]
8. 遍历第七个元素[1,2]：查询fil["1,2"]已经存在，if成立，执行continue跳过，重复值被过滤
9. 遍历第八个元素[1,2,2]：查询fil["1,2,2"]不存在，if不成立，赋值fil["1,2,2"] = [1,2,2]

输出顺序和输入不一致的原因 #

最后执行Object.values(fil)取对象所有值的时候，输出顺序没有匹配输入的插入顺序，这是ES6之后JS对象属性的遍历规则导致的：对象遍历属性时，会先把所有能转换为正整数的字符串键按数字升序排列，剩下的字符串键再按插入顺序排列。
对应到这个例子里，fil的键中"1"、"2"可以转成正整数，所以排最前面，对应值[1]、[2]先输出；剩下的""、"2,2"、"1,2"、"1,2,2"都是非数字键，按插入顺序排列，就得到了你看到的输出结果。

补充说明 #

这个去重写法不是通用方案，有明显局限：

• 它依赖数组转字符串判重，碰到转字符串结果相同但实际内容不同的元素会误判，比如[2]和["2"]转字符串都是"2"，会被当成重复元素过滤
• 如果待去重的元素里包含0、false、""这类假值，if判断会失效：比如第一次存0时，fil[ele]赋值为0，下次再碰到0，判断fil[ele]为0是假值，会误以为没存过，导致去重失败
  只是在给出的这个测试用例里，所有待去重元素都是数组（数组不管空不空都是真值），转字符串也没有冲突，所以能得到正确的去重结果。

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