数组去重（reduce && set）

数组去重

前言：

数组去重的方法有很多，这里记录一下我常用的两种数组去重的方法。

温馨提示1：不要把数组的过滤和去重搞混，不是一个东西。

温馨提示2：我会用到一些ES6的语法。

---

字符数组去重

• 例如有一数组的结构是这样的：const arrStr = ['a','b','b','c','c','d']，要对这个数组进行一个去重操作，我是这么干的：

  ---

  利用 数组的 reduce 方法：

  const res = arrStr.reduce((pre:any, cur:any, index:number, array) => {
      !pre.includes(cur) && pre.push(cur);
      return pre;
  }, []);
  
  console.log(res);
  
  # 输出结果：
  # ["a", "b", "c", "d"]
  # 上面的方法里，没用到 index 和 array 可以不写。
  

  reduce方法以传入的初始值作为归并基础，[第一个参数] 是每一项的累加，[第二个参数] 是数组的每一项 [第三个参数] 数组的index [第四个参数] 是要循环的数组。

  ---

  利用 Set 数据结构：

  const arr = [...new Set(arrStr)]；
  console.log(arr);
  
  # 输出结果：
  # ["a", "b", "c", "d"] 
  

  利用Es6的数据结构 Set ，Set似于数组，但它的一大特性就是所有元素都是唯一的，没有重复 。

  reduce 和 set 从代码结构上看起来，还是 set 要更简单一些。

• 如果我们有两个或者两个以上的字符数组，分别为：

  1. const a = [1,2,3,4]

  2. const b = [2,3,4,5]

     我们想要得到数组[1,2,3,4,5],怎么办呢？同样是利用Set：

     const arr = [...new Set([...a,...b])];
     console.log(arr);
     
     # 输出结果：
     # [1, 2, 3, 4, 5]
     

• 示例：

  现有一数组：

  const array = [
      {
          a: 1,
          b: 2,
          d: 4
      },
      {
          a: 2,
          b: 2,
          d: 3
      },
      {
          a: 3,
          b: 3,
          d: 5
      }
  ]
  

  要求：取出数组中的 b 的不重复的值

  const arr = Array.from(
      new Set(
          array.map(item=>{
              return item.b
          }).filter(x=>x)
      )
  )；
  console.log(arr)；
  
  # 输出结果
  # [2, 3]
  

  Array.from用于把一个类数组对象或者具有遍历器接口的对象转换成一个真正的数据，这里就可以把Set转换成一个真正的数组。

  然后我们对数组array进行map循环操作，然后利用Set不重复的特性，以此达到去重的效果。

需要注意的是，利用Set去重时，对一个对象数组是没用。

例如一个数组：

[
    {a:1},
    {a:1}
]

我们想得到 [{a:1}]，利用Set是行不通的。

对象数组去重

例如有一数组的结构是这样的：

const array = [
    {
        key: 1,
        value: 2
    },
    {
        key: 1,
        value: 2
    },
    {
        key: 2,
        value: 3
    },
    {
        key: 3,
        value: 4
    }
]

要求：去除数组中的重复项，返回一个新数组。

const temp:any = {};
const arr = array.reduce((item: any, next:any) => {
    temp[next.key] ? null : temp[next.key] = true && item.push(next);
    return item;
}, []);

console.log(arr)

# 输出结果:
# [
#	{
#      "key": 1,
#      "value": 2
#    }, {
#      "key": 2,
#      "value": 3
#    }, {
#      "key": 3,
#      "value": 4
#  	}
# ] 

上面的代码里也是巧妙的运用了 数组的reduce方法的特性。

这里解释一下代码：

• 我们给reduce方法指定了初始值是一个空数组 []。

• 第一次遍历时，item 是空数组，next 为 数组array 的第一项。

  • 然后三元表达式：temp里没有 key 为 1 的这一项，所以让 temp 里增加一个 key 为 1 的项 且 把 next 放到 item 里，然后返回 item。
  • 此时的item就是一个数组，里面存放了 array 数组里的第一项。

• 第二次遍历时，item数组里包含 array 数组的第一项，next是array数组的第二项。

  • 然后三元表达式：temp 里有key为1的这一项，所以啥也不干，返回item。

• 第三次遍历时，item数组里包含 array 数组的第一项，next是array数组的第三项。

  • 然后三元表达式：temp 里没有=有key为2的这一项，所以让 temp 里增加一个 key 为 2 的项 且 把 next 放到 item 里，然后返回 item。

  …

以此类推，我们就把数组中重复的项去除了。

温馨提示：temp[next.key] = true 是啥意思呢？

结合我下面说的，其实就是让 temp 增加一个以 next.key 为 key 值的 一项。

和 Object.assign(a,{1:true}) 是等价的。