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 相关文章推荐
js onpropertychange输入框 事件获取属性
Mar 26 Javascript
jquery 读取页面load get post ajax 四种方式代码写法
Apr 02 Javascript
优化innerHTML操作(提高代码执行效率)
Aug 20 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
Javascript中的数组常用方法解析
Jun 17 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
Vue2.0表单校验组件vee-validate的使用详解
May 02 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
Sep 08 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
在 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上传文件的增强函数
2010/07/21 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
Prototype String对象 学习
2009/07/19 Javascript
js显示时间 js显示最后修改时间
2013/01/02 Javascript
JQueryEasyUI Layout布局框架的使用
2013/04/08 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
JS实现根据出生年月计算年龄
2014/01/10 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
javascript 判断页面访问方式电脑或者移动端
2016/09/19 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
详谈js原型继承的一些问题
2017/09/06 Javascript
vue实现购物车抛物线小球动画效果的方法详解
2019/02/13 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
Javascript中的this,bind和that使用实例
2019/12/05 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
解决Windows下python和pip命令无法使用的问题
2020/08/31 Python
如何使用 Flask 做一个评论系统
2020/11/27 Python
CSS3 flex布局之快速实现BorderLayout布局
2015/12/03 HTML / CSS
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
什么样的创业计划书可行性高?
2014/02/01 职场文书
协议书的格式
2014/04/23 职场文书
社区健康教育工作方案
2014/06/03 职场文书
施工工地安全标语
2014/06/07 职场文书
社会工作专业求职信
2014/07/15 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
学校运动会开幕词
2016/03/03 职场文书
为了顺利买到演唱会的票用Python制作了自动抢票的脚本
2021/10/16 Python