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 相关文章推荐
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
extjs3 combobox取value和text案例详解
Feb 06 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
JQuery实现可直接编辑的表格
Apr 16 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
Electron autoUpdater实现Windows安装包自动更新的方法
Dec 24 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
浅谈监听单选框radio改变事件(和layui中单选按钮改变事件)
Sep 10 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
Vue父组件监听子组件生命周期
Sep 03 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静态类
2006/11/25 PHP
11个PHP 分页脚本推荐
2011/08/15 PHP
PHP 第二节 数据类型之字符串类型
2012/04/28 PHP
PHP函数preg_match_all正则表达式的基本使用详细解析
2013/08/31 PHP
PHP概率计算函数汇总
2015/09/13 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
PHP中list方法用法示例
2016/12/01 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
EasyUI实现第二层弹出框的方法
2015/03/01 Javascript
JS封装的自动创建表格的实现代码
2016/06/15 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
[45:59]完美世界DOTA2联赛PWL S2 FTD vs GXR 第二场 11.22
2020/11/24 DOTA
Python脚本实现虾米网签到功能
2016/04/12 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
python中的for循环
2018/09/28 Python
Python面向对象程序设计构造函数和析构函数用法分析
2019/04/12 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
python用tkinter实现一个简易能进行随机点名的界面
2020/09/27 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
支部鉴定材料
2014/06/02 职场文书
建筑结构施工求职信
2014/07/11 职场文书
六年级作文之预言作文
2019/10/25 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
pandas中pd.groupby()的用法详解
2022/06/16 Python