js数组去重的六种方法

数组方法的详细介绍可以看这里：https://blog.csdn.net/LQ313131/article/details/126315166

第一种：双层for循环

思路：将数组元素两两进行比较，如果相等，则删除其中一个，并修正数组下标

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr){
  for(var i = 0; i < arr.length; i++){
    for(var j = i + 1; j < arr.length; j++){
      if(arr[i] === arr[j]){
        //删除第j个元素
        arr.splice(j, 1)
        //修正数组下标
        j--
      }
    }
  }
}
unique(arr)
console.log(arr); //[ 1, 'yezi', 2, 3, 4 ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

第二种：使用indexOf() 或者 lastIndexOf()

思路：indexOf() 和lastIndexOf()用于查找数组元素，找到了返回元素下标，找不到返回-1，因此我们可以定义一个新的空数组用来存放数组去重后的值，然后利用indexOf()判断数组元素的值是否存在新数组中，如果不存在，则将它添加到新数组中；如果存在，说明是重复的值，不需要理会。

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr){
  //定义一个空的新数组，用来存放不重复的值
  var newArr = []
  for(var i = 0; i < arr.length; i++){
    //判断数组元素的值是否已经存在新数组中
    if(newArr.indexOf(arr[i]) === -1){
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]
1
2
3
4
5
6
7
8
9
10
11
12
13

将indexOf() 改成 lastIndexOf() 也是一样的。

当然，我们还可以把for循环改成forEach，这样显得更加高级一点：

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr){
 var newArr = []
 arr.forEach(function(item){
  //判断数组元素的值是否已经存在新数组中
    if(!newArr.includes(item)){
      newArr.push(item)
    }
 })
 return newArr
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]
1
2
3
4
5
6
7
8
9
10
11
12

第三种：使用includes()

思路：includes()方法也是用来查找数组元素的，找到了返回true，没找到返回false，因此思路也是和第二种一样的。

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr){
  //定义一个空的新数组，用来存放不重复的值
  var newArr = []
  arr.forEach(function(item){
    //判断数组元素的值是否已经存在新数组中
    if(!newArr.includes(item)){
      newArr.push(item)
    }
  })
  return newArr
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]
1
2
3
4
5
6
7
8
9
10
11
12
13

第四种：使用filter+indexOf() / lastIndexOf() / includes()

思路：filter方法对数组元素进行筛选，找出符合条件的数组元素，并返回一个新数组。思路也是和第二种一样的。

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr) {
  var newArr = []
  return arr.filter(function (item) {
    return newArr.indexOf(item) === -1 ? newArr.push(item) : false
  })
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]
1
2
3
4
5
6
7
8

使用 includes()

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
function unique(arr) {
  var newArr = []
  return arr.filter(function (item) {
    return newArr.includes(item) ? false : newArr.push(item)
  })
}
console.log(unique(arr)); //[ 1, 'yezi', 2, 3, 4 ]
1
2
3
4
5
6
7
8

第五种：使用Set去重

Set是一个构造函数，Set会自动筛掉重复的值，因此使用Set可以很轻松实现数组去重。

var arr = [1, 'yezi', 2, 1, 3, 4, 2, 'yezi', 4]
var set=new Set(arr);
console.log(set); //{ 1, 'yezi', 2, 3, 4 }
//将返回值转成数组
console.log(Array.from(set)); //[ 1, 'yezi', 2, 3, 4 ]
//或者使用 console.log([...set]);
1
2
3
4
5
6

第六种：使用js工具库lodash中的方法

关于lodash介绍可以看这里：https://blog.csdn.net/LQ313131/article/details/126392596

使用lodash中的_.uniq(array) 方法可以实现数组去重：

var _ = require('lodash');
console.log(_.uniq([2, 1, 2, 3, 4, 4])); //[ 2, 1, 3, 4 ]
1
2