Javascript算法 — 数组去重

大前端 JavaScript

创建时间:2020-11-13 16:01

字数:1.1k 阅读:

一、双重for
二、排序 + 去重
三、利用对象
四、indexOf
五、lastIndexOf
六、includes
七、filter + includes
八、forEach + includes
九、splice
十、Set
十一、reduce

本文介绍js中数组去重的几种常用方式。

一、双重for

定义一个新数组，并存放原数组的第0个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。这里面用到了标志位的思想，先假设不重复var isRepeat = false，如果遇到重复的，就修改为isRepeat = true并且结束循环，循环结束后再判断isRepeat的状态从而决定是否放入新数组。

function unique (arr) {
  var newArr = [arr[0]]
  for (var i = 1; i < arr.length; i++) {
    var isRepeat = false
    for (var j = 0; j < newArr.length; j++) {
      if (arr[i] === newArr[j]) {
        isRepeat = true
        break
      }
    }
    if (!isRepeat) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

二、排序 + 去重

先将原数组排序（无论按数字大小排序还是ASCII码排序均可），再与相邻的进行比较，如果不同则存入新数组。

function unique2 (arr) {
  var sortArr = arr.sort()
  var newArr = [sortArr[0]]
  for (let i = 1; i < sortArr.length; i++) {
    if (sortArr[i] !== sortArr[i-1]) {
      newArr.push(sortArr[i])
    }
  }
  return newArr
}
console.log(unique2([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 12, 2, 3, 7]

三、利用对象

利用对象属性名不重复的特性，将数组元素作为对象属性名来取值，如果没有取到值则代表此元素是第一次被遍历到也就是第一次出现，那就把他作为对象属性名存一个值并push进新数组，下次如果再遍历到相同的元素则if不成立，不再push。

function unique3 (arr) {
  var obj = {}
  var newArr = []
  for (let i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      obj[arr[i]] = 1
      newArr.push(arr[i])
    }   
  }
  return newArr
}
console.log(unique3([1, 2, 2, 2, 3, 1, 12, 7, 12])) //  [1, 2, 3, 12, 7]

四、indexOf

利用数组的indexOf下标属性来查询。

function unique4 (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(unique4([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

五、lastIndexOf

和方法四几乎一致：

function unique5 (arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.lastIndexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique5([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

六、includes

利用数组原型对象上的includes方法。

function unique6 (arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i])
    }
  }
  return newArr
}
console.log(unique6([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

七、filter + includes

利用数组原型对象上的 filter 和includes方法，如果newArr已存在该元素，filter里就return false，否则就push并返回一个true（我这里返回的是push的返回值即数组新的length）。

function unique7 (arr) {
  var newArr = []
  newArr = arr.filter(function (item) {
    return newArr.includes(item) ? false : newArr.push(item)
  })
  return newArr
}
console.log(unique7([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

八、forEach + includes

利用数组原型对象上的 forEach 和 includes方法，和方法七几乎相同。

function unique8 (arr) {
  var newArr = []
  arr.forEach(item => {
    return newArr.includes(item) ? '' : newArr.push(item)
  })
  return newArr
}
console.log(unique8([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

九、splice

利用数组原型对象上的 splice 方法。当查找到相同元素使用splice删除，删除之后需要j--，否则会跳过一次比较。

function unique9 (arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        j--
      }
    }
  }
  return arr
}
console.log(unique9([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

十、Set

Set数据结构是ES6新增的一种数据结构，它类似于数组，其成员的值都是唯一的，本身就不允许重复。我们可以把数组转换为Set类型再重新转回为数组即可完成去重。

function unique10 (arr) {
  return Array.from(new Set(arr))
}
console.log(unique10([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

也可以这么写：

function unique10 (arr) {
  return [...new Set(arr))]
}
console.log(unique10([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

十一、reduce

function unique11 (arr) {
  return arr.reduce((newArr, current) => {
    return newArr.includes(current) ? newArr : newArr.concat(current)
  }, [])
}
console.log(unique11([1, 2, 2, 2, 3, 1, 12, 7, 12])) // [1, 2, 3, 12, 7]

代码不是万能的，但不写代码是万万不能的

2020/11/13 Dary记

更多干货，尽在公众号

转载请注明来源，文末有原始链接。欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 dary1112@foxmail.com