開發十年，就只剩下這套架構體系了！ >>>   

第一種 【兩個 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));
};

上面的每個方法的返回值就是呼叫當前方