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 相关文章推荐
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
javascript获取form里的表单元素的示例代码
Feb 14 Javascript
javascript定义变量时带var与不带var的区别分析
Jan 12 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
jQuery实现按比例缩放图片的方法
Apr 29 jQuery
解决Linux无法正常安装与卸载Node.js的方法
Jan 19 Javascript
解决vue 绑定对象内点击事件失效问题
Sep 05 Javascript
微信小程序日历组件使用方法详解
Dec 29 Javascript
Vue使用Canvas绘制图片、矩形、线条、文字,下载图片
Apr 26 Javascript
用webpack4开发小程序的实现方法
Jun 04 Javascript
微信小程序 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 面向对象详解
2012/09/13 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
PHP cURL初始化和执行方法入门级代码
2015/05/28 PHP
javascript 面向对象 function类
2010/05/13 Javascript
JS中setTimeout()的用法详解
2013/04/14 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
react 父组件与子组件之间的值传递的方法
2017/09/14 Javascript
详解JS中的this、apply、call、bind(经典面试题)
2017/09/19 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
angular 实现同步验证器跨字段验证的方法
2019/04/11 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
Angular 多模块项目构建过程
2020/02/13 Javascript
js实现特别简单的钟表效果
2020/09/14 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Python 字符串转换为整形和浮点类型的方法
2018/07/17 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python2.7的flask框架之引用js&amp;css等静态文件的实现方法
2019/08/22 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
给酒店员工的表扬信
2014/01/11 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
五年后的职业生涯规划
2014/03/04 职场文书
大学生学期自我鉴定
2014/03/19 职场文书
党员自我对照检查材料
2014/08/19 职场文书
2016年七夕爱情寄语
2015/12/04 职场文书
OpenCV-Python直方图均衡化实现图像去雾
2021/06/07 Python
Python编程编写完善的命令行工具
2021/09/15 Python