JavaScript _ 数组去重的方法

目录

方案 1 : sort 排序 + splice

方案 2 : 建立新数组 , 利用 indexOf 去重

方案 3 : 利用 filter + indexOf

方案 4 : 遍历原始数组 + if

方案 5 : 遍历原始数组 + while

方案 6 : 开启第二个循环

方案 7 : 利用对象数据类型

方案 8 : 利用 Set 数据类型

---

所用知识点 ：

数组常用方法  =>  JavaScript_数组常用方法( 1 )_Mr.小灰狼_随笔-CSDN博客  

// 准备一个 原始数组

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

var Array = [1, 2, 2, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5]

---

方案 1 : sort 排序 + splice

1、排序  => 让数组内一样的挨着

2、循环遍历数组  => 如果当前这个 [ i ] 和下一个 [ i + 1 ] 一样, 删除其中一个

    // 1. 排序
    arr.sort(function (a, b) { return a - b })

    // 2. 把一样的删除掉
    for (var i = 0; i < arr.length; i++) {
       // 2-2. 判断当前这个和下一个一样
       // 当前这个 arr[i]
       // 下一个 arr[i + 1]
      if (arr[i] === arr[i + 1]) {
        arr.splice(i, 1)
        i--    // 这里为了解决数组的索引塌陷问题
      }
    }

splice( )
        => 语法:

          -> 数组.splice(开始索引, 多少个)

          -> 数组.splice(开始索引, 多少个, 要插入的数据)

            数据: 指的是要插入到原始数组中的数据

            注意: 从哪个索引开始删除, 就从哪一个索引位置开始插入

        => 作用: 截取数组中的部分数据, 并且选择性的插入数据内容

        => 返回值: **必然是一个新的 数组 ** + ( 会改变原始数组 )

          -> 如果你截取了内容, 那么截取多少新数组里面就有多少内容

          -> 如果你没有截取内容, 那么就是一个空的新数组

---

方案 2 : 建立新数组 , 利用 indexOf 去重

1. 准备一个新数组 newArr

2. 循环遍历原始数组 arr , 一个一个把数据添加 push 到新数组内

   => 在添加的时候 , 判断新数组内是否有该数据（indexOf 是否为 -1）

   => 如果有 !== -1 , 就什么都不做

   => 如果没有 === -1 , 就添加 push 进去

    // 1. 准备一个新数组
    var newArr = []

    // 2. 循环遍历原始数组
    for (var i = 0; i < arr.length; i++) {
        // arr[i] 就是数组中的每一个
        // 2-2. 判断 newArr 中是否有 arr[i] 这个数据
      if (newArr.indexOf(arr[i]) === -1) {
        // 表示 newArr 这个数组中没有 arr[i] 这个数据
        // push 添加进去
        newArr.push(arr[i])
      }
    }

indexOf( )
          + 语法:

          -> 数组.indexOf( 数据 )

          -> 数组.indexOf( 数据, 开始索引 )

            => 开始索引选填, 默认值是 0

          + 作用 : 从 开始索引 向后检索该数组中是否有该数据

          + 返回值:

            => 如果数组内 检索 到了 该数据, 那么就是该数据第一次出现的索引位置

            => 如果数组内 没有检索 到该数据, 那么就是   -1 

          + 注意 :  不会改变原始数组

---

方案 3 : 利用 filter + indexOf

/**
 * 数组去重
 */
const unique = function (arr) {
  return arr.filter((item, index) => {
    return arr.indexOf(item, 0) === index;
  });
};

const unique = function (arr) {
  return arr.filter((item, index) => arr.indexOf(item, 0) === index)
};

filter( )
    + 语法: 数组.filter( function (item, index, arr) { } )

    + 作用: 过滤 数组 ( 可灵活运用于实现一些 "删除" 功能 )

      => 把原始数组里面 满足条件 的内容拿出来, 组成一个 新的数组

    + 返回值: 是一个 新数组

      => 原始数组内有多少满足条件的（true）, 那么新数组里面就有多少个数据

      => 原始数组内没有满足条件的 （false）, 那么就是 空的数组

      => 条件以 return 的形式书写

---

方案 4 : 遍历原始数组 + if

1. 循环遍历原始数组

2. 每一个数据判断后面 i + 1 是否还出现了这个内容

 => 如果没有出现 === -1 (表示后面没有一样的) , 那么什么都不做, 继续下一次

 => 如果有出现 !== -1 (表示后面还有一样的) , 那么把后面的干掉

    // 1. 循环遍历原始数组
    for (var i = 0; i < arr.length; i++) {
      // arr[i] 就是每一个数据
      // 2. 判断后面是否还出现了这个一样的数据
      var index = arr.indexOf(arr[i], i + 1)
    // => 如果数组内 检索 到了 该数据, 那么就是该数据第一次出现的 索引 位置
    // => 如果数组内 没有检索 到该数据, 那么就是   -1 
      if (index !== -1) {
        // 表示后面还有, index 就是后面的哪一个的索引位置
        arr.splice(index, 1)
        // 为了解决数组塌陷
        i--
      }
    }

---

方案 5 : 遍历原始数组 + while

和 方案4 基本一致的方式

+ 不用 if 来判断了, 改用 while 循环

  <script>
    var arr = [1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5]
    // arr 索引 0  1  2  3  4  5  6  7  8  9  10 11 12 13 14
    for (var i = 0; i < arr.length; i++) {
      var index = arr.indexOf(arr[i], i + 1)  // arr.indexOf(1, 1) => 6
      console.log(index, 'for'); // 6
      while (index !== -1) {  // 6 !== -1  =>  9 !== -1
        arr.splice(index, 1)  // 进入循环把索引 6 位置的 数字1 删除
        /*
        注意: 因为后面有重复的时候, 但如果 index 不变, 
        那么while就会是死循环(6一直不等于-1, 无限循环代码 arr.splice(6, 1))
        知道 index 等于 -1 时 , 才能跳出 while 循环
        所以这里需要让 index 修改一下
        */
        index = arr.indexOf(arr[i], i + 1)// arr.indexOf(1, 1) => 9
        console.log(index, 'while');  // 9
      }
    }
    console.log(arr);
  </script>

---

方案 6 : 开启第二个循环

    // 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--
        }
      }
    }

---

方案 7 : 利用对象数据类型

+ 利用对象数据类型来进行数组去重

  => 对象内的 key 可以是纯数字

  => 对象内的 key ( 键 ) 不重名

      1. 准备一个空对象 {  }

      2. 循环遍历数组 arr

  => 把数组内每一个数据当做 键 key 来添加在对象内, 值是什么无所谓

      3. 循环遍历对象

  => 把对象内的每一个 key 添加到一个新的数组内 newArr

    // 1. 准备一个空对象
    var obj = {}

    // 2. 循环遍历原始数组
    for (var i = 0; i < arr.length; i++) {
      var item = arr[i]
// 1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5
      // item 就是数组内的每一个数据
      // 把 item 当做 key 添加到对象内
      obj[item] = '内容无所谓'
      // obj[1] = '内容无所谓'
    }

    // 3-1. 准备一个新的数组
    var newArr = []

    // 3-2. 循环遍历对象
    for (var key in obj) {
      // 对象内有多少个成员, 执行多少回
      // key 分别是对象内的每一个 键
      // 把每一个 key 添加到 newArr 里面
      newArr.push(key - 0)
    }

---

方案 8 : 利用 Set 数据类型

1. 借助有一个数据类型叫做 Set

  => Set 数据类型不接受重复数据

+ 语法: var s = new Set( [ 数据1, 数据2, 数据3, ... ] )

2. 把 set 数据类型还原成数组

  => 语法1: Array.from(set 数据类型)

  => 语法2: [ ... set 数据类型 ]

ES5 和 ES6新增_Mr.小灰狼_随笔-CSDN博客

2. 合并运算符
=> 用于合并多个数据使用
=> 当你使用在 解构数组 或者 函数的形参位置 的时候叫做 合并运算 
=> 当这个符号书写在 函数 的 形参 位置的时候, 叫做 合并运算符
=> 从当前形参位置开始获取实参, 直到末尾
=> 注意: 合并运算符一定要写在最后一位 

  <script>
    var arr = [1, 2, 3, 4, 3, 2, 1, 2, 3, 2, 1, 2, 3, 4, 5]
    // 1. 转换成 Set 数据结构, 自然去重
    var s = new Set(arr)
    console.log(s)  // Set(5) {1, 2, 3, 4, 5}
    // 2. 还原成数组
    var res = Array.from(new Set(arr))
    console.log('去重之后 : ', res)
    // 去重之后 :  (5) [1, 2, 3, 4, 5]

    // 3. 一行代码还原成数组
    var res = [ ...new Set(arr) ]
    console.log(res)  // (5) [1, 2, 3, 4, 5]
  </script>