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