数组去重的110种方法

栏目: JavaScript · 发布时间: 5年前

内容简介:数组去重在面试和工作中都是比较容易见到的问题,这几天在复习基础知识的时候,也顺便总结了一下常见的方法,和大家一起分享。如果大家还有其他什么方法还请评论大家一起讨论。如果有什么没有表达正确的地方还请大家斧正。要比较数组中的每一个值我们都可以用双重for循环来解决,比如冒泡排序。同样也可以使用双重for循环来数组去重。可以看见

数组去重在面试和工作中都是比较容易见到的问题,这几天在复习基础知识的时候,也顺便总结了一下常见的方法,和大家一起分享。如果大家还有其他什么方法还请评论大家一起讨论。如果有什么没有表达正确的地方还请大家斧正。

一、使用双重 for 循环

要比较数组中的每一个值我们都可以用双重for循环来解决,比如冒泡排序。同样也可以使用双重for循环来数组去重。

function unique(arr) {
  for (let i = 0; i < arr.length; i++) {
    for (let j = i+1; j < arr.length; j++) {
      if (arr[i] == arr[j]) {
        arr.splice(j,1)
        j--
      }
    }
  }
  return arr
}
let arr = [1,1,'true','true', 'a', 'a',true,true,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0,{},{},[],[]];
console.log(unique(arr)) // [ 1, 'true', 'a', false, undefined, NaN, NaN, 'NaN', {}, {} ]
复制代码

可以看见 NaN 没有被去除掉,两个 {} 都没去掉,因为 {} 是引用值,而却我们使用的是 arr[i] == arr[j] 会发生类型转换,所以以下都为 true

  • 1 == true
  • false== []
  • undefined == null
  • false == 0

要解决以上问题我们可以使用 Object.is(arr[i], arr[j]) 的方法替换 arr[i]==arr[j] 既可以去除 NaN 还可以防止发生类型转换。代码这里接不贴出了,大家可以自己写一下运行一下。

注:为了方便以下arr都使用该处的arr值

二、利用 indexOf()

使用 indexOf() ,可以判断一个数组中是否包含某个值,如果存在则返回该元素在数组中的位置,如果不存在则返回 -1

functon unique(arr) {
    let res = []
  	for (let i = 0; i < arr.length; i++) {
        if (res.indexOf(arr[i]) === -1) {
          	res.push(arr[i])
        }
  	}
  	return res
}
console.log(unique(arr)) //[ 1,   'true',   'a',   true,   false,   undefined,   null,   NaN,   NaN,   'NaN',   0,   {},   {}, [], []]
复制代码

这里我们新建一个数组来保存去重后的数组,如果该数组不包含元素就将该元素 push 到该数组中,可以发现这种方法任然没有去掉 NaN、{}、[]

三、利用 includes()

使用 includes() 方法也可以判断数组是否包含某个特定的元素,如果包含就返回 true 不包含就返回 false 。这和 indexOf() 方法有些类似,所以我们使用 includes() 进行数组去重和 indexOf() 的方法原理是一样的。

functon unique(arr) {
    let res = []
    for (let i = 0; i < arr.length; i++) {
        if (!res.includes(arr[i])) {
      	    res.push(arr[i])
        }
    }
    return res
}
复制代码

四、利用 filter()

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。并且 filter() 不会改变数组 ,也 不会对空数组进行检测filter() 方法接收一个回调函数。

语法:

array.filter(function(item,index,arr), thisValue)
复制代码
参数 描述
item 必须。当前元素的值
index 可选。当前元素的索引值
arr 可选。当前元素属于的数组对象

代码实现

function unique(arr) {
    return arr.filter((item,index, arr) => {
        return arr.indexOf(item) === index
    })
}
console.log(unique(arr)) //[ 1, 'true', 'a', true, false, undefined, null, 'NaN', 0, {}, {}, [], [] ]
复制代码

这里我们用判断 indexOf(item) 判断当前元素的索引是否等于当前 index ,如果相等就返回该元素。

五、使用对象的特点

对象是一种以键值对存储信息的结构,并且不能有重复的键。

function unique(arr) {
  let obj = {}
  for (let i = 0; i < arr.length; i++) {
    if (arr[i] in obj) {
      obj[arr[i]] ++
    } else {
      obj[arr[i]] = 10
    }
  }
  return Object.keys(obj) // 以数组的形式返回键
}
console.log(unique(arr)) // [ '0',   '1',   'true',   'a',   'false',   'undefined',   'null',   'NaN',   '[object Object]',   '']
复制代码

这种方法的写出来有点问题,因为是用 Object.keys(obj) 来返回键的集合所以得到的都是字符串的形式。

六、使用set

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

function unique(arr) {
  return [...new Set(arr)]
}
console.log(unique(arr)) //[ 1,   'true',   'a',   true,   false,   undefined,   null,   NaN,   'NaN',   0,   {},   {},   [],   [] ]
复制代码

这是 ES6 最常用的方法,得到的效果也还不错。

谢谢你的阅读。 希望大家也可以把自己常用的方法分享一起交流。


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

计算机系统概论

计算机系统概论

派特(Patt.Y.N.) / 梁阿磊、蒋兴昌、林凌 / 机械工业 / 2008-1-1 / 49.00元

《计算机系统概论(原书第2版)》是计算机科学的经典基础教材。全书以自底向上方法帮助学生理解计算机系统的原理,前半部分阐述了计算机底层结构,后半部分讲解了高级语言编程及编程方法学,主要内容包括数据类型及其运算、数字逻辑、冯·诺伊曼模型、汇编语言、输入和输出、TRAP程序和子程序、C语言编程等内容。 《计算机系统概论(原书第2版)》可用作高等院校计算机及相关专业学生的入门教材,也可作为的计算机专......一起来看看 《计算机系统概论》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

MD5 加密
MD5 加密

MD5 加密工具