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 相关文章推荐
Node.js中创建和管理外部进程详解
Aug 16 Javascript
jfreechart插件将数据展示成饼状图、柱状图和折线图
Apr 13 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
Mar 08 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
微信小程序使用request网络请求操作实例
Dec 15 Javascript
select标签设置默认选中的选项方法
Mar 02 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
Apr 16 Javascript
Vue调用后端java接口的实例代码
Oct 28 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
在 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
咖啡与水的关系
2021/03/03 冲泡冲煮
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
在jQuery1.5中使用deferred对象 着放大镜看Promise
2011/03/12 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
2012/01/08 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
完美解决js传递参数中加号和&amp;号自动改变的方法
2016/10/11 Javascript
js运动事件函数详解
2016/10/21 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
详解Vue组件插槽的使用以及调用组件内的方法
2018/11/13 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
JS实现获取当前所在周的周六、周日示例分析
2019/05/11 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
javascript 数组(list)添加/删除的实现
2020/12/17 Javascript
[01:01:43]EG vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.24
2018/08/25 DOTA
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
利用numpy实现一、二维数组的拼接简单代码示例
2017/12/15 Python
Python3爬虫全国地址信息
2019/01/05 Python
Python多项式回归的实现方法
2019/03/11 Python
python高级特性简介
2020/08/13 Python
小学教师的自我评价范例
2013/10/31 职场文书
《珍珠泉》教学反思
2014/02/20 职场文书
小学生寒假家长评语
2014/04/16 职场文书
社区义诊活动总结
2014/04/30 职场文书
2014年青年教师工作总结
2014/12/17 职场文书
先进党支部事迹材料
2014/12/24 职场文书
一般纳税人申请报告
2015/05/18 职场文书
2019行政前台转正申请书范文3篇
2019/08/15 职场文书