JavaScript 数组去重有哪些方法

在日常写网页代码时，我们常常会遇到“重复内容”的问题——比如用户提交的表单里有重复的兴趣标签，或者接口返回的商品列表里出现了重复项。这时候，用JavaScript把重复的内容删掉，也就是“数组去重”，就成了前端开发里很实用的小技能。

最常用的：indexOf判断法

这应该是很多初学者最先想到的方法，逻辑就像你整理抽屉时，把见过的东西放一边，新的才放进新盒子。具体来说，就是先准备一个空数组存结果，再遍历原数组的每一项，用indexOf判断结果数组里有没有当前项，没有就加进去。

举个例子，原数组是[1,2,2,3,4,4,4]，遍历到第一个2时，空数组里没有2，就加进去；遍历到第二个2时，用indexOf查结果数组，会返回-1（表示没找到），就跳过。最后得到的[1,2,3,4]就是去重后的结果。这个方法好懂，不需要额外的工具，但缺点是如果数组里有对象，indexOf会判断引用地址，所以只能用在纯数字、字符串的简单数组上。

偷懒神器：Set去重法

如果想少写几行代码，用ES6的Set就很合适。Set是一种“不允许重复值”的特殊数据结构，就像你把一堆东西倒进一个只认唯一物品的收纳盒，倒完再拿出来，自动就去掉了重复项。

用法也简单，用new Set()把原数组转成Set，再用扩展运算符...转成新数组。比如const arr = [1,2,2,3]; const uniqueArr = [...new Set(arr)];，得到的uniqueArr就是去重后的[1,2,3]。这个方法代码短，性能也比indexOf方法好，同样适合纯基本类型值的数组，不过兼容性上，旧浏览器可能不支持ES6，要是不需要兼容老项目，这是首选。

适合复杂场景：对象键值对法

要是数组里有重复的对象或者更复杂的内容，Set就不好用了，这时候可以用“对象的键不能重复”的特性。就像给每个东西贴一个唯一的标签，标签重复就说明是同一个。

具体来说，创建一个空对象，遍历原数组的每一项，把项的值作为对象的键（因为对象键必须唯一），值随便设个标记，最后把对象的键再转成数组。比如原数组是[{id:1}, {id:2}, {id:1}]，遍历到第二个{id:1}时，对象里已经有1这个键，就跳过。这个方法能处理对象类的数组，不过要注意，如果数组里有数字和字符串的重复项，比如1和"1"，会被当成同一个键，得根据实际场景调整。

性能优先：filter加includes法

如果数组很长，想找性能和代码简洁的平衡，filter加includes是不错的选择。filter会遍历数组，返回符合条件的项，includes用来判断当前项在结果里有没有出现过。

比如const arr = [1,2,2,3]; const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index);，这里的逻辑是：只有当前项第一次出现时，才会被保留。因为如果是重复项，indexOf返回的是第一次出现的索引，和当前index不一样，就会被过滤掉。这个方法兼容旧浏览器，处理简单数组的性能也不错，比indexOf单独用高效一点。

这几种方法各有各的用处，新手可以先从Set法练手，处理复杂场景再试试对象法，慢慢就能根据实际需求选最合适的了。