当前位置：首页 > 资讯 > 技术文档

JS基于对象的特性实现去除数组中重复项功能详解

时间：2022-04-06 01:24 编辑：来源：阅读：
扫一扫，手机访问

摘要：JS基于对象的特性实现去除数组中重复项功能详解

本文实例讲述了JS基于对象的特性实现去除数组中重复项功能。分享给大家供大家参考，具体如下：数组去重的方法有很多，不同的方法的效率也不相同。如前面文章[url=http://www.1sucai.cn/article/128453.htm]JS实现的数组去除重复数据算法小结[/url]中就总结分析了4种实现方法。这里介绍一种高效数组去重的方法：根据JS对象的特性去除数组中重复项的方法。 [b]一、JS对象的特性(本文中所使用的特性)：key始终唯一[/b] 引例：说明对象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

[b]二、数组去重步骤解析[/b] 分为两个步骤： 1. 把要去重的数组转换成一个js的对象并返回。[b]转换规则：把数组中的值变成js对象当中的key，然后value给任意值[/b]； 2. 把步骤1中的对象再还原成数组，对象的key作为数组中的元素。 [b]三、数组去重实现[/b]

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"]

代码测试结果： [img]http://files.jb51.net/file_images/article/201711/20171117112802527.jpg?20171017112816[/img] 这种利用js对象key唯一性的特性进行数组去重的方法，在雅虎YUI框架的底层代码中也有用到哦，有兴趣的小火把可以去瞄瞄哦。 [b]PS：这里再为大家提供几款去重复工具供大家参考使用：[/b] [b]在线去除重复项工具： [/b][url=http://tools.jb51.net/code/quchong]http://tools.jb51.net/code/quchong[/url] [b]在线文本去重复工具： [/b][url=http://tools.jb51.net/aideddesign/txt_quchong]http://tools.jb51.net/aideddesign/txt_quchong[/url] 更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/278.htm]JavaScript数组操作技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/148.htm]JavaScript排序算法总结[/url]》、《[url=http://www.1sucai.cn/Special/119.htm]JavaScript数学运算用法总结[/url]》、《[url=http://www.1sucai.cn/Special/297.htm]JavaScript数据结构与算法技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/281.htm]JavaScript遍历算法与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/472.htm]JavaScript查找算法技巧总结[/url]》及《[url=http://www.1sucai.cn/Special/439.htm]JavaScript错误与调试技巧总结[/url]》希望本文所述对大家JavaScript程序设计有所帮助。

全部评论(0)

上一篇：js类式继承与原型式继承详解
下一篇：JS实现的数组去除重复数据算法小结

资讯排行榜
更多>>