JavaScript数组去重问题的深入研究
前言👀
数组去重应该是一个很常见的问题了，既然是常见的，那我们就更应该来学习一下！
免得自己不会，尴尬呀~ 嘿嘿
开始研究🐱🏍
原始🧶
数组去重，最开始我的思路是这样：定义一个新数组，完后两层for循环，如果数据第一次出现，就push到新数组里，如果重复就break掉，利用j的值与res长度相等这一点来判断数据唯一，最后返回新数组就行了。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
for(var i = 0; i < arr.length; i++){
for(var j = 0; j < res.length; j ++){
if(arr[i] === res[j]){
break
}
}
// 如果数据第一次出现，那么执行完上面for语句后，j的值应该等于res的长度才对
if(j === res.length){
res.push(arr[i])
}
}
return res;
}
console.log(unique(arr));
利用indexOf优化原始方法✍
我们先来简单了解一下indexOf：
indexOf(item,start) 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。
看到这大家都明白我们利用的是哪一点了吧，没错，就是加粗的那一句话：如果在数组中没找到指定元素则返回 -1。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
for(var i = 0; i < arr.length; i++){
if(res.indexOf(arr[i]) === -1){
res.push(arr[i])
}
}
return res;
}
console.log(unique(arr));
再次优化，filter方法🎉
filter，顾名思义，过滤的意思，该方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
思路：用filter代替一层循环与indexOf配合，达到过滤效果，直接返回去重过后的数组。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = arr.filter(function(item,index,arr){
return arr.indexOf(item) === index
})
return res;
}
console.log(unique(arr));
换种思路？变成有序数组✨
不知道刷过几天力扣的小伙伴们有没有这种感觉，看见题目中出现数组，眼睛就立刻往前瞄了瞄，看看是有序数组还是无序数组~
回到这个问题上，我们将要去重的数组变成有序，重复的数据肯定都挨着了，用一个变量存放上一个元素值，再循环判断当前值与上一个元素值是否相同，如果不相同，就将它添加到res中。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = []
var pre
arr = arr.sort()
for(var i = 0; i < arr.length; i++){
if(!i || pre !== arr[i]){
res.push(arr[i])
}
pre = arr[i]
}
return res;
}
console.log(unique(arr));
再再次优化，filter🧨
刚刚悟了~，filter好像也可以把排序这里重写一下，变得更为简洁，我们直接看代码：
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
var res = arr.sort().filter(function(item,index,arr){
return !index || item !== arr[index - 1]
})
return res;
}
console.log(unique(arr));
ES6，Set来袭🧸
ES6给我们带来了很多好处，其中，map、set尤为优秀。
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
所以我们可以利用Set的这一特性，来进行去重处理。
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
return Array.from(new Set(arr))
}
console.log(unique(arr));
注：Set是对象，所以要转成数组进行返回。
懂解构赋值的你，可以再简化一点🧵
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66']
function unique(arr){
return [...new Set(arr)]
}
console.log(unique(arr));
想了解一下解构赋值的也可以先康康这个：解构运算符的理解与运用
之前学习，记录的笔记🎨
继续优秀下去（箭头函数）🏆
var arr = [1,1,2,3,4,5,6,7,4,3,'1',8,'3','1','3','66'] var unique = (arr) => [...new Set(arr)] console.log(unique(arr));
最后📖
从最开始的好几行代码，到最后利用箭头函数，可以一行就写完，足以见得，只有不断学习，才能写出更优雅简洁的代码。
到此这篇关于JavaScript数组去重问的文章就介绍到这了,更多相关JavaScript数组去重内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JS的拖拽属性draggable详解,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要给大家介绍了关于js将图片转base64的两种实现方法,Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法,需要的朋友可以参考下2023-07-07
这篇文章主要为大家详细介绍了原生Javascript和jQuery做轮播图简单例子,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-10-10
第一种，将日期字符串先截取，然后拼接；第二种，就是利用正则表达式去掉“-”本例选择第二种，比较快捷不容易出错2014-07-07
今天小编就为大家分享一篇js实现同一个页面,多个enter事件绑定的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-10-10
下面小编就为大家带来一篇静态页面实现 include 引入公用代码的示例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了微信小程序调用天气接口并且渲染在页面过程详解，今天写一个具体的例子，调用一个免费的天气接口的api，并且把所获取的内容展示在前端的界面，前端界面与 iView Weapp结合,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了javascript实现雪花飘落效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
apply和call方法定义及apply和call方法的区别
apply和call功能一样，只是传入的参数列表形式不同，本文给大家介绍apply和call方法定义及apply和call方法的区别，感兴趣的朋友一起学习吧2015-11-11
javascript instanceof,typeof的区别
区分string 与 String的区别2010-03-03
最新评论