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之超简单的div显示和隐藏特效demo(分享)
Jul 09 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
Apr 17 Javascript
js生成随机数方法和实例
Jan 17 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
小程序实现发表评论功能
Jul 06 Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
如何测量vue应用运行时的性能
Jun 21 Javascript
express框架下使用session的方法
Jul 31 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
4.与数据库的连接
2006/10/09 PHP
利用php来自动调用不同服务器上的flash
2006/10/09 PHP
浅析memcache启动以及telnet命令详解
2013/06/28 PHP
PHP数据过滤的方法
2013/10/30 PHP
php实现对短信验证码发送次数的限制实例讲解
2021/03/04 PHP
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
innerText 使用示例
2014/01/23 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
javascript检查某个元素在数组中的索引值
2016/03/30 Javascript
jQuery实现的无限级下拉菜单功能示例
2016/09/12 Javascript
js实现PC端和移动端刮卡效果
2020/03/27 Javascript
jQuery日程管理控件glDatePicker用法详解
2017/03/29 jQuery
微信小程序开发之选项卡(窗口底部TabBar)页面切换
2017/04/12 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
微信小程序中页面FOR循环和嵌套循环
2017/06/21 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
python 获取本机ip地址的两个方法
2013/02/25 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
matplotlib 生成的图像中无法显示中文字符的解决方法
2020/06/10 Python
python中id函数运行方式
2020/07/03 Python
python输入中文的实例方法
2020/09/14 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
应届大专毕业生个人自荐信
2013/09/22 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
党员自评材料范文
2014/12/17 职场文书
2015年幼儿园教育教学工作总结
2015/05/25 职场文书
素质教育培训心得体会
2016/01/19 职场文书
vue前端工程的搭建
2021/03/31 Vue.js
Mysql案例刨析事务隔离级别
2021/09/25 MySQL
mysql数据插入覆盖和时间戳的问题及解决
2022/03/25 MySQL