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 相关文章推荐
Code:findPosX 和 findPosY
Dec 20 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
Jquery api 速查表分享
Jan 12 Javascript
JavaScript DOM操作表格及样式
Apr 13 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
jquery 手势密码插件
Mar 17 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
详解vue项目接入微信JSSDK的坑
Dec 14 Javascript
Element Carousel 走马灯的具体实现
Jul 26 Javascript
JavaScript最完整的深浅拷贝实现方式详解
Feb 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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
PHP中strtr字符串替换用法详解
2014/11/26 PHP
php约瑟夫问题解决关于处死犯人的算法
2015/03/23 PHP
PHP静态成员变量
2017/02/14 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
ExtJS判断IE浏览器类型的方法
2014/02/10 Javascript
js实现简单的左右两边固定广告效果实例
2015/04/10 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
详解Web使用webpack构建前端项目
2017/09/23 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
原生JS封装_new函数实现new关键字的功能
2018/08/12 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
[01:37]DOTA2超级联赛专访ChuaN 传奇般的电竞之路
2013/06/19 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
详解Django中的权限和组以及消息
2015/07/23 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
对python3新增的byte类型详解
2018/12/04 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
英国网络托管和域名领导者:Web Hosting UK
2017/10/15 全球购物
以下的初始化有什么区别
2013/12/16 面试题
管理部副部长岗位职责范文
2014/03/09 职场文书
个人委托书怎么写
2014/04/04 职场文书
博士论文答辩开场白
2015/06/01 职场文书