数组去重的常用方法

本文详细介绍了JavaScript中实现数组去重的多种方法,包括新建数组过滤、使用indexOf、双重循环、对象属性利用、Set数据结构等。通过实例代码展示了每种方法的实现过程,帮助读者理解并选择适合的去重策略。
摘要由CSDN通过智能技术生成

 var arr = [ 10, 20, 20, 10, 30, 20, 10, 20, 40, 30, 60, 50, 20 ]
    console.log('原始数组 : ', arr) 

    1. 准备一个空的数组
    var newArr = []

    // 2. 循环遍历 arr(原始数组), 一个一个判断, newArr 里面是否存在
    //    如果不存在, 就添加进去, 如果存在, 就算了
    for (var i = 0; i < arr.length; i++) {
      // 3. 判断新数组里面是否有 arr[i]
      //    indexOf 返回值是 -1 表示没有
      if (newArr.indexOf(arr[i]) === -1) {
        newArr.push(arr[i])
      }
    }
      console.log('去重之后 : ', newArr)

   



    方案3
    1. 直接循环遍历 原始数组

  for (var i = 0; i < arr.length; i++) {
      // 2. 判断, 只要后面还有 arr[i], 那么就把后面的删除掉
      //    假设 i === 0 的时候, 判断 后面 还有没有 10 这个数据
      // arr.indexOf(10, 1) // 从 索引 0 开始查找, 找到的第一个, 就是我自己
      //    假设 i === 1 的时候, 判断 后面 还有没有 20 这个数据
      // arr.indexOf(20, 2)

      // 判断, 只要 !== -1 就要一直执行
      // 当 条件 !== -1 的时候, 就要执行删除一个的代码
      while (arr.indexOf(arr[i], i + 1) !== -1) {
        // 拿到后面那个数字的索引位置
        var index = arr.indexOf(arr[i], i + 1)
        arr.splice(index, 1)
      }

    }

    console.log('去重之后 : ', arr)

    方案4:
   

for (var i = 0; i < arr.length; i++) {
      // 2. 判断, 只要后面还有 arr[i], 那么就把后面的删除掉
      // 问题: if 真的不行吗 ?
      if (arr.indexOf(arr[i], i + 1) !== -1) {
        var index = arr.indexOf(arr[i], i + 1)
        arr.splice(index, 1)

        // 判断了一次, 只能证明后面有一个你删除了, 但是不能证明后面没有了
        // 不能让你去到下一个索引, 判断下一个数字
        // 还得判断我
        i--
      }
    }

    console.log('去重之后 : ', arr)


    方案5:
   

1. 循环原始数组
    for (var i = 0; i < arr.length; i++) {
      // 2. 开启第二个循环
      for (var j = i + 1; j < arr.length; j++) {
        // 3. 判断 arr[j] 是否等于 arr[i]
        // 如果有 把 arr[j] 删除掉
        if (arr[j] === arr[i]) {
          arr.splice(j, 1)
          i--
        }
      }
    }
    console.log('去重之后 : ', arr)


    方案6:
   

 对象数据类型, 特点: 对象的键名不能重复
                特点: 对象的键名可以使用纯数字
    如果我把数组里面的每一个数据当做 对象 key 来使用
    就会向对象中添加一些成员, 但是不可能有重复的成员出现
    1. 准备一个空对象
    var obj = {}

    // 2. 循环遍历原始数组
    for (var i = 0; i < arr.length; i++) {
      var item = arr[i]
      // 3. 把 item 当做 obj 的 键名来向对象内添加成员
      obj[item] = '随便'
    }

    // 4. 原始数组已经没有用了
    arr.length = 0

    // 5. 循环遍历对象, 把每一个 key 添加到 arr 内部
    for (var key in obj) {
      // 随着循环, key 就是 obj 内的每一个成员的名称
      // console.log(key - 0)
      // 把每个内容追加到 arr 内部
      arr.push(key - 0)
    }

    console.log('去重之后 : ', arr)



    方案7: 利用 Set 数据结构
 

  长得和数组差不多, 但是不是数组
    特点: 不接受重复数据
    语法: new Set([ 数据1, 数据2, 数据3 ])
    var s = new Set([ 10, 20, 30, 10 ])
    console.log(s)

    1. 利用 Set 数据类型把 arr 内的重复数据干掉
    var s = new Set(arr)
    console.log(s)

    2. Array.from()
    语法: Array.from(长得和数组差不多的数据)
    返回值: 把这个和数组长得差不多的东西还原成数组
    var res = Array.from(new Set(arr))
    console.log('去重之后 : ', res)

    简化一下
    有一个运算符叫做 (...)
    能把一个数据结构打开
    var s = new Set(arr)
    console.log(s)
    console.log(...s)
    console.log([...s])

    var res = [ ...new Set(arr) ]

    console.log('去重之后 : ', res)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值