「这是我参与2022首次更文挑战的第24天，活动详情查看：2022首次更文挑战」

数组的 去重 和 扁平化

介绍

数组去重 ，通过名字可以知道，是将数组里面重复的数据进行去重复操作。

数组扁平化，这个通过名字，可能不太好理解，可是看到实际案例就可以明白它的含义是什么了。

介绍这两个的意义，在于 平时的项目中，有很多地方用到 数组去重 和 数组扁平化 这两种操作方式。既然经常使用，那么这里总结一下相关使用方法和代码。

数组去重

• 首先是es6方法的 数组去重 操作

    const unique = (arr) => {
      return Array.from(new Set(arr))
    }

但是此方法会有一个问题就是，无法去掉重复的对象 {}

const array = [1,2,1,true,false,true,'1','2','1',undefined,undefined,null,null,{},{},NaN,NaN,{a:1},{a:1}]

res = [1, 2, true, false, '1', '2', undefined, null, {}, {}, NaN, { a: 1 }, { a: 1 }]

可以看到 无法对对象进行处理

• 通过双重for循环来进行

给定待处理数据为分别为 基本类型，引用类型（包括特殊情况）

const arr = [
  1,
  2,
  1,
  '1',
  '2',
  '1',
  true,
  false,
  true,
  'true',
  'false',
  'true',
  undefined,
  undefined,
  'undefined',
  'undefined',
  null,
  null,
  'null',
  'null',
  Symbol('111'),
  Symbol('111'),
  "Symbol('111')",
  "Symbol('111')",
  111n,
  111n,
  '111n',
  '111n'
]

const arr2 = [NaN, NaN, 'NaN', 'NaN', {}, {}, '{}', '{}', { a: 1 }, { a: 1 }, '{ a: 1 }', '{ a: 1 }', [], [], '[]', '[]', [1], [1], '[1]', '[1]']

const unique = (arr) => {
  for (let i = 0, len = arr.length; i < len; i++) {
    for (let j = i + 1, len = arr.length; j < len; j++) {
      if (arr[i] === arr[j]) {
        arr.splice(j, 1)
        j-- // 每删除一个数j的值就减1
        len-- // j值减小时len也要相应减1（减少循环次数，节省性能）
        // console.log(j,len)
      }
    }
  }
  return arr
}
console.log(unique(arr))

结果可以看到对 数组内的 引用类型 数据的去重，效果并不好

const res1 = [1, 2, '1', '2', true, false, 'true', 'false', undefined, 'undefined', null, 'null', Symbol(111), Symbol(111), "Symbol('111')", 111n, '111n']

const res2 = [NaN, NaN, 'NaN', {}, {}, '{}', { a: 1 }, { a: 1 }, '{ a: 1 }', [], [], '[]', [1], [1], '[1]']

数组扁平化

意思就是将数组内。如果该数组内还有其他的数组对象，那么就将里面的数组对象取出来。如果取出来的还是数组对象的话，那么就继续取出来，直到数组的里面，没有数组对象。这就是 数组扁平化

• 通过reduce方法来进行

通过 遍历数组 的每一项，如果当前值为数组的话，进行递归操作，否则concat。

const flatten = (arr) => {
  return arr.reduce((result, item) => {
    return result.concat(Array.isArray(item) ? flatten(item) : item)
  }, [])
}

通过递归的方式，可以很好的处理扁平化的问题

总结

数组去重 可以帮助我们处理很多不必要的数据，推荐 es6 的 Set 方法去重

数组扁平化 这里也是推荐使用es6 的 ... 操作符来进行数组的扁平化