ES5 ES6中Array对象去除重复项的方法总结

输入例子

[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq()

输出例子

[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']

分析

题目要求给 Array 添加方法，所以我们需要用到 prototype。数组去重本身算法不是很难，但是在 JavaScript 中很多人会忽视 NaN 的存在，因为在 JS 中 NaN !== NaN 。但是在去重中我们又不能保留两个 NaN ，所以需要进行一下判断，这是很多人容易忽视的。

ES5的实现如下：

代码

Array.prototype.uniq = function () {
 var arr = [];
 var flag = true;
 this.forEach(function(item) {
 // 排除 NaN (重要！！！)
 if (item != item) {
 flag && arr.indexOf(item) === -1 ? arr.push(item) : '';
 flag = false;
 } else {
 arr.indexOf(item) === -1 ? arr.push(item) : ''
 }
 });
 return arr;
}

验证

我们只需要在数组上直接调用 uniq 方法就可以了，如：

[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq()

结果为：

[false, true, undefined, null, NaN, 0, 1, {}, {}, 'a']

进阶

ES6的实现

ES6新增了 Set 对象，也就是我们所说的“集合”，它类似于数组，但是成员的值都是唯一的，没有重复的值。所以可以方便去重。

Set本身是一个构造函数，用来生成Set数据结构。(详看👉Set和Map数据结构)

如果用ES6为 Array 对象添加一个去除重复项的方法，则可以如下实现：

Array.prototype.uniq = function() {
 return Array.from(new Set(this));
}

代码中用 Array.from 把 Set 结构转换成数组，当然，你也可以用其他方法，这里不深究。这里去重关键代码只需要一行，是不是非常简单？😄

如果你要优雅一点，可以使用 ES6 的扩展运算符。如下：

Array.prototype.uniq = function() {
 return [...new Set(this)];
}

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • JS array 数组详解

    1.数组的声明方法 (1): arrayObj = new Array(); //创建一个数组. 复制代码 代码如下: var arr1 = new Array(); (2):arrayObj = new Array([size]) 创建一个数组并指定长度,注意不是上限,是长度. 复制代码 代码如下: var a = new Array(5); (3):arrayObj = new Array([element0[, element1[, ...[, elementN]]]]) 创建一个数组并赋

  • js中数组(Array)的排序(sort)注意事项说明

    直接看代码吧,测试结果也贴在里面了 复制代码 代码如下: var arrDemo = new Array(); arrDemo[0] = 10; arrDemo[1] = 50; arrDemo[2] = 51; arrDemo[3] = 100; arrDemo.sort(); //调用sort方法后,数组本身会被改变,即影响原数组 alert(arrDemo);//10,100,50,51 默认情况下sort方法是按ascii字母顺序排序的,而非我们认为是按数字大小排序 arrDemo.so

  • 5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例

    ECMAScript5标准发布于2009年12月3日,它带来了一些新的,改善现有的Array数组操作的方法.然而,这些新奇的数组方法并没有真正流行起来的,因为当时市场上缺乏支持ES5的浏览器. Array "Extras" 没有人怀疑这些方法的实用性,但写polyfill(PS:兼容旧版浏览器的插件)对他们来说是不值得的.它把"必须实现"变成了"最好实现".有人居然将这些数组方法称之为Array "Extras".哎! 但是,

  • Js判断参数(String,Array,Object)是否为undefined或者值为空

    有时候我们会遇到这样的情况:在一些前端控件要提交数据到服务器端的数据验证过程中,需要判断提交的数据是否为空.如果是普通表单的字符串数据,只需要在 trim 后判断 length 即可,而这里需要的数据可以是各种不同的类型(数字.字符串.数组.对象等等),通过 JSON.stringify(data) 进行序列化后再传递. 在这里定义如下的数据值为"空值": •undefined•null•空字符串及纯空白字符串:''.'    ' 等.•空数组:[]•空对象:{} 对于除此以外的数据值

  • js删除Array数组中指定元素的两种方法

    本节内容: js删除Array数组中指定元素 方法一, /* * 方法:Array.remove(dx) 通过遍历,重构数组 * 功能:删除数组元素. * 参数:dx删除元素的下标. */ Array.prototype.remove=function(dx) { if(isNaN(dx)||dx>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[dx]) { this[n++]=

  • JS数组(Array)处理函数整理

    1.concat() 连接两个或更多的数组 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本. 例如: 复制代码 代码如下: <script type="text/javascript">         var arr = [1, 2, 3];         var arr1 = [11, 22, 33];         document.write(arr.concat(4, 5, arr1));  </script> 输出结果: 1,2,3,

  • js Array的用法总结

    new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array(); objArray.concact([item1[,item2[,....]]]-------------------将参数列表连接到objArray的后面形成一个新的数组并返回,原有数组不受影响.如:var arr=["a","b","c"];

  • js中数组Array的一些常用方法总结

    var list = new Array()是我们在js中常常写到的代码,今天就总结哈Array的对象具有哪些方法. list[0] = 0; list[1] = 1; list[2] = 2; 或者这样声明:var list = [0,1,2] 1 shift()t:删除数组的第一个元素,返回删除的值.这里是0 2 unshift(3,4):把参数加载数组的前面,返回数组的长度.现在list:中是3,4,0,1,2 3pop():删除数组的最后一个元素,返回删除的值.这里是2. 4push(3

  • JS中数组Array的用法示例介绍

    new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array(); objArray.concact([item1[,item2[,....]]]-------------------将参数列表连接到objArray的后面形成一个新的数组并返回,原有数组不受影响.如:var arr=["a","b","c"];

  • ES5 ES6中Array对象去除重复项的方法总结

    输入例子 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a', 'a', NaN].uniq() 输出例子 [false, true, undefined, null, NaN, 0, 1, {}, {}, 'a'] 分析 题目要求给 Array 添加方法,所以我们需要用到 prototype.数组去重本身算法不是很难,但是在 JavaScript 中很多人会忽视 NaN 的存在,因为在 JS 中 NaN !== NaN .但是在去重中我们

  • javascript模拟map输出与去除重复项的方法

    本文实例讲述了javascript模拟map输出与去除重复项的方法.分享给大家供大家参考.具体方法如下: 1.Javascriptmap输出 function Map(){ // private var obj = {} ;// 空的对象容器,承装键值对 // put 方法 this.put = function(key , value){ obj[key] = value ;// 把键值对绑定到obj对象上 } // size 方法 获得map容器的个数 this.size = functio

  • PHP二维数组实现去除重复项的方法【保留各个键值】

    本文实例讲述了PHP二维数组实现去除重复项的方法.分享给大家供大家参考,具体如下: 对于如下二维数组,要求对其进行去重: $arr = array( '0'=>array( 'name'=>'james', 'age'=>30, ), '1'=>array( 'name'=>'susu', 'age'=>26, ), '2'=>array( 'name'=>'james', 'age'=>30, ), 'new'=>array( 'name'=&

  • JavaScript合并两个数组并去除重复项的方法

    本文实例讲述了JavaScript合并两个数组并去除重复项的方法.分享给大家供大家参考.具体实现方法如下: Array.prototype.unique = function() { var a = this.concat(); for(var i=0; i for(var j=i+1; j if(a[i] === a[j]) a.splice(j, 1); } } return a; }; //Demo var array1 = ["a","b"]; var ar

  • mysql优化小技巧之去除重复项实现方法分析【百万级数据】

    mysql优化小技巧之去除重复项实现方法分析【百万级数据】

    本文实例讲述了mysql优化小技巧之去除重复项实现方法.分享给大家供大家参考,具体如下: 说到这个去重,脑仁不禁得一疼,尤其是出具量比较大的时候.毕竟咱不是专业的DB,所以嘞,只能自己弄一下适合自己去重方法了. 首先按照常规首段,使用having函数检查重复项,完事一个一个的删除.不要问我having检测重复项的sql咋写,你懂得哈...这个在只有几条重复的时候还可以.要是几千上万条不同数据重复,那咋办... 完事呢,咱就考虑了,用having函数查询的时候,原始sql如下: select `n

  • jQuery实现合并/追加数组并去除重复项的方法 原创

    jQuery实现合并/追加数组并去除重复项的方法 原创

    本文实例讲述了jQuery实现合并/追加数组并去除重复项的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>www.jb51.net jQuery不重复地追

  • Java中List集合去除重复数据的方法汇总

    List集合概述 List集合是一个元素有序(每个元素都有对应的顺序索引,第一个元素索引为0).且可重复的集合. List集合常用方法 List是Collection接口的子接口,拥有Collection所有方法外,还有一些对索引操作的方法. void add(int index, E element);:将元素element插入到List集合的index处: boolean addAll(int index, Collection<? extends E> c);:将集合c所有的元素都插入到

  • JavaScript中Array 对象相关的几个方法

    push 方法将新元素添加到一个数组中,并返回数组的新长度值. arrayObj.push([item1 [item2 [. . . [itemN ]]]])参数arrayObj 必选项.一个 Array 对象. item, item2,. . . itemN 可选项.该 Array 的新元素. 说明push 方法将以新元素出现的顺序添加这些元素.如果参数之一为数组,那么该数组将作为单个元素添加到数组中.如果要合并两个或多个数组中的元素,请使用 concat 方法. 示例 <script typ

  • JavaScript基于对象去除数组重复项的方法

    本文实例讲述了JavaScript基于对象去除数组重复项的方法.分享给大家供大家参考,具体如下: JavaScript中,去除数组重复项是一个很常用的函数,而且在面试中也很经常被提问到.很多人在面对这个问题的时候,一般都是采用多层for循环来一步一步的比较,然后删除,那样不仅代码量很多,而且性能也很不好.在JavaScript的对象中,有一个特性就是key永远不重复,如果重复后面的就会覆盖前面的. 三个步骤: 1# 把数组转换成js对象 2# 把数组值变成js对象中的key 3# 把对象还原成数

  • C++实现LeetCode(26.有序数组中去除重复项)

    [LeetCode] 26. Remove Duplicates from Sorted Array 有序数组中去除重复项 Given a sorted array nums, remove the duplicates in-place such that each element appear only once and return the new length. Do not allocate extra space for another array, you must do this

随机推荐