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 相关文章推荐
Javascript中的数学函数集合
May 08 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
原生js的数组除重复简单实例
May 24 Javascript
jQuery用FormData实现文件上传的方法
Nov 21 Javascript
canvas绘制的直线动画
Jan 23 Javascript
微信小程序 引入es6 promise
Apr 12 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
vue 插槽简介及使用示例
Nov 19 Vue.js
在 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
如何实现给定日期的若干天以后的日期
2006/10/09 PHP
php下封装较好的数字分页方法
2010/11/23 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
分享php邮件管理器源码
2016/01/06 PHP
php解析mht文件转换成html的实例
2017/03/13 PHP
PHP simplexml_import_dom()函数讲解
2019/02/03 PHP
AJAX分页的代码(后台asp.net)
2011/02/14 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
2014/02/23 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
利用npm 安装删除模块的方法
2018/05/15 Javascript
vue中实现Monaco Editor自定义提示功能
2019/07/05 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
Python生成不重复随机值的方法
2015/05/11 Python
Python之指数与E记法的区别详解
2019/11/21 Python
TensorFlow加载模型时出错的解决方式
2020/02/06 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
推荐一些比较有用的css3新属性
2014/11/11 HTML / CSS
人事专员岗位职责
2013/11/20 职场文书
新郎婚宴答谢词
2014/01/19 职场文书
顶撞领导检讨书
2014/01/29 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
2014年质检员工作总结
2014/11/18 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
SQL 聚合、分组和排序
2021/11/11 MySQL