利用JS对象Key唯一性实现数组去重
本文详解如何利用JavaScript对象Key始终唯一的特性,通过先将数组元素转为对象Key、再提取Key还原为数组的两步操作,实现高效数组去重。该方法避免了复杂比较,代码简洁且性能较好,是前端开发中常用的去重技巧之一。
利用JS对象Key唯一性实现数组去重
本文介绍一种利用JavaScript对象特性来去除数组中重复项的实现方法,供读者参考。
数组去重的方法有很多,不同的方法的效率也不相同。如前面文章JS实现的数组去除重复数据算法小结中就总结分析了4种实现方法。这里介绍一种高效数组去重的方法:根据JS对象的特性去除数组中重复项的方法。
一、核心原理:JS对象的Key具有唯一性。
示例说明:当对已存在的对象属性重新赋值时,实际上是覆盖了原有的Key值,而非创建新的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. 将待去重的数组转换为JavaScript对象。转换规则是:以数组中的元素值作为对象的Key,Value可任意指定(通常设为true)。
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对象Key唯一性进行数组去重的方法,在雅虎YUI框架的底层代码中也有应用,有兴趣的开发者可以查阅相关源码。
PS:此外,还提供几款在线去重工具供参考:
在线去除重复项工具: http://tools.jb51.net/code/quchong
在线文本去重复工具: http://tools.jb51.net/aideddesign/txt_quchong
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript排序算法总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》
希望本文所述对大家JavaScript程序设计有所帮助。
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
