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 字符串乘法
Aug 20 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
Apr 06 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
Bootstrap表单控件使用方法详解
Jan 11 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
通过命令行创建vue项目的方法
Jul 20 Javascript
浅谈node的事件机制
Oct 09 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
vue中路由跳转不计入history的操作
Sep 21 Javascript
openlayers实现地图弹窗
Sep 25 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
Nov 17 Vue.js
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
如何给phpcms v9增加类似于phpcms 2008中的关键词表
2013/07/01 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
利用PHP将图片转换成base64编码的实现方法
2016/09/13 PHP
php mysql_list_dbs()函数用法示例
2017/03/29 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
ASP Json Parser修正版
2009/12/06 Javascript
jQuery判断iframe中元素是否存在的方法
2013/05/11 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
AngularJS压缩JS技巧分析
2016/11/08 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
2016/12/15 Javascript
JS实现中文汉字按拼音排序的方法
2017/10/09 Javascript
解决vue处理axios post请求传参的问题
2018/03/05 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
element-ui使用导航栏跳转路由的用法详解
2018/08/22 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
BootstrapValidator实现表单验证功能
2019/11/08 Javascript
java遇到微信小程序 &quot;支付验证签名失败&quot; 问题解决
2019/12/22 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
使用Python构建Hopfield网络的教程
2015/04/14 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
python实现串口通信的示例代码
2020/02/10 Python
日本面向世界,国际级的免税在线购物商城:DOKODEMO
2017/02/01 全球购物
任意存:BOXFUL
2018/05/21 全球购物
计算机应用应届生求职信
2014/07/12 职场文书