JavaScript数组去重的6个方法


Posted in Javascript onJanuary 21, 2017

方法一

无需思考,我们可以得到 O(n^2) 复杂度的解法。定义一个变量数组 res 保存结果,遍历需要去重的数组,如果该元素已经存在在 res 中了,则说明是重复的元素,如果没有,则放入 res 中。

function unique(a) {
 var res = [];
 for (var i = 0, len = a.length; i < len; i++) {
 var item = a[i];
 for (var j = 0, jLen = res.length; j < jLen; j++) {
 if (res[j] === item)
 break;
 }
 if (j === jLen)
 res.push(item);
 }
 return res;
}
var a = [1, 1, '1', '2', 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]

代码非常简单,那么是否能更简洁些?如果不考虑浏览器兼容,我们可以用 ES5 提供的 Array.prototype.indexOf 方法来简化代码。

function unique(a) {
 var res = [];
 for (var i = 0, len = a.length; i < len; i++) {
 var item = a[i];
 (res.indexOf(item) === -1) && res.push(item);
 }
 return res;
}
var a = [1, 1, '1', '2', 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]

既然用了 indexOf,那么不妨再加上 filter。

function unique(a) {
 var res = a.filter(function(item, index, array) {
 return array.indexOf(item) === index;
 });
 return res;
}
var a = [1, 1, '1', '2', 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]

方法二

法一是将原数组中的元素和结果数组中的元素一一比较,我们可以换个思路,将原数组中重复元素的最后一个元素放入结果数组中。

function unique(a) {
 var res = a.filter(function(item, index, array) {
 return array.indexOf(item) === index;
 });
 return res;
}
var a = [1, 1, '1', '2', 1];
var ans = unique(a);
console.log(ans); // => [1, "1", "2"]

虽然复杂度还是 O(n^2),但是可以看到结果不同,1 出现在了数组最后面,因为结果数组取的是元素最后一次出现的位置。

方法三(sort)

如果笔试面试时只答出了上面这样 O(n^2) 的方案,可能还不能使面试官满意,下面就来说几种进阶方案。

将数组用 sort 排序后,理论上相同的元素会被放在相邻的位置,那么比较前后位置的元素就可以了。

function unique(a) {
 return a.concat().sort().filter(function(item, pos, ary) {
 return !pos || item != ary[pos - 1];
 });
}
var a = [1, 1, 3, 2, 1, 2, 4];
var ans = unique(a);
console.log(ans); // => [1, 2, 3, 4]

但是问题又来了,1 和 "1" 会被排在一起,不同的 Object 会被排在一起,因为它们 toString() 的结果相同,所以会出现这样的错误:

function unique(a) {
 return a.concat().sort().filter(function(item, pos, ary) {
 return !pos || item != ary[pos - 1];
 });
}
var a = [1, 1, 3, 2, 1, 2, 4, '1'];
var ans = unique(a);
console.log(ans); // => [1, 2, 3, 4]

当然你完全可以针对数组中可能出现的不同类型,来写这个比较函数。不过这似乎有点麻烦。

方法四 (object)

用 JavaScript 中的 Object 对象来当做哈希表,这也是几年前笔试时的解法,跟 sort 一样,可以去重完全由 Number 基本类型组成的数组。

function unique(a) {
 var seen = {};
 return a.filter(function(item) {
 return seen.hasOwnProperty(item) ? false : (seen[item] = true);
 });
}
var a = [1, 1, 3, 2, 1, 2, 4];
var ans = unique(a);
console.log(ans); // => [1, 3, 2, 4]

还是和方法三一样的问题,因为 Object 的 key 值都是 String 类型,所以对于 1 和 "1" 无法分别,我们可以稍微改进下,将类型也存入 key 中。

function unique(a) {
 var ret = [];
 var hash = {};
 for (var i = 0, len = a.length; i < len; i++) {
 var item = a[i];
 var key = typeof(item) + item;
 if (hash[key] !== 1) {
 ret.push(item);
 hash[key] = 1;
 }
 }
 return ret;
}
var a = [1, 1, 3, 2, '4', 1, 2, 4, '1'];
var ans = unique(a);
console.log(ans); // => [1, 3, 2, "4", 4, "1"]

虽然解决了讨厌的 1 和 "1" 的问题,但是还有别的问题!

function unique(a) {
 var ret = [];
 var hash = {};
 for (var i = 0, len = a.length; i < len; i++) {
 var item = a[i];
 var key = typeof(item) + item;
 if (hash[key] !== 1) {
 ret.push(item);
 hash[key] = 1;
 }
 }
 return ret;
}
var a = [{name: "hanzichi"}, {age: 30}, new String(1), new Number(1)];
var ans = unique(a);
console.log(ans); // => [Object, String]

但是如果数组元素全部是基础类型的 Number 值,键值对法应该是最高效的!

方法五 (ES6)

ES6 部署了 Set 以及 Array.from 方法,太强大了!如果浏览器支持,完全可以这样:

function unique(a) {
 return Array.from(new Set(a));
}
var a = [{name: "hanzichi"}, {age: 30}, new String(1), new Number(1)];
var ans = unique(a);
console.log(ans); // => [Object, Object, String, Number]

_.unique

最后来看看 underscore 对此的实现方式,underscore 将此封装到了 _.unique 方法中,调用方式为 _.unique(array, [isSorted], [iteratee])。其中第一个参数是必须的,是需要去重的数组,第二个参数可选,如果数组有序,则可以传入布尔值 true,第三个参数可选,如果需要对数组迭代的结果去重,则可以传入一个迭代函数。而数组元素去重是基于 === 运算符的。

其实很简单,underscore 中的实现方式和上面的方法一相似。

我们来看它的核心代码:

for (var i = 0, length = getLength(array); i < length; i++) {
 var value = array[i],
 // 如果指定了迭代函数
 // 则对数组每一个元素进行迭代
 computed = iteratee ? iteratee(value, i, array) : value;
 // 如果是有序数组,则当前元素只需跟上一个元素对比即可
 // 用 seen 变量保存上一个元素
 if (isSorted) {
 // 如果 i === 0,则直接 push
 // 否则比较当前元素是否和前一个元素相等
 if (!i || seen !== computed) result.push(value);
 // seen 保存当前元素,供下一次对比
 seen = computed;
 } else if (iteratee) {
 // 如果 seen[] 中没有 computed 这个元素值
 if (!_.contains(seen, computed)) {
 seen.push(computed);
 result.push(value);
 }
 } else if (!_.contains(result, value)) { 
 // 如果不用经过迭代函数计算,也就不用 seen[] 变量了
 result.push(value);
 }
}

外面的循环遍历数组元素,对于每个元素,如果数组有序,则和前一个元素比较,如果相同,则已经出现过,不加入到结果数组中,否则则加入。而如果有迭代函数,则计算传入迭代函数后的值,对值去重,调用 .contains 方法,而该方法的核心就是调用.indexOf 方法,和我们上面说的方法一异曲同工。

 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
关闭浏览器时提示onbeforeunload事件
Dec 25 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
页面点击小红心js实现代码
May 26 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
ES6实现图片切换特效代码
Jan 14 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
Jan 21 #Javascript
JS常用知识点整理
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
Jan 21 #Javascript
原生js实现可拖动的登录框效果
Jan 21 #Javascript
微信小程序 WebSocket详解及应用
Jan 21 #Javascript
使用vue.js2.0 + ElementUI开发后台管理系统详细教程(二)
Jan 21 #Javascript
遍历json获得数据的几种方法小结
Jan 21 #Javascript
You might like
PHP Session_Regenerate_ID函数双释放内存破坏漏洞
2011/01/27 PHP
ThinkPHP在新浪SAE平台的部署实例
2014/10/31 PHP
PHP 使用二进制保存用户状态的实例
2018/01/29 PHP
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
jQuery Mobile 导航栏代码
2013/11/01 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
jquery实现点击label的同时触发文本框点击事件的方法
2015/06/05 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
JS对HTML表格进行增删改操作
2016/08/22 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
Python3运算符常见用法分析
2020/02/14 Python
python2 对excel表格操作完整示例
2020/02/23 Python
Python中私有属性的定义方式
2020/03/05 Python
Python3自定义json逐层解析器代码
2020/05/11 Python
为什么是 Python -m
2020/06/19 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
css3实现元素环绕中心点布局的方法示例
2019/01/15 HTML / CSS
皇马官方商城:Real Madrid Store
2016/09/02 全球购物
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
机电一体化专业推荐信
2013/12/03 职场文书
出纳担保书范文
2014/04/02 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
国际经济与贸易专业求职信
2014/07/10 职场文书
考试作弊检讨
2015/01/27 职场文书
小学英语教学经验交流材料
2015/11/02 职场文书
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏