JavaScript中數組去重的幾種方法

JavaScript中數組去重的幾種方法

正常狀況下，數據去重的工做通常都是由後端同事來完成的，可是前端也要掌握好處理數據的能力，萬一去重的工做交給咱們大前端處理，咱們也不能慫呀。如今我總結了一些去重的方法，但願對你們有點幫助。

方法一：new Set()實現數組去重

ES6 提供了新的數據結構 Set，它相似於數組，可是成員的值都是惟一的，沒有重複的值。 Set 自己是一個構造函數，用來生成 Set 數據結構。Set函數能夠接受一個數組，用於初始化。根據 Set的數據特性，咱們能夠實現數組去重。

let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
let list1 = Array.from(new Set(list)); //  [ 1, "a", true, false, null, "", undefined ]
let list2 = [...new Set(list)]; //  [ 1, "a", true, false, null, "", undefined ]

方法二：some()+循環去重

some() 方法用於檢測數組中的元素是否知足指定條件（函數提供） 。 若是有一個元素知足條件，則表達式返回true , 剩餘的元素不會再執行檢測。 若是沒有知足條件的元素，則返回false。 咱們能夠定義一個新數組來承接沒有重複的數據，遍歷原始數組的時候，用新數組來判斷數據是否已經出現過。

function distinct(list) {
     let result = [list[0]];// 用於承接沒有重複的數據，初始時將原始數組的第一個值賦給它。
     for (let i = 1; i < list.length; i++) {
         // 判斷結果數組中是否存在同樣的值，若果沒有的話則將數據存入結果數組中。
         if (!(result.some(val => list[i] === val))) {
             result.push(list[i]);
         }
     }
     return result;
 }
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct(arr); // [ 1, "a", true, false, null, "", undefined ]

方法三：雙重for循環去重

雙重for循環，第一層循環確保數組中的每一項都能被比較，第二層循環確保被比較項後的每一項都能跟被比較項比較。

function distinct2(list) {
    for (let i = 0; i < list.length; i++) {
        for (let j = i + 1; j < list.length; j++) {
            // 後面數據的若跟前一項數據相同，則重複，須要去除。
            if (list[i] === list[j]) {
                list.splice(j, 1); // 去除後面的相同項
                j--;
            }
        }
    }
    return list;
}
let arr = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
distinct2(arr); // [ 1, "a", true, false, null, "", undefined ]

方法四：hasOwnProperty()方法去重

hasOwnProperty() 方法用來檢測一個屬性是不是對象的自有屬性，而不是從原型鏈繼承的。若是該屬性是自有屬性，那麼返回 true，不然返回 false。

function unique(arr) {
  var obj = {}; // 用來記錄數組中的數據
  return arr.filter(function(item, index, arr){
      // 若是記錄對象中存在某個數據，則返回false過濾掉；不然obj進行記錄並篩選出來
      return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
  })
}
let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
unique(arr) //  [ 1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, 'a', {}]

方法五：利用filter()+indexOf()方法去重

indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    // 從數組0位開始查，若是當前元素在原始數組中的第一個索引==當前索引值，說明它是第一次出現。
    return arr.indexOf(item, 0) === index;
  });
}
let list = [1, 1, 'a', 'a', true, true, false, false, null, '', null, '', undefined, undefined];
unique(list); //  [ 1, "a", true, false, null, "", undefined ]

此外，數組去重還能夠利用filter()、includes()等方法實現，可是思路都跟上面幾種方法相似，這裏就不一一列舉了。