JS陣列去重的幾種方法

reslicma發表於2019-02-20
JS陣列

JS陣列去重

今天來聊一聊JS陣列去重的一些方法，包括一些網上看到的和自己總結的，今天也把他們歸納起來吧。我總結了5種方法（ES5），還有一點就是，我使用的JS編碼風格是JavaScript Standard風格，是不加分號的（避免給大家造成誤會）。

第一種：遍歷陣列法

這種方法最簡單最直觀，也最容易理解，程式碼如下：

  var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (newArr.indexOf(arr[i]) === -1) {
      newArr.push(arr[i])
    }
  }
  console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]
複製程式碼

這種方法很好理解，利用了indexOf()方法（indexOf()方法如果查詢到則返回查詢到的第一個結果在陣列中的索引，如果查詢不到則返回-1）。先建立一個新的空陣列用來儲存新的去重的陣列，然後遍歷arr陣列，在遍歷過程中，分別判斷newArr陣列裡面是不是有遍歷到的arr中的元素，如果沒有，直接新增進newArr中，如果已經有了（重複），那麼不操作，那麼從頭到尾遍歷一遍，正好達到了去重的目的。

第二種：陣列下標判斷法

這種方法也比較好理解，程式碼如下：

  var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    if (arr.indexOf(arr[i]) === i) {
      newArr.push(arr[i])
    }
  }
  console.log(newArr) // 結果：[2, 8, 5, 0, 6, 7]
複製程式碼

這和第一種方法有重疊，不說多餘的，直接看if這裡，在遍歷arr的過程中，如果在arr陣列裡面找當前的值，返回的索引等於當前的迴圈裡面的i的話，那麼證明這個值是第一次出現，所以推入到新陣列裡面，如果後面又遍歷到了一個出現過的值，那也不會返回它的索引，indexof()方法只返回找到的第一個值的索引，所以重複的都會被pass掉，只出現一次的值都被存入新陣列中，也達到了去重的目的。

第三種：排序後相鄰去除法

這種方法用到了sort()方法，程式碼如下：

  var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]
  arr.sort()
  var newArr = [arr[0]]
  for (var i = 1; i < arr.length; i++) {
    if (arr[i] !== newArr[newArr.length - 1]) {
      newArr.push(arr[i])
    }
  }
  console.log(newArr) // 結果：[0, 2, 5, 6, 7, 8]
複製程式碼

這種方法的思路是：先用sort()方法把arr排序，那麼排完序後，相同的一定是挨在一起的，把它去掉就好了，首先給新陣列初始化一個arr[0]，因為我們要用它和arr陣列進行比較，所以，for迴圈裡面i也是從1開始了，我們讓遍歷到的arr中的值和新陣列最後一位進行比較，如果相等，則pass掉，不相等的，push進來，因為陣列重新排序了，重複的都挨在一起，那麼這就保證了重複的這幾個值只有第一個會被push進來，其餘的都和新陣列的被push進來的這個元素相等，會被pass掉，也達到了去重的效果。

第四種：優化的遍歷陣列法

  var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2, 8]
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    for (var j = i + 1; j < arr.length; j++) {
      if (arr[i] === arr[j]) {
        i++
        j = i
      }
    }
    newArr.push(arr[i])
  }
  console.log(newArr) // 結果：[0, 5, 6, 7, 2, 8]
複製程式碼

思路：兩層for迴圈，外面一層是控制遍歷到的前一個arr中的元素，裡面一層控制的是第一層訪問到的元素後面的元素，不斷的從第0個開始，讓第0個和他後面的元素比較，如果沒有和這個元素相等的，則證明沒有重複，推入到新陣列中儲存起來，如果有和這個元素相等的，則pass掉它，直接進入下一次迴圈。從第1個開始，繼續和它後面的元素進行比較，同上進行，一直迴圈到最後就是：不重複的都被推入新陣列裡面了，而重複的前面的元素被pass掉了，只留下了最後面的一個元素，這個時候也就不重複了，則推入新陣列，過濾掉了所有重複的元素，達到了去重的目的。

第五種：陣列遍歷法

  var arr = ['a', 'a', 'b', 'c', 'b', 'd', 'e', 'a']
  var newArr = []
  for (var i = 0; i < arr.length; i++) {
    var bl = true
    for (var j = 0; j < newArr.length; j++) {
      if (arr[i] === newArr[j]) {
        bl = false
        break
      }
    }
    if (bl) {
      newArr.push(arr[i])
    }
  }
  console.log(newArr) // 結果：["a", "b", "c", "d", "e"]
複製程式碼

思路：也是兩層for迴圈，外層for迴圈控制的是arr陣列的遍歷，內層for迴圈控制的是新陣列的遍歷，從第0位開始，如果新陣列中沒有這個arr陣列中遍歷到的這個元素，那麼狀態變數bl的值還是true，那麼自然進入到了if中把這個值推入到新陣列中，如果有這個元素，那麼代表重複，則把狀態變數bl取值改為false，並且跳出當前迴圈，不會進入到if內部，而進入下一次外層開始的迴圈。這樣迴圈往復，最後也達到了去重的效果。

相關文章