数组去重常见方法

1. 双重循环

var arr = [4, 4, 2, "2", 1]
  function unique1(array) {
    var res = []
    for (let i = 0; i < arr.length; i++) {
      for (var j = 0; j < res.length; j++) {
        if (arr[i] === res[j]) {
          break;
        }
      }
      if (j === res.length) {
        res.push(arr[i])
      }
    }
    return res
  }
  console.log('unique1', unique1(arr))

时间复杂度 o(n^2) 空间复杂度 o(n)

优点: 兼容性好,

缺点: 代码较多, 时间复杂度也高。

2. indexOf

返回 某个指定字符串在字符串中首次出现的位置, 如果没有匹配到返回 -1

function unique2(array) { 
    var res = []
    for (let i = 0; i < arr.length; i++) {
      var current = arr[i]
      if (res.indexOf(current) === -1) {
        res.push(arr[i]);
      }
    }
    return res
  }
  console.log('indexOf: ' + unique2(arr))

// 简化代码

  function unique3(array) {
    var res = array.filter((item, index, array) => {
      return array.indexOf(item) === index
    })
    return res

  }
  console.log('indexOf: ' + unique2(arr))
}

时间复杂度 o(n)

  1. 排序去重 sort

sort(compareFunction) 排序原理

如果不写compareFunction 的话会按照Unicode字符编码去排序也就有时候我们会看到 800 会排在 9 前面

function compareFunction(a, b) {

return a - b;
}
  1. compareFunction(a, b) 返回结果 小于0则按照升序排列;
  2. 大于0按照降序排列
  3. 等于0保持原来顺序
function unique3(array) {
  var res = []

  var array = arr.sort()
  var current = array[0]
  for (let i=0; i<arr.length;i++) {
    if (!i || temp !== array[i]) {
      res.push(array[i])
    }
    temp = array[i]
  }
  return res
}
console.log('sort', unique3(arr))
  1. ES6Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

//  Array.from方法可以将 Set 结构转为数组
function unique4(arr) {
    return Array.from(new Set(arr))
  }
  let arr = ['1', 2, 1, 'A', 'A', 'a', 1, 2];
  console.log('Set', unique4(arr))
  // or
function unique4(arr) {
  return [...new Set(arr)]
}
let arr = ['1', 2, 1, 'A', 'A', 'a', 1, 2];
console.log('Set', unique4(arr))
  1. Map ES6

​ 一个Map对象在迭代时会根据对象中元素的插入顺序来进行 — 一个 for...of循环在每次迭代后会返回一个形式为[key,value]的数组。

​ 方法has() 返回一个bool值,用来表明map 中是否存在指定元素.

​ set() 方法为 Map对象添加或更新一个指定了键(key)和值(value)的(新)键值对

function unique6(arr) {
    const temp = new Map()
    return arr.filter((a) => !temp.has(a) && temp.set(a, 1))
  }
  let arr = ['1', 2, 1, 'A', 'A', 'a', 1, 2]; 
  console.log('unique6   ' + unique6(arr))

阅读原文了解更多

【作者简介】 Mars 芦苇科技web前端开发工程师 喜欢 看电影 ,撸铁 还有学习。擅长 微信小程序开发, 系统管理后台。访问 www.talkmnoney.cn了解更多。

作者主页:

github

segmentfault

原文链接:segmentfault.com

上一篇:工作中常用es6+特性
下一篇:es6 promise面试

相关推荐

  • (深入)使用jQuery复制数组(复制)

    Communitymorgancodes(https://stackoverflow.com/users/1/community)提出了一个问题:(Deep) copying an array usi...

    2 年前
  • 顺时针螺旋输出二维数组

    给定一个数组,将该数组从第一个元素开始顺时针打印出来。 思路: 先考虑打印周围一圈的问题,然后可以使用递归求解,直到最后全都打印完为止。也就是先打印最外围的数,然后对于元二维数组中间的数组作为一个新的...

    2 年前
  • 项目公共方法

    数据类型判断 1、判断NaN 2、判断数字 正则解读: ^ 匹配输入字符串的开始位置 d 匹配一个数字字符,等价于09 匹配前面的子表达式一次或多次 . 匹配字符'.' ? 匹...

    1 个月前
  • 项目中数组循环的一个优化案例

    最近在项目中遇到一个性能问题,根据一些select选择框和一些单选按钮的值综合起来对一个数组进行遍历筛选,并获取最终符合条件的数据,但由于这个数组的长度过长,达到6000,甚至更长,所以导致筛选之后的...

    3 个月前
  • 面试官:前端跨页面通信,你知道哪些方法?

    引言 在浏览器中,我们可以同时打开多个Tab页,每个Tab页可以粗略理解为一个“独立”的运行环境,即使是全局对象也不会在多个Tab间共享。然而有些时候,我们希望能在这些“独立”的Tab页面之间同步...

    1 年前
  • 面试官问:能否模拟实现JS的call和apply方法

    之前写过两篇《面试官问:能否模拟实现的操作符》(https://juejin.im/post/5bde7c926fb9a049f66b8b52)和《面试官问:能否模拟实现的方法》(https://ju...

    2 年前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... ...

    3 天前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组...

    18 天前
  • 面试官在“逗”你系列:数组去重你会几种呀?

    前言 数组去重是一个老生常谈的话题,也是前端童鞋在面试时的一道高频题。本文将深入的探索数组去重的原理及实现,为各位小伙伴提供多种可以反手“调戏”面试官的解决方案。 话不多说,上去就来一梭子... 数组...

    19 天前
  • 面试官:你能手写实现call,apply,bind方法吗?

    实践系列 主要是让我们通过实践去加深对一些原理的理解。 实践系列前端路由(https://juejin.im/post/5c380afde51d4552232fb077) 实践系列Babel原理(...

    1 年前

官方社区

扫码加入 JavaScript 社区