「JS数组去重」常见方式

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

数组去重不管是工作中，还是在面试时都是经常会遇见的问题。很多场景都会遇到，下面介绍几种比较经常容易想到的方式。

1、双for

双for去重主要就是，外层循环从第一个元素开始遍历，内层循环从外层元素的后一个元素开始遍历（i + 1）。比较内外层元素是否相等，如相等，说明元素重复，删除内层重复元素。

let arr = [ 11, 12, 13, 11, 11, 14, 15, 16, 11 ]

for (let i = 0; i < arr.length; i++) {
    for (let j = i + 1; j < arr.length; j++) {
        if (arr[i] === arr[j]) {
            arr.splice(j, 1)
            j--
        }
    }
}

console.log(arr)    // [11, 12, 13, 14, 15, 16]

Tips

splice 可以实现数组中的删除、新增和替换。并以数组形式返回被修改的内容。此方法会改变原数组。

• 「删除」 可以删除任意数量的项 splice(索引，要删除的项数)

  const arr = [1,2,3,4]
  arr.splice(1,2)		
  
  // arr = [1,4]
  

• 「插入」 可以在指定位置插入任意数量的项 splice(起始位置，0 （要删除的项数）, 要插入的项)，插入时第二个参数为0

  const arr = [1,2,3,4]
  arr.splice(1,0,5,6,7)
  
  // arr = [1,5,6,2,3,4]
  

• 「替换」 可以在指定位置替换任意数量的项，且同时删除任意数量的项 splice(起始位置，要删除的项数, 要插入的项)，删除项和插入项数目不需要相等

  const arr = [1,2,3,4]
  arr.splice(1,2,5,6,7)
  
  // arr = [1,5,6,7,4]
  

2、Set

Set()是ES6新的数据结构，它类似数组，但值是唯一的，没有重复的值，所以利用他来进行数据去重。 Set()函数可以接受一个数组作为参数，用来初始化。

let arr2 = [ 11, 12, 13, 11, 14, 15, 16, 11 ]
console.log([ ...new Set(arr2) ])

// [11, 12, 13, 14, 15, 16]

可以用Set来去掉字符串中重复字符

console.log([ ...new Set('123123') ].join(''));

// 123

上面两种方式是我们平时开发中最容易想到的，下面使用 filter 和 indexOf结合方式来进行数组去重

3、filter + indexOf

• filter()会创建一个新数组，满足条件为true保留该值，false不保留。

  • Array.filter(function(当前元素, 当前元素索引, 数组本身){ })

• indexOf()返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1

let arr3 = [ 3, 'a', 'b', 'c', 'd', 'a', 3, 3 ]
const newArr = arr3.filter((item, index) => {
    return arr3.indexOf(item) === index
})
console.log(newArr)

// [ 3, 'a', 'b', 'c', 'd']

数组去重的方式其实有很多，可以根据自己的需求去选择哪种方式，实质上的方式都是大同小异的。