8種經常使用數組去重方法

第一種 【兩個 for 循環】

思路：

1. 新建一個爲空的結果數組
2. 外層 for 遍歷原數組，內層循環遍歷返回數組
3. 判斷內層循環數組當前元素和外層數組元素的值是否相等，是？退出內層循環
4. 通過第二部後，此時內層循環數組的索引值和返回數組的長度正好相等，外層數組元素也是惟一的。

/**
 * 【1】2個for循環去重
 *
 * @param {any} arr
 * @returns [1, 2, 13, 3, "1", "2"]
 */
function unique1(arr) {
  //返回數組
  var arr2 = [];
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; j < arr2.length; j++) {
      //返回數組和操做數組的值相等，結束循環，此時的j值恰好和返回數組的長度相等
      if (arr2[j] === arr[i]) {
        break;
      }
    }
    //返回數組和j值相等，則插入該值
    if (arr2.length === j) {
      arr2.push(arr[i]);
    }
  }
  return arr2;
}

第二種 【indexOf 數組去重】

思路：

1. 新建一個空的結果數組
2. for 循環原數組
3. 判斷結果數組是否存在當前元素，存在不做操做，不存在壓入結果數組

/**
 * 【2】indexOf數組去重
 *
 * @param {any} arr
 * @returns [1, 2, 13, 3, "1", "2"]
 */
function unique2(arr) {
  //返回的數組
  var arr2 = [];
  for (var i = 0; i < arr.length; i++) {
    //判斷arr2中是否存在arr[i]值，存在不做任何操做，不存在插入該值
    if (arr2.indexOf(arr[i], 0) === -1) {
      arr2.push(arr[i]);
    }
  }
  return arr2;
}

第三種 【filter 去重】

思路：

1. 使用 filter 返回一個新數組
2. 返回知足：當前元素在原數組中的第一個索引等於當前索引值，則返回當前元素

/**
 * 【3】filter去重【filter返回一個新數組】
 *
 * @param {any} arr
 * @returns [1, 2, 13, 3, "1", "2"]
 */
function unique3(arr) {
  return arr.filter(function(item, index, arr) {
    //若是當前元素在原數組中的第一個索引等於當前索引值，則返回當前元素
    return arr.indexOf(item, 0) === index;
  });
}

第四種 【先排序後去重】

思路：

1. 新建一個空的結果數組
2. 對原數組先排序，排序後的數組，相等元素緊鄰排序
3. 判斷相鄰數組元素是否相等或者是否爲第一個數組元素，是壓入結果數組

/**
 * 【4】先排序後去重
 *
 * @param {any} arr
 * @returns ["1", 1, 13, "2", 2, 3]
 */
function unique4(arr) {
  //數組排序
  var arr = arr.sort();
  //結果數組
  var arr2 = [];
  for (var i = 0; i < arr.length; i++) {
    //第一個數組或者先一個數組值不等於當前數組值，插入該元素
    if (i < 1 || arr[i - 1] !== arr[i]) {
      arr2.push(arr[i]);
    }
  }
  return arr2;
}

第五種 【sort+filter】

思路：思路就是對第三和第四種方法的結合啦，道理同樣。

/**
 * 【5】sort+filter優化【4】方法
 *
 * @param {any} arr
 * @returns ["1", 1, 13, "2", 2, 3]
 */
function unique5(arr) {
  return arr.sort().filter(function(item, index, arr) {
    return item < 1 || arr[index - 1] !== arr[index];
  });
}

第六種 【hasOwnProperty】

思路：這種方法主要是利用對象 hasOwnProperty 判斷是否存在對象屬性

/**
 * 【6】hasOwnProperty【利用：hasWonProperty判斷對象中是否存在對應屬性，存在返回true不然返回false】
 *
 * @param {any} arr
 * @returns [1, 2, 13, 3]
 */
function unique6(arr) {
  //建立對象
  var obj = {};
  return arr.filter(function(item, index, arr) {
    //判斷對象是否存在元素，存在給對象賦值，不然返回false
    return obj.hasOwnProperty(item) ? false : (obj[item] = item);
  });
}

第七種 【利用 es6 的 new set()方法】

思路：利用【new Set(數組)說明：它時一個類數組方法，可是其成員值都是惟一的；Array.from()能夠蔣其餘對象轉化爲數組】

/**
 * 【7】es6的new set()
 *
 * @param {any} arr
 * @returns [1, 2, 13, 3, "1", "2"]
 */
function unique7(arr) {
  return Array.from(new Set(arr));
}

第八種 【new Set 和 es6 的...運算符】

/**
 * 【8】蔣【7】採用...操做符重寫
 *
 * @param {any} arr
 * @returns [1, 2, 13, 3, "1", "2"]
 */
function unique(arr) {
  return [...new Set(arr)];
}

好了，寫完後驗證一下是否正確：

window.onload = function() {
  var arr = [1, 2, 13, 1, 2, 3, '1', '2'];
  console.log(unique(arr));
};

上面的每一個方法的返回值就是調用當前方法時，返回值。