数组去重

随便啦_
213 阅读4分钟

数组去重方法一(indexOf/includes)

返回新数组

  • 数组的indexOf()方法可返回某个指定的元素在数组中首次出现的位置。该方法首先定义一个空数组newArr，然后调用indexOf方法对原来的数组进行遍历判断，如果元素不在newArr中，则将其push进newArr中，最后将newArr返回 即可获得去重的数组
<script>
    // 把数组中重复项去掉
    // indexOf
    // 定义一个新数组 var newArr = []
    // 循环arr里面的每一项 var item = arr[i]
    // 判断新数组中是否已经存在 item newArr.indexOf(item) === -1
    // 如果不存在 再往里面添加  newArr.push(item)
   
    var arr = [1, 1, 1, 2, 3, 2, 3, 2, 3, 4, 4, 4]
    var arr2 = [10, 10, 10, 2, 3, 2, 3, 2, 3, 4, 4, 4]
    var arr3 = [100, 100, 100, 2, 3, 2, 3, 2, 3, 4, 4, 4]

    // 一次封装 多次复用
    // 想给谁去重 就把谁当做实参传递进来unique(arr) 用形参变量ary接收
    function unique(ary) {
      var newArr = [];
      for (var i = 0; i < ary.length; i++) {
        var item = ary[i];
        <!--三元运算符-->
        // newArr.indexOf(item) === -1 ? newArr.push(item) : void 0;
        // void 0 返回 undefined
        if (newArr.indexOf(item) === -1) {
          newArr.push(item);
        }
      }
      return newArr;
    }
    
    <!-- includes -->
    function unique1(ary) {
      var newArr = [];
      for (var i = 0; i < ary.length; i++) {
        var item = ary[i];
        <!--三元运算符-->
        // !newArr.includes(item) ? newArr.push(item) : void 0;
        // void 0 返回 undefined
        if (!newArr.includes(item)) {
          newArr.push(item);
        }
      }
      return newArr;
    }

   var a1 = unique1(arr);
   console.log('a1', a1);

   var a2 = unique(arr2);
   console.log('a2', a2);
  </script>

数组去重方法二

对象法去重 利用的是对象的属性名是唯一的

 <script>
   var arr = [1, 1, 2, 2, 3, 2, 3, 4, 4, 4]

   function unique(ary) {
     var newArr = []
     var obj = {}

     for (var i = 0; i < ary.length; i++) {
       var cur = ary[i]

       if (!obj[cur]) {
         newArr.push(cur)
         obj[cur] = true
       }

     }

     obj = null
     return newArr
   }

   var ary = unique(arr)
   console.log('ary', ary)


   //  var newArr = []
   //  var obj = {}

   //  for (var i = 0; i < arr.length; i++) {
   //    var cur = arr[i] // 1 1 2 2

   //   // 如果对象中不存在这个属性 说明我们没有添加过
   //   // !obj[1] => !true => false
   //   // !obj[2] => !undefined => true
   //   // !obj[2] => !true => false
   //    if (!obj[cur]) { 
   //      newArr.push(cur) // [1, 2]
   //      obj[cur] = true // {1: true, 2: true}
   //    }

   //  }
   //  console.log(newArr)

   //  // 由于这个对象没用了 通常我们会 释放内存
   //  obj = null
 </script>

双重循环去重

<script>
   // 外层循环出来每一个当前项cur, 内层循环循环出来当前项的每个后一项last

   // 用当前项cur和 每个后一项last 分别比较===
   // 如果有相同的(===) 就删除这一项 splice(j, 1)

   // var arr = [1, 1, 2, 2, 3, 2, 3, 4, 4, 4]

   // var arr = [1, 1, 1, 1]

   // cur = 1 (a)
   // // 内层循环 j = 0 + 1
   // last = 1 (b)

   // if cur === last
   // arr.splice(j, 1)
   // // [1, 1, 1] 

   // j++ // j = 2

   // // [1, 1, 1] 
   // // 内层循环第二次 j = 2
   // cur = 1 (0)
   // last = 1 (2)

   // if cur === last
   // arr.splice(j, 1)
   // // [1, 1] 

   // j++ // j = 3

   // 3 < 2 
   


  

   // 当我们用splice删除前面某一项时候 后面的就会往前挪一位，数组塌陷

   // 用于我们再删除的时候 后面的会往前挪一位
   // 我们需要再删除的时候 让我们再从当前这个索引位置比较一次

   // j = 1
   // var arr = [2, 2, 2, 2]
   // j = 1
   // j++ j = 2

   // for (var i = 0; i < arr.length - 1; i++) {
   //   // 当前项 i当前项索引
   //   var cur = arr[i]
   //   console.log('大循环cur', cur)
     
   //   // 把当前项cur的后一项依次取出来进行比较
   //   for (var j = i + 1; j < arr.length; j++) {
   //     var last = arr[j]

   //     // 数组中有和当前项 重复的值
   //     if (cur === last) {
   //       arr.splice(j, 1)
   //       j--
   //     }
   //   }
   // }



   // i++
   // i= i + 1
   //代码执行
   var arr = [2, 2, 2, 2]

   for (var i = 0; i < arr.length - 1; i++) {
     // 当前项 i当前项索引
     var cur = arr[i]
     console.log(i)
     console.log('大循环cur', cur)
     
     // 把当前项cur的后一项依次取出来进行比较
     for (var j = i + 1; j < arr.length;) {
       var last = arr[j]

       // 数组中有和当前项 重复的值 就删除这一项
       cur === last ? arr.splice(j, 1) : j++
       // if (cur === last) {
       //   arr.splice(j, 1)
       // } else {
       //   j++
       // }
     }
   }
   console.log(arr)

   for (var i = 0; i < arr.length - 1; i++) {
     var cur = arr[i]
   
     for (var j = i + 1; j < arr.length;) {
       cur === arr[j] ? arr.splice(j, 1) : j++
     }
   }
 </script>

set与解构赋值去重

ES6中新增了数据类型set，set的一个最大的特点就是数据不重复。Set函数可以接受一个数组（或类数组对象）作为参数来初始化，利用该特性也能做到给数组去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return [...new Set(arr)]
}

Array.from与set去重

Array.from方法可以将Set结构转换为数组结果，而我们知道set结果是不重复的数据集，因此能够达到去重的目的

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.from(new Set(arr))
}

相邻元素去重

这种方法首先调用了数组的排序方法sort()，然后根据排序后的结果进行遍历及相邻元素比对，如果相等则跳过改元素，直到遍历结束

unction unique(arr) {
    // 判断是不是数组
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    // 先排序
    arr = arr.sort()
    let res = []
    // 遍历数组
    for (let i = 0; i < arr.length; i++) {
    // 判断是否相等
        if (arr[i] !== arr[i-1]) {
            res.push(arr[i])
        }
    }
    return res
}

indexOf方法去重2

利用indexOf检测元素在数组中第一次出现的位置是否和元素现在的位置相等，如果不等则说明该元素是重复元素

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    return Array.prototype.filter.call(arr, function(item, index){
        return arr.indexOf(item) === index;
    });
}
avatar
文章
阅读
粉丝