示例如下：

  1. 如传入的数组元素为 [123, “meili”, “123”, “mogu”, 123] ，则输出： [123, “meili”, “123”, “mogu”]
  2. 如传入的数组元素为 [123, [1, 2, 3], [1, “2”, 3], [1, 2, 3], “meili”] ，则输出： [123, [1, 2, 3], [1, “2”, 3], “meili”]
  3. 如传入的数组元素为 [123, {a: 1}, {a: {b: 1}}, {a: “1”}, {a: {b: 1}}, “meili”] ，则输出： [123, {a: 1}, {a: {b: 1}}, {a: “1”}, “meili”]

可以自己思考一下，再看以下解答

基础：JSON.stringify 去重

我们最先想到的是使用 JSON.stringify 去重

  1. const removeDuplicates = (arr) => {
  2.     let map = new Map()
  3.     arr.forEach(item => {
  4.         map.set(JSON.stringify(item), item)
  5.     })
  6.     return [...map.values()]
  7. }
  9. // 测试
  10. removeDuplicates([123, "meili", "123", "mogu", 123])
  11. // [123, "meili", "123", "mogu"]
  12. removeDuplicates([123, [1, 2, 3], [1, "2", 3], [1, 2, 3], "meili"])
  13. // [123, [1, 2, 3], [1, "2", 3], "meili"]
  14. removeDuplicates([123, {a: 1}, {a: {b: 1}}, {a: "1"}, {a: {b: 1}}, "meili"])
  15. // [123, {a: 1}, a: {b: 1}, {a: "1"}, "meili"]

深入一下

使用 JSON.stringify ，如果数组元素是 object 类型且里面键的顺序不同则会认为是两个不同放入数组元素

  1. let o1 = {a:1, b:2}
  2. let o2 = {b:2, a:1}
  3. JSON.stringify(o1)
  4. // "{"a":1,"b":2}"
  5. JSON.stringify(o2)
  6. // "{"b":2,"a":1}"
  7. JSON.stringify(o1) === JSON.stringify(o2)
  8. // false

这种问题该如何解决？
解决思路：
一个数组（包含对象等类型元素）去重函数，需要在基础类型判断相等条件下满足以下条件：

  • 如果元素是数组类型，则需要数组中的每一项相等
  • 如果元素是对象类型，则需要对象中的每个键值对相等

去重本身就是遍历数组，然后比较数组中的每一项是否相等而已，所以关键步骤有两步：比较、去重
比较：

  • 首先判断类型是否一致，类型不一致则返回认为两个数组元素是不同的，否则继续
  • 如果是数组类型，则递归比较数组中的每个元素是否相等
  • 如果是对象类型，则递归比较对象中的每个键值对是否相等
  • 否则，直接 === 比较

去重：

  • 采用 reduce 去重，初始 accumulator 为 []
  • 采用 findIndex 找到 accumulator 是否包含相同元素，如果不包含则加入，否则不加入
  • 返回最终的 accumulator ，则为去重后的数组

代码实现：

  1. // 获取类型
  2. const getType = (function() {
  3.     const class2type = { '[object Boolean]': 'boolean', '[object Number]': 'number', '[object String]': 'string', '[object Function]': 'function', '[object Array]': 'array', '[object Date]': 'date', '[object RegExp]': 'regexp', '[object Object]': 'object', '[object Error]': 'error', '[object Symbol]': 'symbol' }
  5.     return function getType(obj) {
  6.         if (obj == null) {
  7.             return obj + ''
  8.         }
  9.         // javascript高级程序设计中提供了一种方法,可以通用的来判断原始数据类型和引用数据类型
  10.         const str = Object.prototype.toString.call(obj)
  11.         return typeof obj === 'object' || typeof obj === 'function' ? class2type[str] || 'object' : typeof obj
  12.     };
  13. })();
  15. /**
  16.  * 判断两个元素是否相等
  17.  * @param {any} o1 比较元素
  18.  * @param {any} o2 其他元素
  19.  * @returns {Boolean} 是否相等
  20.  */
  21. const isEqual = (o1, o2) => {
  22.     const t1 = getType(o1)
  23.     const t2 = getType(o2)
  25.     // 比较类型是否一致
  26.     if (t1 !== t2) return false
  28.     // 类型一致
  29.     if (t1 === 'array') {
  30.         // 首先判断数组包含元素个数是否相等
  31.         if (o1.length !== o2.length) return false 
  32.         // 比较两个数组中的每个元素
  33.         return o1.every((item, i) => {
  34.             // return item === target
  35.             return isEqual(item, o2[i])
  36.         })
  37.     }
  39.     if (t2 === 'object') {
  40.         // object类型比较类似数组
  41.         const keysArr = Object.keys(o1)
  42.         if (keysArr.length !== Object.keys(o2).length) return false
  43.         // 比较每一个元素
  44.         return keysArr.every(k => {
  45.             return isEqual(o1[k], o2[k])
  46.         })
  47.     }
  49.     return o1 === o2
  50. }
  52. // 数组去重
  53. const removeDuplicates = (arr) => {
  54.     return arr.reduce((accumulator, current) => {
  55.         const hasIndex = accumulator.findIndex(item => isEqual(current, item))
  56.         if (hasIndex === -1) {
  57.             accumulator.push(current)
  58.         }
  59.         return accumulator
  60.     }, [])
  61. }
  63. // 测试
  64. removeDuplicates([123, {a: 1}, {a: {b: 1}}, {a: "1"}, {a: {b: 1}}, "meili", {a:1, b:2}, {b:2, a:1}])
  65. // [123, {a: 1}, a: {b: 1}, {a: "1"}, "meili", {a: 1, b: 2}]