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 相关文章推荐
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
jquery操作复选框checkbox的方法汇总
Feb 05 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
Dec 10 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
判断div滑动到底部的scroll实例代码
Nov 15 Javascript
jQuery Validate插件ajax方式验证输入值的实例
Dec 21 jQuery
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 Javascript
微信小程序购物车、父子组件传值及calc的注意事项总结
Nov 14 Javascript
vue中v-text / v-html使用实例代码详解
Apr 02 Javascript
js函数和this用法实例分析
Mar 13 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
php下获取Discuz论坛登录用户名、用户组、用户ID等信息的实现代码
2010/12/29 PHP
php读取大文件示例分享(文件操作类)
2014/04/13 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP+jquery实时显示网站在线人数的方法
2015/01/04 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
js可突破windows弹退效果代码
2008/08/09 Javascript
JavaScript类库D
2010/10/24 Javascript
js变换显示图片的实例
2013/04/16 Javascript
复制js对象方法(详解)
2013/07/08 Javascript
三种检测iPhone/iPad设备方向的方法
2014/04/23 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
js控制鼠标事件移动及移出效果显示
2014/10/19 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
2016/09/27 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
2018/05/31 jQuery
vue中filters 传入两个参数 / 使用两个filters的实现方法
2019/07/15 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
JavaScript交换变量常用4种方法解析
2020/09/02 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[02:17]2016完美“圣”典风云人物:Sccc专访
2016/12/03 DOTA
[06:45]DOTA2-DPC中国联赛 正赛 Magma vs LBZS 选手采访
2021/03/11 DOTA
python使用matplotlib绘制折线图教程
2017/02/08 Python
用Pycharm实现鼠标滚轮控制字体大小的方法
2019/01/15 Python
TensorFlow tf.nn.conv2d实现卷积的方式
2020/01/03 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
软件缺陷的分类都有哪些
2014/08/22 面试题
护理专业应届毕业生推荐信
2013/11/15 职场文书
房地产营销活动策划方案
2014/09/15 职场文书
贷款担保书
2015/01/20 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书