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

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

'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. CodeforcesGym101116 B Bulbs

    Description Greg has an \(m \times n\) grid of Sweet Lightbulbs of Pure Coolness he would like to tu ...

  2. windows下端口被占用的解决方法

    1:打开CMD输入:netstat -ano | findstr "80" 找到PID: 2:查看应用名称:tasklist | findstr "2544" ...

  3. 双缓冲技术(Double Buffering)(1、简介和源代码部分)

    这一节实在是有些长,翻译完后统计了一下,快到2w字了.考虑到阅读的方便和网络的速度,打算把这节分为5个部分,第一部分为双缓冲技术的一个 简介和所有的代码,如果能够看懂代码,不用看译文也就可以了.第二部 ...

  4. SQL Server 阻塞分析

    一.加锁(locking).阻塞(blocking).死锁(deadlock)定义        加锁:用于管理多个连接的进程.当连接需要访问一块数据时,在这些数据上放置某种类型的锁.      阻塞 ...

  5. 【HDOJ】3029 Scales

    CF上有道类似的,做了那个这个简单多了.思路是取模.模等于1如何处理,模等于2如何分类分类讨论后.可解.解得对数据排序后再输出. /* 3029 */ #include <iostream> ...

  6. bzoj2337

    这句话感觉都能成定理了:xor问题逐位考虑……这道题就是这样,然后和bzoj3143和相似但这道题多了自环,于是我们设f[i]表示当前位由i走到n的后为1的数学期望显然f[n]=0,可得f[i]=si ...

  7. HashMap循环遍历方式及其性能对比

    主要介绍HashMap的四种循环遍历方式,各种方式的性能测试对比,根据HashMap的源码实现分析性能结果,总结结论.   1. Map的四种遍历方式 下面只是简单介绍各种遍历示例(以HashMap为 ...

  8. 对于利用ica进行fmri激活区识别的理解

    首先,ica是一种探索性的方法,属于数据驱动的范畴. ica计算量很大,一般都是离线式计算. ica基于的猜想是,世界是加性的.在我们所研究的脑科学中,所采集到的BOLD信号,是由一些源信号所构成,更 ...

  9. unity3d Hair real time rendering 真实头发实时渲染

    先放上效果 惊现塞拉酱 算法是Weta Digital根据siggraph2003的论文加以改进,改进之前使用的是Kajiya and Kay’s 模型,它能量不守恒,也就是说不是基于物理的,不准确 ...

  10. c++学习笔记(2)类的声名与实现的分离及内联函数

    一.类的声名与实现的分离: 和c函数声明与实现分离类似 有.h : 类的声明 .cpp : 类的实现 在在一个类的cpp中应该包含本类的.h文件 在cpp中类的使用:例: //Circle类 //Ci ...