1. 程式人生 > >JavaScript系列之陣列去重

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]