JavaScript系列之数组去重

数组去重方法是老生常谈，特别是一些bat大厂的面试都会提到这个问题，既然是常谈，那么我也来谈谈

嵌套循环（兼容性好）

使用循环嵌套，最外层循环 array，里面循环 res，如果 array[i] 的值跟 res[j] 的值相等，就跳出循环，如果都不等于，说明元素是唯一的，这时候 j 的值就会等于 res 的长度，根据这个特点进行判断，将值添加进 res。

    function unique(array) {
      // res用来存储结果
      var res = [];
      for (var i = 0; i < array.length; i++) {
        for (var j = 0, j < res.length, j++) {
          if (array[i] === res[j]) {
            break;
          }
        }
        // 如果array[i]是唯一的，那么执行完循环，j等于res.length
        if (j === res.length) {
          res.push(array[i])
        }
      }
      return res;
    }

    var arr = [1, '1', 2, 2, '3', 3]
    console.log(unique(arr)); // [1, "1", 2, "3", 3]

indexOf

indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置，如果要检索的字符串值不存在则返回-1。可以通过indexOf()方法来简化内层的循环

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

    var arr = [1, '1', 2, 2, '3', 3]
    console.log(unique(arr)) // [1, '1', 2, '3', 3]

排序后去重

将需要去重的数组用sort()方法进行排序后，相同的值就会排序到一起，再通过判断当前元素与上一个元素是否相同，相同就说明重复，不同就添加到res[]

    function unique(array) {
      var res = [];
      var sortedArray = array.concat().sort(); // 排序后结果为[1, "1", 2, 2, "3", 3]
      var seen; 
      for (var i = 0; i < sortedArray.length; i++) {
        // 如果是第一个元素或者相邻的元素不相同
        if (!i || seen !== sortedArray[i]) {
          res.push(sortedArray[i])
        }
        seen = sortedArray[i];
      }
      return res;
    }

    var arr = ['3', 3, 1, '1', 2, 2,]
    console.log(unique(arr)) // [1, '1', 2, '3', 3]

filter

filter() 用来检测数组元素，并返回符合条件的所有元素的数组，filter()接收三个参数， 参数一表示数组的某个元素，参数二表示是数组元素的位置index，参数三代表数组本身。可以把以上两种方法作为filter的条件来进行筛选

【1】使用indexOf方法作为筛选条件

    function unique(array) {
      var res = array.filter(function (item, index, array) {
        return array.indexOf(item) === index;
      })
      return res;
    }

    var arr = ['3', 3, 1, '1', 2, 2,]
    console.log(unique(arr)) // [1, '1', 2, '3', 3]

【2】使用排序方法作为筛选条件

    function unique(array) {
      return array.concat().sort().filter(function (item, index, array) {
        return !index || item !== array[index - 1]
      })
    }

    var arr = ['3', 3, 1, '1', 2, 2,]
    console.log(unique(arr)) // [1, '1', 2, '3', 3]

ES6

ES6提供了新的数据结构Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set函数可以接受一个数组（或类似数组的对象）作为参数，用来初始化。

    function unique(array) {
      return Array.from(new Set(array));
    }
    var arr = ['3', 3, 1, '1', 2, 2,]
    console.log(unique(arr)) // [1, '1', 2, '3', 3]

    // 利用es6箭头函数简化
    var unique = (array) => [...new Set(array)]
    var arr = ['3', 3, 1, '1', 2, 2,]
    console.log(unique(arr)) // [1, '1', 2, '3', 3]

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料