前端基础速通系列之二：数组去重的9种方法

深鲁克林
40 阅读1分钟

数组去重复的9种方法

1.underscore.js库
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数组去重方法1</title>
</head>
<body>
  //<!-- underscore.js -->
  //<!-- 直接使用 underscore.js库的.uniq方法-->
  <script src="../JS/underscore.js"></script>
  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = _.uniq(arr);
      console.log(result);
    }
    getUniqueArray();
  </script>
</body>
</html>
2.ES6中的set的特性法一
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 利用ES6中set的方法,特点是里面的元素都是独一无二的 -->
  <!-- set后是一个｛｝对象，再把｛｝转化为数组[] -->
  <!-- 使用ES6中Array.from()方法 把｛｝转化为数组[] -->
  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = Array.from(new Set(arr));
      console.log(result);
    }
    getUniqueArray();
  </script>
</body>
</html>
3.ES6中的set的特性法二
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 利用ES6中set的方法,特点是里面的元素都是独一无二的 -->
  <!-- set后是一个｛｝对象，再把｛｝转化为数组[] -->
  <!-- 扩展运算符[...] -->
  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = [...new Set(arr)];
      console.log(result);
    }
    getUniqueArray();
  </script>
</body>
</html>
4.forEach循环
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 使用forEach循环 -->
  <!-- []空数组中如果没有这个元素就push进来 -->
  <!-- indexOf判断数组里面是否有这个元素,没有返回-1 -->
  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = [];
      arr.forEach(item =>{
        if(result.indexOf(item) == -1){
            result.push(item);
        }
      });
      console.log(result);
    }
    getUniqueArray();
  </script>
</body>
</html>
5.ES6中的filter
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- ES6中的filter方法,过滤数组 -->
  <!-- 把后来出现的重复数过滤掉 -->
  <!-- 发现一样的数会返回第一个出现的下标 -->
  <!-- 发现下标不一样但是值一样的时候,说明重复了 -->
  <!-- 下标为1的值为4，和下标为4的值为4 比较发现下标不同 过滤后面的 -->
  <!-- indexOf发现有2个值一样时,首先返回最先碰到的下标 当值一样时,后面出现的下标和原来返回的下标不一致-->
  
  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = arr.filter((item,index)=>{
        return arr.indexOf(item) === index;
      });
      
      console.log(result);
    }
    getUniqueArray();
  </script>
</body>
</html>
6.ES6 reduce方法
<!DOCTYPE html>
<html lang="en"><!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- ES6 reduce方法 -->
  <!-- 2个参数 （函数方法,初始值） -->
  <!-- reduce方法的第一个参数pre是上一次循环的结果 -->
  <!-- reduce方法的每一次循环都是上一次的结果 -->
  <!-- 空数组中[]=>[2] pre变成 [2] -->
  <!-- 空数组中[]=>[2,4] pre变成 [2,4] -->
  <!-- 上一次结果pre，是否包含includes当前item项目 -->
  <!--  包含当前项就不要item 要pre 如果不包含就把item加入到pre的数组当中-->
  <!-- [...pre,item] 展开前面的结果 把当前元素item加入进去 -->
  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = arr.reduce((pre,item)=>{
          return pre.includes(item) ? pre : [...pre,item]
      },[]); 
      console.log(result);
    }
    getUniqueArray();
  </script>
</body>
7.利用对象的key值不重复
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 循环 利用对象的key值不重复 -->
  <!-- 声明一个空对象 -->
  <!-- arr中所有的元素作为result对象{}的key值, 因为key值是唯一的 -->
  <!-- result[arr[index]] 把每一项的值取出来[2,4,5,2,4,7,9,1,9,500]作为result的key-->
  <!--key是唯一的 ：值可以任意设定 这里是'value'-->
  <!--取出key值利用ES6中 Object.keys方法-->
  <!--result = Object.keys(result);
      console.log(result);发现打印出来的是字符串的数组["","","",""]-->
  <!--使用map方法,把每个元素里面的字符串变成整数 item代表每个元素-->
  <!--Object.keys(result).map(item => ~~item)双波浪线 字符串变整数-->
      
  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = {};
      arr.forEach((item,index)=>{
        result[arr[index]] = 'value';
      })
      result = Object.keys(result).map(item => ~~item);
      console.log(result);
    }
    getUniqueArray();
  </script>
</body>
</html>
8.双for循环
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<!--双for循环  -->
<!-- 第一个元素2和后面的元素逐一比较 -->
<!-- 第一个元素2和后面的元素逐一比较 后面发现一样的2 去掉前面的重复的2 -->
<!-- 内层循环的j不是从0开始,而是每次比第一个(外层循环)少一个(次) 所以let j = i + 1; -->
<!-- 外层i从2开始,内层j从2的后面一位开始 因为是2逐一与后面每一个数进行比较 -->
<!-- 外层for的arr[i]与内层for的arr[j]做比较,一样就丢掉  -->
<!-- 一样就进行i++; 直接跳到下一次循环  -->

  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = [];
      for(let i = 0;i < arr.length; i++){
        for(let j = i + 1;j < arr.length; j++){
            if(arr[i] === arr[j]){
              i++;
            }
        }
        result.push(arr[i]);
      }
      console.log(result);
    }
    getUniqueArray();
  </script>
</body>
</html>
9.利用排序sort
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 利用排序,两个一样的数一定会挨在一起 -->
  <!-- 从小到大 ,大到小都可以-->
  <!-- 判断2个挨着的数字是否一样,不一样就push进新的数组,一样就丢掉 -->
  <!-- temp是初步排序好的数组 -->
  <!-- temp[i] == temp[i+1] 相邻的2个数字进行比较 一样丢掉（不操作） -->
  <!-- temp[i] != temp[i+1] 相邻的2个数字进行比较 不一样就push进新的result空数组中 -->
  <script>
    
    var arr = [2,4,5,2,4,7,9,1,9,500];
    function getUniqueArray(){
      var result = [];
      var temp = arr.sort();
      for (let i = 0; i < temp.length; i++){
          if(temp[i] !== temp[i+1]){
            result.push(arr[i]);
          }
        }
        console.log(result);
      }
    getUniqueArray();
  </script>
</body>
</html>
avatar
文章
阅读
粉丝