JavaScript数组去重—ES6的两种方式
说明
JavaScript数组去重这个问题,经常出现在面试题中,以前也写过一篇数组去重的文章,(JavaScript 数组去重的多种方法原理详解)但感觉代码还是有点不够简单,今天和大家再说两种方法,代码可是足够的少了。
解释
方法一:
function unique(arr) {
const res = new Map();
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
就这么短,就可以了,我们来解释一下为什么。
Map对象
Map是ES6 提供的新的数据结构。
Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
下表列出了 Map 对象的方法。
Map对象还有一个size属性,他返回Map对象的键/值对的数量。
数组的 filter() 方法
filter() 方法创建一个新的数组,新数组中的元素 是 通过检查 指定数组 中 符合条件的所有元素。
语法:
array.filter(function(currentValue,index,arr), thisValue)
参数说明:
箭头函数
return arr.filter((a) => !res.has(a) && res.set(a, 1))
//上面的代码可以改成这样
return arr.filter(function(a){
return !res.has(a) && res.set(a, 1);
});
1、箭头函数写代码拥有更加简洁的语法;
2、不会绑定this。
了解更多,点这里
方法一 分析
function unique(arr) {
//定义常量 res,值为一个Map对象实例
const res = new Map();
//返回arr数组过滤后的结果,结果为一个数组
//过滤条件是,如果res中没有某个键,就设置这个键的值为1
return arr.filter((a) => !res.has(a) && res.set(a, 1))
}
方法二:
function unique(arr) {
return Array.from(new Set(arr))
}
这个方法的代码量更少,简直不可思议。
数组的 from方法
Array.from() 方法从一个类似数组或可迭代的对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等) 中创建一个新的数组实例
语法:
Array.from(arrayLike[, mapFn[, thisArg]])
示例代码:
const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]
Array.from('foo');
// ["f", "o", "o"]
Set对象
Set 对象允许你存储任何类型的 唯一值 ,无论是原始值或者是对象引用。
Set对象是值的集合,你可以按照插入的顺序迭代它的元素。
Set中的元素只会出现一次,即 Set 中的元素是唯一的。
语法:
new Set([iterable]);
参数:
iterable,如果传递一个可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等),它的所有元素将被添加到新的 Set中。如果不指定此参数或其值为null,则新的 Set为空。
下表列出了 Set 对象的方法。
Set对象和Map对象一样,都有一个size属性,他返回Set对象的值的个数。
方法二 分析
function unique(arr) {
//通过Set对象,对数组去重,结果又返回一个Set对象
//通过from方法,将Set对象转为数组
return Array.from(new Set(arr))
}
总结
这次说的两个方法,真的很简单,主要就是靠ES6里的新东西,难度不大,代码简单,主要就是多用用就好了。
经人提醒,再补充一种,[...new Set(arr)]
不懂 ... 的朋友,可以看这里 js扩展运算符
参考
ES6新特性:Javascript中的Map和WeakMap对象
http://www.cnblogs.com/dilige...
Set和Map数据结构
http://es6.ruanyifeng.com/#do...
MDN
https://developer.mozilla.org...
Array filter()
http://www.runoob.com/jsref/j...
Array.from()
https://developer.mozilla.org...
JavaScript初学者必看“箭头函数”
http://www.cnblogs.com/fundeb...
JavaScript数组去重—ES6的两种方式的更多相关文章
- JavaScript对象属性访问的两种方式
JavaScript对象属性访问的两种方式 object.attribute object["attribute"] 例如: var employees = [ { "f ...
- javascript中实现sleep的两种方式
最近在js中要使用到类似于C++中的sleep函数(让cpu休眠).但是js是不可能让cpu休眠,所以可以通过下面的两种方式模拟sleep函数. 方式一:使用setTimeout函数代替.如果在一个循 ...
- JavaScript 数组去重的那几种方法
数组去重是最常见的面试题,现在总结一下我所知道的几种 首先第一个就是es5 最常见的循环比较 var array= [1, 1, 2]; function test(nums) { for (var ...
- js 数组去重常见的几种方式
1.利用标记 var arr = [2,6,2,6,4,3,16];// arr = [2,6,4,3,16] function norepeat(arr){ var res = []; for(va ...
- jquery、javascript实现(get、post两种方式)跨域解决方法
一.实现get方式跨域请求数据 浏览器端 <script> $(document).ready(function(){ $.ajax({ url: "http://www.xxx ...
- JavaScript 深度遍历对象的两种方式,递归与非递归
递归遍历: 基本问题: 当前属性值不为对象时,打印键和值 递归过程:当前属性值为对象时,打印键,继续递归 var o = { a: { b: { c: { d: { e: { f: 1, g:{ h: ...
- JavaScript数组去重的7种方式
1.利用额外数组 function unique(array) { if (!Array.isArray(array)) return; let newArray = []; fo ...
- 合并两个数组并去重(ES5和ES6两种方式实现)
合并两个数组并去重(ES5和ES6两种方式实现) ES6实现方式 let arr1 = [1, 1, 2, 3, 6, 9, 5, 5, 4] let arr2 = [1, 2, 5, 4, 9, 7 ...
- javascript 数组去重的6种思路
前端在日常开发中或多或少都会碰到有对数据去重的需求,实际上,像是lodash这些工具库已经有成熟完备的实现,并且可以成熟地运用于生产环境.但是这并不妨碍我们从思维拓展的角度出发,看看去重可以用几种思路 ...
随机推荐
- Elastic Stack之ElasticSearch分布式集群二进制方式部署
Elastic Stack之ElasticSearch分布式集群二进制方式部署 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 想必大家都知道ELK其实就是Elasticsearc ...
- Helm简介及安装
前提条件 一个kubernetes集群 安装和配置集群端服务Helm和Tiller 确定要应用于安装的安全配置(如果有) 1.安装HELM 每一个版本HELM提供多种操作系统的二进制版本.可以手动下载 ...
- 转 如何阅读TensorFlow源码
通过bazel学习之后,大概了解了TensorFlow的项目的源文件和描述文件. 下面是一篇不错的介绍,搬砖here. 在静下心来默默看了大半年机器学习的资料并做了些实践后,打算学习下现在热门的T ...
- [NIO-4]选择器
选择器 最后,我们探索一下选择器.由于选择器内容比较多,所以本篇先偏理论地讲一下,后一篇讲代码,文章也没有什么概括.总结的,写到哪儿算哪儿了,只求能将选择器写明白,并且将一些相对重要的内容加粗标红. ...
- shiro默认登录
业务需要,A项目跳转到B项目进行相关操作.而B项目使用的是shiro登录验证,懵逼了半天,好吧我很菜. 当然你也可以在shiro配置文件中放过这些方法,但是为了安全考虑需要遵守这些规则. 因此A跳转到 ...
- java位运算(&、|、 ~、>>、>>> 、 ^)
1.& 与 数字按位进行与运算 101101 110111 100101 2.| 或 数字按位进行或运算 3.~ 非 数字按位取反 4.>> 右移 数字按位进行右移 正数右移高位补 ...
- Python正则匹配之有名分组
参考:http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html # re.match import re m = re.match(r'( ...
- 伪触发 input file 的click事件
前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...
- 一个CLR20r3 错误解决。
好久没写过winform程序了,用devexpress写了个小工具,连一个本地的数据库,感觉不会出什么异常,连接时就没加捕获,调通之后就没管,因为特殊需求,需要把程序放到腾讯云上运行,结果一运行就报错 ...
- NPOI导出Excel2007-xlsx
今天在用npoi导出xls时会报错,经过在网上查找资料,找到一篇博客文章介绍的,原文地址https://www.cnblogs.com/spring_wang/p/3160020.html 1.今天再 ...