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 相关文章推荐
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
JS获取各种宽度、高度的简单介绍
Dec 19 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
js实现获取当前时间是本月第几周的方法
Aug 11 Javascript
location.hash保存页面状态的技巧
Apr 28 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
jquery append与appendTo方法比较
May 24 jQuery
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
JQuery常见节点操作实例分析
May 15 jQuery
jQuery实现每日秒杀商品倒计时功能
Sep 06 jQuery
vue项目查看vue版本及cli版本的实现方式
Oct 24 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(2)
2006/10/09 PHP
腾讯QQ php程序员面试题目整理
2010/06/08 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
2016/10/08 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
javaScript基础详解
2017/01/19 Javascript
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
浅谈JavaScript 代码整洁之道
2018/10/23 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
vue3.0+vue-router+element-plus初实践
2020/12/02 Vue.js
Python使用time模块实现指定时间触发器示例
2017/05/18 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
店长助理岗位职责
2013/12/13 职场文书
水果超市创业计划书
2014/01/27 职场文书
三年级音乐教学反思
2014/01/28 职场文书
最经典的商业地产项目广告词
2014/03/13 职场文书
党员干部公开承诺书
2014/03/26 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
公司离职证明范本
2014/10/17 职场文书
2015年社区关工委工作总结
2015/04/03 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
redis连接被拒绝的解决方案
2021/04/12 Redis
Java 实战项目之家居购物商城系统详解流程
2021/11/11 Java/Android