JS基于对象的特性实现去除数组中重复项功能详解


Posted in Javascript onNovember 17, 2017

本文实例讲述了JS基于对象的特性实现去除数组中重复项功能。分享给大家供大家参考,具体如下:

数组去重的方法有很多,不同的方法的效率也不相同。如前面文章JS实现的数组去除重复数据算法小结中就总结分析了4种实现方法。这里介绍一种高效数组去重的方法:根据JS对象的特性去除数组中重复项的方法。

一、JS对象的特性(本文中所使用的特性):key始终唯一

引例:说明对象key值的唯一性,即当重新给js已有属性赋值的时候,实际上是覆盖了key,而不是新建了key

var t={name:'张三',age:20};//定义个js对象
console.log(t.name);//控制台输出:张三
//注意:此时对象t有两个属性:name、age
t.name='李四';
console.log(t.name);//控制台输出:李四
//注意:此时对象t依然有两个属性:name、age

二、数组去重步骤解析

分为两个步骤:

1. 把要去重的数组转换成一个js的对象并返回。转换规则:把数组中的值变成js对象当中的key,然后value给任意值

2. 把步骤1中的对象再还原成数组,对象的key作为数组中的元素。

三、数组去重实现

var arr=[1,2,3,4,5,23,4,2,4,3];
//1.把数组装换成对象,数组的元素作为对象的key,然后返回对象
function toObject(ac_array){
    var obj={};//私有的对象
    for (var i=0;i<ac_array.length;i++) {
      obj[ac_array[i]] = true;
    }
    console.log(obj);//Object {1: true, 2: true, 3: true, 4: true, 5: true, 23: true}
    return obj;
}
//2.把对象的key获取出来作为数组的元素,然后返回数组
function keys(ac_obj){
    var arr = [];
    for(var item in ac_obj){
      if(ac_obj.hasOwnProperty(item)){
        arr.push(item);
      }
    }
    console.log(arr);//["1", "2", "3", "4", "5", "23"]
    return arr;
}
//综合
function uniq(ac_array){
    return keys(toObject(ac_array));
}
//测试
var uniq_array=uniq(arr);
console.log(uniq_array);//["1", "2", "3", "4", "5", "23"]

代码测试结果:

JS基于对象的特性实现去除数组中重复项功能详解

这种利用js对象key唯一性的特性进行数组去重的方法,在雅虎YUI框架的底层代码中也有用到哦,有兴趣的小火把可以去瞄瞄哦。

Javascript 相关文章推荐
js 自制滚动条的小例子
Mar 16 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
Javascript 拖拽的一些高级的应用(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jQuery拖拽插件gridster使用指南
Apr 21 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
JS实现无限轮播无倒退效果
Sep 21 Javascript
vue前端工程的搭建
Mar 31 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
在 Node.js 中使用 async 函数的方法
Nov 17 #Javascript
JS实现的数组去除重复数据算法小结
Nov 17 #Javascript
bootstrap轮播模板使用方法详解
Nov 17 #Javascript
浅谈Node模块系统及其模式
Nov 17 #Javascript
基于Bootstrap表单验证功能
Nov 17 #Javascript
js 毫秒转天时分秒的实例
Nov 17 #Javascript
Bootstrap table使用方法汇总
Nov 17 #Javascript
You might like
配置php网页显示各种语法错误
2013/09/23 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
一个简单的php路由类
2016/05/29 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
js弹窗代码 可以指定弹出间隔
2010/07/03 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
基于JQuery的一句话搞定手风琴菜单
2012/09/14 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
利用cookie记住背景颜色示例代码
2013/11/04 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
autojs 蚂蚁森林能量自动拾取即给指定好友浇水的实现方法
2020/05/03 Javascript
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python fileinput模块使用介绍
2014/11/30 Python
Python中的作用域规则详解
2015/01/30 Python
Python编程使用NLTK进行自然语言处理详解
2017/11/16 Python
python绘制直方图和密度图的实例
2019/07/08 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
Python计算不规则图形面积算法实现解析
2019/11/22 Python
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
使用HTML5的File实现base64和图片的互转
2013/08/01 HTML / CSS
安纳塔拉酒店度假村及水疗官方网站:Anantara Hotel
2016/08/25 全球购物
Top Villas美国:豪华别墅出租和度假屋
2018/07/10 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
往来会计岗位职责
2013/12/19 职场文书
社区助残日活动总结
2014/08/29 职场文书
个人自查自纠材料
2014/10/14 职场文书
建筑工程催款函
2015/06/24 职场文书
爱护环境建议书
2015/09/14 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
前端canvas中物体边框和控制点的实现示例
2022/08/05 Javascript