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 相关文章推荐
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
原生javascript实现图片弹窗交互效果
Jan 12 Javascript
Javascript优化技巧之短路表达式详细介绍
Mar 27 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
Oct 20 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
jQuery1.9+中删除了live以后的替代方法
Jun 17 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
解决vue脚手架项目打包后路由视图不显示的问题
Sep 20 Javascript
JQuery animate动画应用示例
May 14 jQuery
在 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和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP生成条形图的方法
2014/12/10 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
举例讲解PHP面对对象编程的多态
2015/08/12 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
jQuery实现简单的文件上传进度条效果
2020/03/26 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
JQuery EasyUI的一些常用组件
2017/07/12 jQuery
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
2017/09/13 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
详解在vue-test-utils中mock全局对象
2018/11/07 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
python实现的阳历转阴历(农历)算法
2014/04/25 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
python使用KNN算法识别手写数字
2019/04/25 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
python3获取url文件大小示例代码
2019/09/18 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
在django admin中配置搜索域是一个外键时的处理方法
2020/05/20 Python
原生 JS+CSS+HTML 实现时序图的方法
2019/07/31 HTML / CSS
俄罗斯街头服装品牌:Black Star Wear
2017/03/01 全球购物
英国家居用品和家居装饰品购物网站:Cox & Cox
2019/08/25 全球购物
运动会邀请函范文
2014/01/31 职场文书
2014年销售工作总结
2014/12/01 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
通知的格式范文
2015/04/27 职场文书
确保工程质量承诺书
2015/04/29 职场文书
新娘婚礼致辞
2015/07/27 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书