今天五一,在出去玩之前赶紧写篇博客,时刻不要忘记学习^_^!!

提到数组去重,想必大家都不陌生,会的同学可能噼里啪啦写出好几个,下面来看看之前常见的去重代码:

'use strict';
var arr = [1,'a',undefined,null,NaN,1,'a',undefined,null,NaN];
Array.prototype.remDub = Array.prototype.remDub || function(){
this.sort();
var arr = [this[0]];
var bOk = true;
for(var i = 1; i<this.length;i++){
if(this[i] !== arr[arr.length-1]){
arr.push(this[i]);
}
}
return arr;
};
console.log(arr.remDub()); // [ 1, NaN, NaN, 'a', null, undefined ]

上面这种是网上最常见的去重,看起来还行,就是没有把NaN给去除,凑合能用。。。有的同学肯定会说那怎么行,咋们干程序是个严谨的事,一定要追求完美,

那有什么办法可以办法可以解决呢??其实是有的。。。我们可以借助json这种数据结构来实现,下面请看代码:

'use strict';
var arr = [1,'a',undefined,null,NaN,1,'a',undefined,null,NaN];
Array.prototype.remDub = Array.prototype.remDub || function(){
var json = {};
for(var i = 0; i<this.length; i++){
json[this[i]] || (json[this[i]] = this[i]);
}
var arr = [];
for(var name in json){
arr.push(json[name]);
}
return arr;
};
console.log(arr.remDub()); //[ 1, 'a', undefined, null, NaN ]

上面这种利用json可以实现,其实在es6没出来前用这个是不错,但是es6是未来发展趋势,所以来看看es6时如何实现的吧:

'use strict';
let arr = [1,'a',undefined,null,NaN,1,'a',undefined,null,NaN];
Array.prototype.remDub = Array.prototype.remDub || function () {
//return Array.from(new Set(this));
return [...new Set(this)];
};
console.log(arr.remDub()); //[ 1, 'a', undefined, null, NaN ]

没错,用es6区区几行代码就解决了去重,利用 Set的这种不重复的数据结构。Set内部判断两个值是否不同,使用的算法叫做"Same-value equality",它类似于精确相等运算符(===),主要的区别是NaN等于自身,而精确相等运算符认为NaN不等于自身。

到了这里很多同学会说,现在好多浏览器都不支持es6语法,用了也等于白用,那么这里我就在在介绍个东西吧。它叫babel;

首先我们通过npm去安装它

这样我们全局都能使用babel这个命令了,当然你也可以在改文件根目录下把它注入依赖

然后在安装一个babel-preset-es2015的模块

然后在根目录下配置个.babelrc的文件,在里面配置方法

没错,这就是刚才我们安装的第二个模块,我们告诉babel用es2015去转换;

万事俱备,只欠一行命令了,接下来我们在命令行输入:

removeDub.js就是刚才es6语法的js文件,babel转换后输出es5语法的js文件。

转换前:

转换后:

关于更多的ES6的语法,其实大家可以去看看阮老师写的ECMAScript 6入本。

ES6数组去重的更多相关文章

  1. ES6数组去重及ES5数组去重方法

    ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]; ...

  2. ES6数组去重方法

    Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员),操作方法有:add(value).delete(value).has(value).clear():遍历方法有:keys ...

  3. es6 数组去重

    方法一: var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2]; var arr2 = arr.filter((x, index,se ...

  4. js(es6)数组去重

    // 利用set.reduce.filter去重 // Set function getSetArr(arr) { return [...new Set(arr)] } console.log(get ...

  5. ES6 数组去重 方法用了filter或者 indexOf Array.from

  6. JS 数组去重的几种方式

    JS 常见的几种数组去重方法 一.最简单方法(indexOf 方法) 实现思路:新建一个数组,遍历要去重的数组,当值不在新数组的时候(indexOf 为 -1)就加入该新数组中: function u ...

  7. ES6数组相关

    ES6数组新增的几个方法: 1. forEach() //forEach()遍历数组,无返回值,不改变原数组 var arr=[1,2,3,4] arr.forEach((item,index,arr ...

  8. 一行代码实现数组去重(ES6)

    ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]; ...

  9. JavaScript数组去重—ES6的两种方式

    说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...

随机推荐

  1. nodejs注册为windows服务

    http://blog.csdn.net/puncha/article/details/9047311 http://www.oschina.net/question/12_18694 http:// ...

  2. 解压Windows的install.wim文件

    转自无需软件,解压Win8/Win8.1的install.wim文件 一.检查镜像版本: 镜像中包含多个版本,需要确认自己需要的版本,我的镜像路径是"F:\win8.1\sources\in ...

  3. MVC自学系列之一(MVC入门篇)

      MVC是如何适用于ASP.NET中的 自从2002年ASP.NET 1.0版本的首次发布,就知道ASP.NET和Web Forms是同样一回事.ASP.NET由抽象两层类所支持: -->Sy ...

  4. 关于Cookie跨域操作的一些总结

    正常的cookie只能在一个应用中共享,即一个cookie只能由创建它的应用获得. 1.可在同一应用服务器内共享方法:设置cookie.setPath("/");     本机to ...

  5. 《More Effective C++》 条款5 谨慎定义类型转换函数

    ---恢复内容开始--- C++编译器能够在两种数据类型之间进行隐式转换(implicit conversions),它继承了C语言的转换方法,例如允许把char隐式转换为int和从short隐式转换 ...

  6. linux 设置命令行属性,背景色,前景色等

    我的博客:www.while0.com 主要是命令setterm.

  7. R语言 逐步回归分析

    逐步回归分析是以AIC信息统计量为准则,通过选择最小的AIC信息统计量,来达到删除或增加变量的目的. R语言中用于逐步回归分析的函数 step()    drop1()     add1() #1.载 ...

  8. python中文乱码例子

    #coding=utf-8 #---中文乱码--- #直接打印中文 print '千里之外取人首级,瞬息之间爆人菊花.' #中文前面加u,变成Unicode编码 print u'千里之外取人首级' # ...

  9. HDOJ/HDU 1133 Buy the Ticket(数论~卡特兰数~大数~)

    Problem Description The "Harry Potter and the Goblet of Fire" will be on show in the next ...

  10. Google的一些功能和软件

    本博文的主要内容有 .Google的一些功能和软件 Google的一些功能和软件 1.  iGoogle 2.  Google Earth 3.  Google Talk http://www.goo ...