ES6数组去重
今天五一,在出去玩之前赶紧写篇博客,时刻不要忘记学习^_^!!
提到数组去重,想必大家都不陌生,会的同学可能噼里啪啦写出好几个,下面来看看之前常见的去重代码:
'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数组去重的更多相关文章
- ES6数组去重及ES5数组去重方法
ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]; ...
- ES6数组去重方法
Set实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员),操作方法有:add(value).delete(value).has(value).clear():遍历方法有:keys ...
- 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 ...
- js(es6)数组去重
// 利用set.reduce.filter去重 // Set function getSetArr(arr) { return [...new Set(arr)] } console.log(get ...
- ES6 数组去重 方法用了filter或者 indexOf Array.from
- JS 数组去重的几种方式
JS 常见的几种数组去重方法 一.最简单方法(indexOf 方法) 实现思路:新建一个数组,遍历要去重的数组,当值不在新数组的时候(indexOf 为 -1)就加入该新数组中: function u ...
- ES6数组相关
ES6数组新增的几个方法: 1. forEach() //forEach()遍历数组,无返回值,不改变原数组 var arr=[1,2,3,4] arr.forEach((item,index,arr ...
- 一行代码实现数组去重(ES6)
ES6中新增了Set数据结构,类似于数组,但是 它的成员都是唯一的 ,其构造函数可以接受一个数组作为参数,如: let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]; ...
- JavaScript数组去重—ES6的两种方式
说明 JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代 ...
随机推荐
- BZOJ 2242 计算器
Description 你被要求设计一个计算器完成以下三项任务: \(1.\)给定\(y,z,p\),计算\(y^{z}\;mod\;P\)的值: \(2.\)给定\(y,z,p\),计算满足\(xy ...
- Jinja2学习笔记暨官方文档的翻译
http://blog.csdn.net/lgg201/article/details/4647471 呵呵, 刚刚看完Python模板引擎Jinja2的文档, 感觉很好, 觉得动态语言真是很好. ...
- php的ob实现页面静态化
php页面静态化的原理,用最少的代码解释页面静态化 如何应用:在插入或更新数据到数据库时,就执行一下代码是一种比较好的方法.比如:php执行add()方法时(就是插入数据时) //开启缓存 Ob_st ...
- 深入浅出Node.js (11) - 产品化
11.1 项目工程化 11.1.1 目录结构 11.1.2 构建工具 11.1.3 编码规范 11.1.4 代码审查 11.2 部署流程 11.2.1 部署环境 11.2.2 部署操作 11.3 性能 ...
- Linux下USB烧写uImage kernel
Linux下USB烧写uImage kernel 1.启动开发板,进入u-boot:(如果开发板中没有系统,可以通过用SD卡方式启动开发板进入) U-Boot 2011.06 (Mar 19 ...
- HDOJ/HDU 1250 Hat's Fibonacci(大数~斐波拉契)
Problem Description A Fibonacci sequence is calculated by adding the previous two members the sequen ...
- bzoj 2819 Nim(BIT,dfs序,LCA)
2819: Nim Time Limit: 20 Sec Memory Limit: 128 MBSubmit: 1596 Solved: 597[Submit][Status][Discuss] ...
- 介绍两个Eclipse插件: Implementors & Call Hierarchy
介绍两个Eclipse插件: Implementors & Call Hierarchy 本文介绍两个在Eclipse调试与跟踪过程中的两个实用插件 他们都可以在 http://eclipse ...
- UILabel,文字添加下划线,中划线
//显示下划线 //中划线 // NSDictionary *attribtDic = @{NSStrikethroughStyleAttributeName: [NSNumber nu ...
- Skype的故事:几乎所有风投都想投 犯罪分子洗钱必备
Skype的故事:几乎所有风投都想投 犯罪分子洗钱必备 转载自: http://news.chinaventure.com.cn/11/7/1381032922.shtml 今年是 Skype 网络电 ...