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 相关文章推荐
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
jquery下div 的resize事件示例代码
Mar 09 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
vue之将echart封装为组件
Jun 02 Javascript
Vue多系统切换实现方案
Jun 05 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 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
新浪新闻小偷
2006/10/09 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
PHP笛卡尔积实现原理及代码实例
2020/12/09 PHP
JavaScript库 开发规则
2009/01/31 Javascript
javascript将异步校验表单改写为同步表单
2015/01/27 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
JavaScript提升性能的常用技巧总结【经典】
2016/06/20 Javascript
微信小程序实战之运维小项目
2017/01/17 Javascript
利用js定义一个导航条菜单
2017/03/14 Javascript
vue router 跳转后回到顶部的实例
2018/08/31 Javascript
浅析Vue 防抖与节流的使用
2019/11/14 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
Python+MongoDB自增键值的简单实现
2016/11/04 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
PyTorch中常用的激活函数的方法示例
2019/08/20 Python
python绘制随机网络图形示例
2019/11/21 Python
Python使用PyQt5/PySide2编写一个极简的音乐播放器功能
2020/02/07 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
Django-simple-captcha验证码包使用方法详解
2020/11/28 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
微信浏览器左上角返回按钮拦截功能
2017/11/21 HTML / CSS
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
打架检讨书100字
2014/01/08 职场文书
创业培训计划书
2014/05/03 职场文书
食品流通安全承诺书
2014/05/22 职场文书
完美的中文自荐信
2014/05/24 职场文书
行政专员岗位职责说明书
2014/09/01 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
岗位聘任协议书
2015/09/21 职场文书
2016年“5.12”国际护士节活动总结
2016/04/06 职场文书
Python实现生成bmp图像的方法
2021/06/13 Python
Java中API的使用方法详情
2022/04/06 Java/Android