关于js数组去重的一些小九九

实际上点进来的时候,你就会大吃一惊的发现,这里集合了多少种javascript数组去重的方法,为了让点进来的人爱上这个博客,我可谓是撸尽了脑汁才整理了好久好久好久好久,还一个个的试验了一遍这些方法,不管是简单的[1,2,3,4]还是数组对象,还是根据数组对象的某一个元素来去重,可谓是煞费苦心啊!

我好想多bb几句,可是我严谨的爱学习的精神不允许我这样了。

  • 简单数组,比如
[1, 2, 3, 4, 4, 3, 2, 2, 3, 4, 5]

这种我们是不是一看到就想到了!循环!排序!循环!比较!证明你还挺正常的~

1. 第一种方法就是 双重循环咯,然后判断一下前一项和后一项的是否相等,利用数组的splice直接把这一项卡擦剪掉!注意思考,当数组对象的时候你该怎么办呢?

  simpleEqual(arr) {
    const len = arr.length
    for(let i = 0; i < len; i++) {
      for(let j = i + 1; j < len; j++) {
        if (arr[j] === arr[i]) {
          arr.splice(j, 1)
        }
      }
    }
    console.log(arr)
  }

2. 当然,我们还可以利用map字典的不重复特性来搞点事情!result就是我们经过去重的

  simpleMapEqual(arr) {
    const len = arr.length
    const map = {}
    const result = []
    for (let i = 0; i < len; i++) {
      if (!map[arr[i]]) {
        map[arr[i]] = true
        result.push(arr[i])
      }
    }
    console.log(result) 
  }

当然,我们还可以写的骚气一点?让别人以为是什么新语法!

  simpleMapEqual2(arr) {
    const len = arr.length
    const map = {}
    const result = []
    for (let i = 0; i < len; i++) {
      map[arr[i]] ? '' : map[arr[i]] = true && result.push(arr[i])
    }
    console.log(result) 
  }

啊哦!至于为什么这么写,你可以打我,我就告诉你!
3. 第三种方法,好像循环的话没什么美感啊!能不能来一点。。。。嗯。。。。稍微骚一点操作啊,循环已经满足不了我装逼的翅膀了!没问题,双卡双待的杜蕾斯都没问题,何况js!
我们可以利用ES6 set不会添加重复成员的属性,来搞点乐趣。

  middleSet(arr) {
    return [...new Set(arr)]
  }

好吧,我承认骚过头了,一句话就。。。先利用set不重复的特性,再利用解构赋值把set展开变成一个新数组
如果我们来个set的慢动作,或许更好理解一些. 先新建一个set对象,然后利用set的add方法,把数组的每一项都塞进去,因为set不会吧同样的值塞第二次,所以最后的s其实是不重复的

  middleSet1(arr) {
    const s = new Set()
    arr.forEach(x => s.add(x))
    return [...s]
  }

如果你实在不想用解构赋值三个点,我们还以用Array.from()来把去重后的set变为数组

  middleSet2(arr) {
    let set = new Set(arr)
    console.log(Array.from(set))
  }
  • 好吧,bb了这么多,好像用不到啊。为什么呢?因为实在是悲哀啊!每一次我们ajax交互的时候,哪一次的列表不是[{balabala},{balabala}, {balabala}, {balabala}]然后在balabala里面根据某一个元素来筛选过滤操作啥的!烦!头疼!
var list = [{id: 1, name: '第一名'}, 
            {id: 2, name: '第二名'}, 
            {id: 3, name: '第三名'},
            {id: 1, name: '第二名'},
            {id: 2, name: '第三名'},
            {id: 3, name: '第二名'}]

比如这样子的,我要把name一样的去掉,不管id是多少,只要name一样,我就不要了!怎么办?正常人都是向上翻,我看看我之前的方法能不能用啊!不然又要重新写了啊!怎么办呢?简单啊!

  // 如何对数组对象根据某一项去重呢?
  mapTest(arr, name) {
    var tempObj = {},
    result = []
    for(let i = 0; i < arr.length; i++) {
      tempObj[arr[i][name]] ? '' : tempObj[arr[i][name]] = 'true' && result.push(arr[i])
    }
    return result
  }

好像也是触类旁通啊!当一个的时候我们可以那么骚,多个的时候当然也可以啊!无非是多一层属性判断而已啦!当然,我们还有更优雅一些的写法,如果你不考虑IE大兄弟的话!

  mapTest2(arr) {
    var map = new Map()
    const newArr = arr.filter((item) => {
      return !map.has(item.name) && map.set(item.name, 1)
    })
    return newArr
  }

好死赖活的整明白了一套新贱法,map和set是es6的新数据结构,方法和set差不多,这里的判断其实和上面的循环差不多,filter其实也是对数组的循环,我们这里先把每一项的name塞map,然后通过方法has来判断有没有,没有滴话,那我们就返回出来,可以试试哈。


当然,作为一个慷慨的尊贵的qq超级会员加qq群的管理员,肯定要送给大家一点别的东西,比如筛选,再比如比较,再比如交集啥的,我们后续见。。。。

发表评论

电子邮件地址不会被公开。 必填项已用*标注