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

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

'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. "_OBJC_CLASS_$_WeiboApi", referenced from: objc-class-ref in libtuyoo.a(TuYoo.o)

    Undefined symbols for architecture i386: "_OBJC_CLASS_$_WeiboApi", referenced from: objc-c ...

  2. 在python中使用zookeeper管理你的应用集群

    http://www.zlovezl.cn/articles/40/ 简介: Zookeeper 分布式服务框架是 Apache Hadoop 的一个子项目,它主要是用来解决分布式应用中经常遇到的一些 ...

  3. codeforces D. Pashmak and Parmida's problem

    http://codeforces.com/contest/459/problem/D 题意:给你n个数,然后统计多少组(i,j)使得f(1,i,ai)>f(j,n,aj); 思路:先从左往右统 ...

  4. WINDOWS+L组合键锁定XP

    在Windows XP时工作时,我们经常要锁定计算机,当计算机被锁定后,只有重新登录才能够使用计算机,从而保证了计算机的安全. WINDOWS+L组合键锁定XP,就是键盘上右边的小窗口+L键 ,可以快 ...

  5. TEdit,TMemo背景透明

    The component below works perfectly, except for the following problem: 1) Saves the component below ...

  6. sequence使用

    SQL> create sequence seq1 minvalue 1 maxvalue 999999999999999999999999999 start with 0 increment ...

  7. 【转】MongoDB资料汇总专题

    1.MongoDB是什么 MongoDB介绍PPT分享 MongoDB GridFS介绍PPT两则 初识 MongoDB GridFS MongoDB GridFS 介绍 一个NoSQL与MongoD ...

  8. HDOJ 2017 字符串统计

    Problem Description 对于给定的一个字符串,统计其中数字字符出现的次数. Input 输入数据有多行,第一行是一个整数n,表示测试实例的个数,后面跟着n行,每行包括一个由字母和数字组 ...

  9. octopress 如何添加youku视频和本地视频(octopress how to add a youku video or a local video)

    用octopress 官方的video tag 可以添加视频,但是由于国内经常使用的是youku,所以下面是如何添加youku视频到octopress的教程. 首先添加youku.rb文件到路径:oc ...

  10. CentOS相关引导文件杂摘

    1,EFI文件