JavaScript中的数组去重

158 阅读2分钟

1. for循环+indexOf()

声明一个新数组,把数组中没有的元素push进去

function unique(arr){
  var newArr = []
  var item
    var len = arr.length
  for(var i = 0; i < len; i++){
    item = arr[i];
    if(newArr.indexOf(item) === -1){
      newArr.push(item)
    }
  }
  return newArr
}
测试代码
var arr1 = [1,2,1,null,null,undefined,undefined,'1','1',true,true]
unique(arr1) //  [1, 2, null, undefined, "1", true]

2. forEach()+indexOf()

没有for循环的效率高

function unique(arr){
  var newArr = []
  arr.forEach(function(item){
    if(newArr.indexOf(item) === -1){
      newArr.push(item)
    }
  })
  return newArr
}
测试代码
var arr1 = [1,2,1,null,null,undefined,undefined,'1','1',true,true]
unique(arr1) //  [1, 2, null, undefined, "1", true]

3. reduce()+indexOf()

function unique(arr){
  return arr.reduce(function(prev, next){
    if(prev.indexOf(next) === -1){
      prev.push(next)
    }
    return prev
  }, [])
}
测试代码
var arr1 = [1,2,1,null,null,undefined,undefined,'1','1',true,true]
unique(arr1) //  [1, 2, null, undefined, "1", true]

4. indexOf()判断

判断数组元素的indexOf索引判断和元素本身的索引是否相同

function unique(arr){
  var newArr = [arr[0]]
  var item
    var  len = arr.length
  for(var i = 1; i < len; i++){
    item = arr[i]
    if(arr.indexOf(item) === i){
      newArr.push(item)
    }
  }
  return newArr
}
测试代码
var arr1 = [1,2,1,null,null,undefined,undefined,'1','1',true,true]
unique(arr1) //  [1, 2, null, undefined, "1", true]

5. 排序去重sort()

数组排序,判断相邻项是否相等

function unique(arr){
  var newArr = [arr[0]]
  var item
  var len = arr.length
  arr.sort()
  for(var i = 1; i < len; i++){
    item = arr[i]
    if(item !== arr[i - 1]){
      newArr.push(item)
    }
  }
  return newArr
}
测试代码
var arr1 = [1,2,1,null,null,undefined,undefined,'1','1',true,true]
unique(arr1) //  [1, "1", 2, null, true, undefined]

6. 嵌套for循环

嵌套for循环,判断数组每一项是否相等

function unique(arr){
  var newArr = []
  var  len = arr.length
  for(var i = 0; i < len; i++){
    for(var j = i + 1; j < len; j++){
      if(arr[i] === arr[j]){
        j = ++i
      }
    }
    newArr.push(arr[i])
  }
  return newArr
}
测试代码
var arr1 = [1,2,1,null,null,undefined,undefined,'1','1',true,true]
unique(arr1) //  [2, 1, null, undefined, "1", true]

7. 临时对象

数组各项值当作对象的key,判断key对应的值是否存在,不存在push进新数组 特点:效率高,内存占用大

function unique(arr) {
  var ret = []
  var hash = {}

  for (var i = 0; i < arr.length; i++) {
    var item = arr[i]
    var key = typeof(item) + item
    if (hash[key] !== 1) {
      ret.push(item)
      hash[key] = 1
    }
  }
  return ret
}
测试代码
var arr1 = [1,2,1,null,null,undefined,undefined,'1','1',true,true]
unique(arr1) //    [1, 2, null, undefined, "1", true]

8. 集合转换

将数组转为集合,抛弃多余数值 ,利用Array.from将集合转为数组返回

function unique(arr){
  return Array.from(new Set(arr));
}
测试代码
var arr1 = [1,2,1,null,null,undefined,undefined,'1','1',true,true]
unique(arr1) //    [1, 2, null, undefined, "1", true]

9. 总结

建议看看参考链接,有些太高深

10. 参考链接

  • JavaScript专题之数组去重 https://github.com/mqyqingfeng/Blog/issues/27
  • JS数组去重方法最优解 https://segmentfault.com/q/1010000000262609
  • 从 JavaScript 数组去重谈性能优化 https://github.com/lifesinger/blog/issues/113
  • 微软面试--数组去重方法 https://blog.csdn.net/hlinghling/article/details/52050315
  • 也谈JavaScript数组去重 https://www.toobug.net/article/array_unique_in_javascript.html
  • 六种方法实现JavaScript数组去重 https://blog.csdn.net/q1056843325/article/details/73277063