亲爱的小伙伴,对于数组javascript中的数组去重方法你知道多少种呢?学会如何对数组进行去重对于javascript的学习来说也是十分重要的,下边就让我来分享一下我所知道的集中数组去重的方法吧!

1.使用indexOf方法进行数组去重

实现原理:先创建一个新的空数组,然后遍历传递进来的数组,通过indexOf方法判断传入的数组中的元素是否在新创建的数组中已经存在,如果不存在,则将这个元素添加到这个新数组中,最后返回这个新数组

去重代码如下:

function uniqArr(arr) {
  var newArr = [] //创建一个空数组
  for (var i = 0; i < arr.length; i++) {//遍历要去重的数组中的元素
    if (newArr.indexOf(arr[i]) == -1) { //判断数组中的元素是否在新数组中已经存在
      newArr.push(arr[i])//如果新数组中没有该元素,就将其填充到新数组中
    }
  }
  return newArr  //最后返回这个新数组
}

2.使用sort()数组排序api去重

实现原理:先使用sort方法对传入函数的数组进行从小到大排序,然后创建一个新数组,先将排序好的数组的第一个元素添加到新数组中。然后从第二个元素开始遍历排序好的数组,让每个数组元素都和它的前一个元素比较,如果他们的值不相同,则将该元素值添加到新数组中,最终返回这个新数组。

去重代码如下:

function uniqArr(arr) {
  var sortArr = arr.sort(function (a, b) {
    return a - b
  })
  var newArr = []
  newArr[0] = sortArr[0]
  for (var i = 1; i < sortArr.length; i++) {
    if (sortArr[i] != sortArr[i - 1]) {
      newArr.push(sortArr[i])
    }
  }
  return newArr

}

3.使用splice()方法去重

实现原理:遍历传递进函数的数组,让它和它之后的每一个元素进行比较,如果后边的元素中,有和它的值相等的,就将这个元素通过splice方法删除,然后对应的将数组长度-1,相应下标-1

去重代码如下:

function uniqArr(arr) {
  var len = arr.length
  for (var i = 0; i < len; i++) {
    for (var j = i + 1; j < len; j++) {
      if (arr[i] == arr[j]) {
        arr.splice(j, 1)
        // 修正下标
        j--
        len--
      }

    }
  }
  return arr
}

4.使用lodash的uniqu方法去重

首先得先安装lodash第三方包

npm install lodash --save

然后导入lodash

const _ = require('lodash')

使用lodash对数组进行去重

var arr = [1,2,2,3,3,4,7,7,8]
var newArr = _.uniq(arr)

5.使用对象属性的方法

实现原理:首先在函数中创建一个空对象和一个空数组,然后遍历传递进函数的数组,然后判断数组元素是否是对象obj的属性,如果它不是obj对象的属性,那么就证明这个数组元素的值在之前是没有出现过的,此时就可以将这个数组元素添加到newArr这个新数组中,然后给为obj添加上以这个数组元素值为属性名的属性,并设置其值为true。下一次再遍历到相同的值,!obj[arr[i]]的值就会为false,就不会执行if判断下的代码,这就实现了数组去重的效果。

去重代码如下:

function uniqArr(arr) {
  var obj = {}
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!obj[arr[i]]) {
      newArr[newArr.length] = arr[i]
      obj[arr[i]] = true
    }
  }
  return newArr
}

6.使用Set构造函数方法

实现原理:将传递进来的数组通过Set构造函数会自动去重后形成Set类型的数据,然后再调用数组的from静态方法,将数据转成数组类型并返回。

去重代码如下:

function uniqArr(arr) {
  var newArr = new Set(arr)
  return Array.from(newArr)
}

7.使用map数据结构去重方法

实现原理:先在函数中创建一个map对象和一个新的空数组,然后遍历传入的数组,判断遍历到的数组元素是否是map已有属性,如果不是,将其给map设置上,然后再将该元素添加到新数组中,最后返回这个新数组。

去重代码如下:

function uniqArr(arr) {
  var map = new Map()
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!map.has(arr[i])) {
      map.set(arr[i])
      newArr[newArr.length] = arr[i]
    }
  }
  return newArr
}

8.使用hasOwnProperty方法去重

实现原理:先在函数中创建一个空对象和一个新的空数组,通过循环遍历传入函数的数组,判断遍历到的数组元素是否是obj对象的已经拥有的属性,如果不是则将该数组元素添加到新数组中,并为obj对象设置以该数组元素值为属性名的属性,属性值设置为true,这样就保证了这个新数组中元素的唯一性,最后返回这个新数组。

去重代码如下:

function uniqArr(arr) {
 var obj = {}
 var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!obj.hasOwnProperty(arr[i])) {
      newArr[newArr.length] = arr[i]
      obj[arr[i]] = true
    }
  }
  return newArr
}

9.使用双重for循环去重

实现原理:先创建一个新的空数组,然后循环遍历传入函数的数组,每次都让遍历到的数组元素和他后边的所有元素进行比较,如果有值和它相同的,就将它的值设置为一个空字符串,比较完毕后,判断这个元素是不是也是一个空字符串,如果不是,那就将其添加到新数组中,最后返回这个新数组。

去重代码如下:

function uniqArr(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        arr[j] = ' '
      }
    }
    if (arr[i] != ' ') {
      newArr.push(arr[i])
    }
  }
  return newArr
}

10.使用includes方法去重

实现原理:先创建一个新的空数组,然后循环遍历传入函数的数组,每次都调用includes方法判断新数组中是否包含了这个数组元素,如果没有包含,就将这个数组元素添加到这个新数组中,最后返回这个新数组。

去重代码如下:

function uniqArr(arr) {
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (!newArr.includes(arr[i])) {
      newArr.push(arr[i])
    }
  }
  return newArr
}

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐