快捷導(dǎo)航

JS數(shù)組去重的6種方法完整實例

更新時間：2018年12月08日 09:55:43 作者：hello_sgw

這篇文章主要介紹了JS數(shù)組去重的6種方法,結(jié)合完整實例形式總結(jié)分析了javascript針對數(shù)組去除重復(fù)項的相關(guān)原理與操作技巧,需要的朋友可以參考下

本文實例講述了JS數(shù)組去重的6種方法。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>m.fzitv.net 數(shù)組去重</title>
  </head>
  <body>
    <script>
      //1.filter:(indexOf)方法創(chuàng)建一個新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素, filter() 不會對空數(shù)組進行檢測。 filter() 不會改變原始數(shù)組。
      var arr1 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];
      var arr1_1 = arr1.filter(function(m, n) {
        return arr1.indexOf(m) == n;
      })
      document.write(arr1_1 + "<br />");
      //2.map:(push indexOf)把每個元素通過函數(shù)傳遞到當(dāng)前匹配集合中，生成包含返回值的新的 jQuery 對象。
      var arr2 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];
      var arr2_2 = [];
      arr2.map(function(m, n) {
        if(arr2.indexOf(arr2[n]) == n) {
          arr2_2.push(m);
        }
      });
      document.write(arr2_2 + "<br />");
      //3.indexOf(push)搜索數(shù)組中的元素，并返回它所在的位置。
      var arr3 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];
      var arr3_3 = [];
      for(var i = 0; i < arr3.length; i++) {
        if(arr3_3.indexOf(arr3[i]) == -1) {
          arr3_3.push(arr3[i]);
        }
      }
      document.write(arr3_3 + "<br />");
      //4.splice對數(shù)組進行刪除、插入、替換，是最強大的數(shù)組方法。改變原數(shù)組
      var arr4 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];
      for(var i = 0; i < arr4.length; i++) {
        for(var j = i + 1; j < arr4.length; j++) {
          if(arr4[i] == arr4[j]) {
            arr4.splice(j, 1)
            j--; //別忘記減
          }
        }
      }
      document.write(arr4 + "<br />");
      //5.push(數(shù)組去重一一對比)添加到數(shù)組末尾
      var arr5 = [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];
      function remm(arr) {
        var arr5_5 = [];
        for(var i = 0; i < arr5.length; i++) {
          for(var j = 0; j < arr5.length; j++) {
            if(arr5[i] == arr5_5[j]) {
              break;
            }
          }
          if(arr5[i] != arr5_5[j]) {
            arr5_5.push(arr5[i]);
          }
        }
        return arr5_5;
      }
      document.write(remm(arr5) + "<br />");
      //6.set數(shù)據(jù)結(jié)構(gòu)Set類似于數(shù)組，但是成員的值都是唯一的，沒有重復(fù)的值。用set.size表示偽數(shù)組長度
    var arr6= [7, 7, 7, 8, 8, 8, 82, 82, 839, 49, 329, 8, 3, 3];
      var set = new Set(arr6);
      var newArr = new Array(...set);
      document.write(newArr+"<br />");
    </script>
  </body>
</html>

使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得到如下運行結(jié)果：