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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
jquery常用技巧及常用方法列表集合
Apr 06 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
BootStrap中的Fontawesome 图标
May 25 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
Jul 21 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
JS设计模式之数据访问对象模式的实例讲解
Sep 30 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
Jun 19 Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 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验证码类分享
2014/11/18 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
js 浮动层菜单收藏
2009/01/16 Javascript
jQuery中add实现同时选择两个id对象
2010/10/22 Javascript
javascript获取web应用根目录的方法
2014/02/12 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
js中回调函数的学习笔记
2014/07/31 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
jQuery+AJAX实现遮罩层登录验证界面(附源码)
2020/09/13 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
jQuery实现别踩白块儿网页版小游戏
2017/01/18 Javascript
原生JS实现幻灯片
2017/02/22 Javascript
vue.js事件处理器是什么
2017/03/20 Javascript
vue使用vue-cli快速创建工程
2017/07/28 Javascript
[js高手之路]图解javascript的原型(prototype)对象,原型链实例
2017/08/28 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
2018/01/08 jQuery
js实现点击展开隐藏效果(实例代码)
2018/09/28 Javascript
Python时间戳与时间字符串互相转换实例代码
2013/11/28 Python
Django中更改默认数据库为mysql的方法示例
2018/12/05 Python
Python 操作 MySQL数据库
2020/09/18 Python
python 爬取英雄联盟皮肤并下载的示例
2020/12/04 Python
努比亚手机官网:nubia
2016/10/06 全球购物
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
爱情寄语大全
2014/04/09 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
大学军训的体会
2014/11/08 职场文书
教师旷工检讨书
2015/08/15 职场文书
Python实现简繁体转换
2021/06/07 Python
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电