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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
angularJS结合canvas画图例子
Feb 09 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
Bootstrap的Carousel配合dropload.js实现移动端滑动切换图片
Mar 10 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
浅析微信扫码登录原理(小结)
Oct 29 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 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
PHP4在Windows2000下的安装
2006/10/09 PHP
PHP 和 MySQL 开发的 8 个技巧
2007/01/02 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP 的ArrayAccess接口 像数组一样来访问你的PHP对象
2010/10/12 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
Zend Framework实现多文件上传功能实例
2016/03/21 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
JavaScript读取中文cookie时的乱码问题的解决方法
2009/10/14 Javascript
JQuery在光标位置插入内容的实现代码
2010/06/18 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
2015/04/03 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
原生js实现简单的Ripple按钮实例代码
2017/03/24 Javascript
javascript按钮禁用和启用的效果实例代码
2017/10/29 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
element-ui中的select下拉列表设置默认值方法
2018/08/24 Javascript
Python Matplotlib库入门指南
2015/05/18 Python
Python使用Scrapy爬取妹子图
2015/05/28 Python
Python对文件操作知识汇总
2016/05/15 Python
Python的标准模块包json详解
2017/03/13 Python
Python中Django 后台自定义表单控件
2017/03/28 Python
python网络应用开发知识点浅析
2019/05/28 Python
python实现飞机大战小游戏
2019/11/08 Python
python GUI库图形界面开发之PyQt5简单绘图板实例与代码分析
2020/03/08 Python
python中wx模块的具体使用方法
2020/05/15 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
Puritan’s Pride(普丽普莱)官方网站:美国最大最全的保健品公司之一
2016/10/23 全球购物
介绍下WebSphere的安全性
2013/01/31 面试题
一道写SQL的面试题和答案
2013/11/19 面试题
益达广告词
2014/03/14 职场文书
公司员工活动策划方案
2014/08/20 职场文书
中学生打架检讨书
2014/10/13 职场文书
党员民主评议个人总结
2014/10/20 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python