javascript常见-数组去重

常见数组去重

你能写多少种?

  1. 原始写法:两层for循环

    function unique(array) {
      var res = []
      for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
        for (var j = 0, resLen = res.length; j < resLen; j++) {
          if (array[i] === array[j]) {
            break
          }
        }
    
        if (j === resLen) {
          res.push(array[i])
        }
      }
    
      return res
    }
    
  2. for + indexOf
    indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。

     function unique(array) {
       var res = []
       for (var i = 0, arrayLen = array.length; i < arrayLen; i++) {
         var current = array[i]
         if (res.indexOf(current) === -1) {
           res.push(current)
         }
       }
       return res
     }
    
  3. for + sort

    function unique(array) {
        var res = []
        // 这里使用concat是因为concat()会生成新的数组,不改变原数组,sort()会改变原数组
       var sortedArray = array.concat().sort()
       var seen
       for (var i = 0, len = sortedArray.length; i < len; i++) {
         if (!i || seen !== sortedArray[i]) {
           res.push(sortedArray[i])
         }
     
         seen = sortedArray[i]
       }
     
       return res
     }
    
  4. 将方法2和3结合起来,通过参数isSorted进行判断

    function unique(array, isSorted) {
       var res = []
       var seen = []
       for (var i = 0, len = array.length; i < len; i++) {
         var value = array[i]
         if (isSorted) {
           if (!i || seen !== value) {
             res.push(value)
           }
           seen = value
         } else if (res.indexOf(value) === -1) {
           res.push(value)
         }
       }
     
       return res
    }
    
  5. 增加一个 iteratee迭代器参数

    function unique5(array, isSorted, iteratee) {
       var res = []
       var seen = []
       for (var i = 0, len = array.length; i < len; i++) {
         var value = array[i]
         var computed = iteratee ? iteratee(value, i, array) : value
         if (isSorted) {
           if (!i || seen !== computed) {
             res.push(computed)
           }
           seen = computed
         } else if (iteratee) {
           if (seen.indexOf(computed) === -1) {
             seen.push(computed)
             res.push(value)
           }
         } else if (res.indexOf(value) === -1) {
           res.push(value)
         }
       }
     
       return res
    }
    
  6. ES6- filter
    filter的polyfill实现可以看MDN

     function unique(array) {
       return array.filter(function (item, index, array) {
         return array.indexOf(item) === index
       })
     }
    
  7. ES6: filter + sort

      function unique7(array) {
       return array
         .concat()
         .sort()
         .filter(function (item, index, array) {
           return !index || item !== array[index - 1]
         })
     }
    
  8. Object键值对实现 (全部去重)

    function unique8(array) {
       var res = {}
       return array.filter(function (item) {
         return res.hasOwnProperty(typeof item + JSON.stringify(item)) ? false : (res[typeof item + JSON.stringify(item)] = true)
       })
    }
    
  9. ES6- Set数据结构

    	   function unique(array) {
    		  return Array.from(new Set(array))
    	   }
    
  10. Set简化

    function unique(array) {
       return [...new Set(array)]
     }
    
  11. ES6- Map数据结构

    function unique11(array) {
       const seen = new Map()
       return array.filter(function(item) {
         return !seen.has(item) && seen.set(item, 1)
       })
     }
    

如果对一些方法不理解可以在搜索引擎输入:mdn + 方法。如 Google浏览器里输入 mdn filter()

参考链接:
[1]: https://github.com/mqyqingfeng/Blog/issues/27


版权声明:本文为xa2014原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。