Skip to content

小小前端

明月本无心,行人自回首。

Menu
  • 前端开发
  • 编程技术
  • SQL语句
  • Linux
  • 生活/旅行
  • JSEditor
  • MiniBarCMS
  • About
  • 隐私政策
Menu

javascript中数组去重的多种方法

Posted on 2017年10月22日2017年11月4日 by king2088

数组去重,简单来说就是一个数组中如果同时存在两个相同的值,但是我们只需要其中一个即可,不需要将两个相同的值都一起展示出来,这个时候就必须得使用到javascript的数组去重方法了,在javascript中并没有专门的方法直接去重的,因此我们得自己来写一个这样的方法。下面我仅介绍其中的容易理解的4种方法,当然还有其他更多的方法,希望大家能够自己去寻找和学习了,因为目前我就仅能理解这3种方法。
大概的思路应该是这样的:
1)、定义一个变量数组 res 保存结果,遍历需要去重的数组,如果该元素已经存在在 res 中了,则说明是重复的元素,如果没有,则放入 res 中。
2)、将原数组中重复元素的最后一个元素放入结果数组中
下面我们直接来看代码,代码可以让你一目了然。

1、万能的for循环

[cc lang=”javascript”]var arr = [1,2,3,1,2,’1′,’3′,’3′];
function uniqueTwo(arr) {
var res = [];
for(var i=0; i < arr.length; i++){ var item = arr[i] res.indexOf(item)===-1 && res.push(item) } return res; } var testTwo = uniqueTwo(arr); console.log('testTwo',testTwo); // 返回[1, 2, 3, "1", "3"][/cc] 以上代码,我们可以分析得到,首先我们遍历整个数组,将得到的值通过indexOf(首次出现的位置)得到字符第一次出现的位置,如果没有出现过则会返回-1,那么说明数组中仅包含一个此类字符,接着将其push到一个新的数组中即可。

2、使用indexOf与filter(代码更加简洁)

filter() 方法是创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter使用方法 array.filter(function(currentValue,index,arr), thisValue)
currentValue 必须。当前元素的值
index 可选。当期元素的索引值
arr 可选。当期元素属于的数组对象
thisValue 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。如果省略了 thisValue ,”this” 的值为 “undefined”
[cc lang=”javascript”]var arr = [1,2,3,1,2,’1′,’3′,’3′];
function uniqueThree(arr) {
return arr.filter(function (item, index, array) {
return array.indexOf(item) === index;
})
}
var testThree = uniqueThree(arr);
console.log(‘testThree’,testThree); //返回[1, 2, 3, “1”, “3”][/cc]
使用filter来创建一个新数组,并且此数组中使用indexOf来进行去重即可

3、先将数组进行排序后,在进行对比

[cc lang=”javascript”]var b = [1,1,1,2,2,8,8,9,9,0,32,13,1,2,3,4,5,6,7,8,9,0];
b.sort();
var res = []
for(var i=0;i4、ES6中的强大方法

在ES6中,我们可以直接通过Array.from()方法创建一个新数组,Array.from()很像slice方法,但是我们还可以使用Set方法。直接看代码
[cc lang=”javascript”]var arr = [1,2,3,1,2,’1′,’3′,’3′];
function unique(arr){
return Array.from(new Set(arr))
}
var test = unique(arr);
console.log(test); //返回[1, 2, 3, “1”, “3”][/cc]
甚至,外面可以将ES6直接简写成如下代码
[cc lang=”javascript”]var arr = [1,2,3,1,2,’1′,’3′,’3′];
var unique = (arr)=>{
[…new Set(arr)]
}[/cc]
是不是感觉ES6更加强大?什么,你还不会ES6?赶快加紧学习吧,再不学习新技术,你就落伍了!

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

近期文章

  • cordova-plugin-camera在某些android机型中拍照或选择文件时闪退出错的解决办法 2019年10月24日
  • JavaScript nodeJS base64加密解密url参数 2019年10月15日
  • 利用expressJS编写reset api 2019年4月13日
  • angular4 + http拦截器 2019年3月21日
  • ionic navCtrl.pop如何传递参数给上一个页面 2018年11月16日
  • ionic3搭建开发/测试环境 2018年10月25日
  • ionic2、3双击硬件back按键退出应用 2018年10月24日
  • VMware安装Mac OS High Sierra 10.12及高版本无法全屏 2018年8月24日

近期评论

  • 手表资讯发表在《ReactJS环境搭建》
  • king2088发表在《ionic中使用热更新插件cordova-hot-code-push》
  • 重阳节的诗句发表在《常用的sql语句》
  • 新郎致辞发表在《PHP代码实现WordPress相关文章的几种方法》
  • 霸道总裁发表在《vsftpd 提示 unrecognized service 解决办法》

归档

标签

Ajax Android Angular APP Cordova CSS css3 express html5 ionic Java javascript jQuery Linux loading mac Mac OS mongodb MySQL node nodejs PHP react SQL SSH VirtualBox vue vue-cli win10 WordPress WP REST API 主题 兼容性 前端 备份 插件 数据库 数组 服务器 正则表达式 浏览器 热更新 目录 组件 错误
2023年 4月
一 二 三 四 五 六 日
 12
3456789
10111213141516
17181920212223
24252627282930
« 10月    
© 2023 小小前端 | Powered by Superbs Personal Blog theme