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 更严格的相等 [译]
Sep 20 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
d3.js实现图形缩放平移
Dec 19 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
如何在 Vue 中使用 JSX
Feb 14 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
PHP对象Object的概念 介绍
2012/06/14 PHP
在项目中寻找代码的坏命名
2012/07/14 PHP
windows7下安装php的php-ssh2扩展教程
2014/07/04 PHP
ThinkPHP多语言支持与多模板支持概述
2014/08/22 PHP
4种Windows系统下Laravel框架的开发环境安装及部署方法详解
2020/04/06 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
用console.table()调试javascript
2014/09/04 Javascript
jQuery实现视频作为全屏幕背景
2014/12/18 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
vue2.0s中eventBus实现兄弟组件通信的示例代码
2017/10/25 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
JS实现显示当前日期的实例代码
2018/07/03 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
[40:55]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#4Newbee VS Fnatic
2016/03/03 DOTA
[01:04:32]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第二场 2月23日
2021/03/11 DOTA
python使用Tkinter显示网络图片的方法
2015/04/24 Python
简单谈谈python中的lambda表达式
2018/01/19 Python
Python爬虫之网页图片抓取的方法
2018/07/16 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
化工机械应届生求职信
2013/11/04 职场文书
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
机关会计岗位职责
2014/04/08 职场文书
公司投资建议书
2014/05/16 职场文书
提拔干部考察材料
2014/05/26 职场文书
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript
MySQL数据库完全卸载的方法
2022/03/03 MySQL