JavaScript数组的去重

数组的去重在我们的日常开发中有时候会使用到，但是一般都是后端去进行数据的去重操作。

但是在面试当中我们经常会被面试官问到数组去重的方法有哪些？那么我们就来看看数组的去重都有哪些可以实现的方式。

1.利用 new Set()

// 利用ES6中Set构造函数生成Set数据结构，然后利用Array.from()方法进行转换（比较常用且方便）
function unique (arr) {
  return Array.from(new Set(arr))
  // return [...new Set(arr)] 同样可行，只是简化了代码
}
const arr1 = [1, 1, 'true', 'true', true, true, 15, 15, false, false, undefined, undefined, null, null, NaN, NaN, 'NaN', 0, 0, 'a', 'a', {}, {}];

console.log(unique(arr1))
// [1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}, {…}]

注意：不考虑兼容性的情况下，这种代码是最少的，但是这种方法不能够去除空对象{...}，需要使用高阶方法。

2.利用 Array.sort()

// 利用sort进行排序方法，根据排序后的结果进行遍历及相邻元素对比
function unique (arr) {
  if (!Array.isArray(arr)) {
    return
  }
  arr = arr.sort()
  console.log(JSON.stringify(arr), 'arr---------')
  // [0,0,1,1,15,15,null,null,"NaN",{},{},"a","a",false,false,null,null,"true","true",true,true,null,null]
  const array = [arr[0]]
  console.log(JSON.stringify(array), 'array-----')
  // [0]
  for (let i = 1; i < arr.length; i++) {
    if (arr[i] !== arr[i - 1]) {
      array.push(arr[i])
    }
  }
  return array
}
const arr1 = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]
console.log(unique(arr1), 'unique--------------')
// [0, 1, 15, NaN, NaN, 'NaN', {…}, {…}, 'a', false, null, 'true', true, undefined]

注意：没有去除NaN和空对象{...}

3.利用 Array.splice()

// 利用for循环嵌套，然后splice去重
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]) {         //第一个等同于第二个，splice方法删除第二个
        arr.splice(j, 1);
        j--;
      }
    }
  }
  return arr;
}

let arr1 = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]
console.log(unique(arr1))
// [1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]

注意：NaN和{}没有去重，两个null直接消失了

4.利用 Array.indexof()

// 利用数组indexof方法查找该元素是否存在
function unique(arr) {
  if (!Array.isArray(arr)) {
    return
  }
  let array = []
  for (let i = 0; i < arr.length; i++) {
    if (array.indexOf(arr[i]) === -1) {
      array.push(arr[i])
    }
  }
  return array
}
var arr1 = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]

console.log(unique(arr1))
// [1, 'true', true, 15, false, undefined, null, NaN, NaN, 'NaN', 0, 'a', {…}, {…}]

注意：没有去除NaN和空对象{...}

你们会发现上面的这些方法中都是可以简单去重，但是无法去除空对象和NaN，不够严格的情况下可行，但是严格情况下的话就需要用到hasOwnProperty()

5.利用 hasOwnProperty()

function unique(arr) {
  if (!Array.isArray(arr)) {
    return
  }
  const obj = {}
  return arr.filter((item,index,arr) => {
    return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}

const arr1 = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}]
console.log(unique(arr1))
// [1, 'true', true, 15, false, undefined, null, NaN, 'NaN', 0, 'a', {…}]

这个方法可以所有都去重，其实还有很多方法可以进行简单的去重，具体要看严格性。