说明

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的两种方式的更多相关文章

  1. JavaScript对象属性访问的两种方式

    JavaScript对象属性访问的两种方式 object.attribute object["attribute"] 例如: var employees = [ { "f ...

  2. javascript中实现sleep的两种方式

    最近在js中要使用到类似于C++中的sleep函数(让cpu休眠).但是js是不可能让cpu休眠,所以可以通过下面的两种方式模拟sleep函数. 方式一:使用setTimeout函数代替.如果在一个循 ...

  3. JavaScript 数组去重的那几种方法

    数组去重是最常见的面试题,现在总结一下我所知道的几种 首先第一个就是es5 最常见的循环比较 var array= [1, 1, 2]; function test(nums) { for (var ...

  4. js 数组去重常见的几种方式

    1.利用标记 var arr = [2,6,2,6,4,3,16];// arr = [2,6,4,3,16] function norepeat(arr){ var res = []; for(va ...

  5. jquery、javascript实现(get、post两种方式)跨域解决方法

    一.实现get方式跨域请求数据 浏览器端 <script> $(document).ready(function(){ $.ajax({ url: "http://www.xxx ...

  6. JavaScript 深度遍历对象的两种方式,递归与非递归

    递归遍历: 基本问题: 当前属性值不为对象时,打印键和值 递归过程:当前属性值为对象时,打印键,继续递归 var o = { a: { b: { c: { d: { e: { f: 1, g:{ h: ...

  7. JavaScript数组去重的7种方式

    1.利用额外数组 function unique(array) {    if (!Array.isArray(array)) return;     let newArray = [];    fo ...

  8. 合并两个数组并去重(ES5和ES6两种方式实现)

    合并两个数组并去重(ES5和ES6两种方式实现) ES6实现方式 let arr1 = [1, 1, 2, 3, 6, 9, 5, 5, 4] let arr2 = [1, 2, 5, 4, 9, 7 ...

  9. javascript 数组去重的6种思路

    前端在日常开发中或多或少都会碰到有对数据去重的需求,实际上,像是lodash这些工具库已经有成熟完备的实现,并且可以成熟地运用于生产环境.但是这并不妨碍我们从思维拓展的角度出发,看看去重可以用几种思路 ...

随机推荐

  1. Elastic Stack之ElasticSearch分布式集群二进制方式部署

    Elastic Stack之ElasticSearch分布式集群二进制方式部署 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 想必大家都知道ELK其实就是Elasticsearc ...

  2. Helm简介及安装

    前提条件 一个kubernetes集群 安装和配置集群端服务Helm和Tiller 确定要应用于安装的安全配置(如果有) 1.安装HELM 每一个版本HELM提供多种操作系统的二进制版本.可以手动下载 ...

  3. 转 如何阅读TensorFlow源码

      通过bazel学习之后,大概了解了TensorFlow的项目的源文件和描述文件. 下面是一篇不错的介绍,搬砖here. 在静下心来默默看了大半年机器学习的资料并做了些实践后,打算学习下现在热门的T ...

  4. [NIO-4]选择器

    选择器 最后,我们探索一下选择器.由于选择器内容比较多,所以本篇先偏理论地讲一下,后一篇讲代码,文章也没有什么概括.总结的,写到哪儿算哪儿了,只求能将选择器写明白,并且将一些相对重要的内容加粗标红. ...

  5. shiro默认登录

    业务需要,A项目跳转到B项目进行相关操作.而B项目使用的是shiro登录验证,懵逼了半天,好吧我很菜. 当然你也可以在shiro配置文件中放过这些方法,但是为了安全考虑需要遵守这些规则. 因此A跳转到 ...

  6. java位运算(&、|、 ~、>>、>>> 、 ^)

    1.& 与 数字按位进行与运算 101101 110111 100101 2.| 或 数字按位进行或运算 3.~ 非 数字按位取反 4.>> 右移 数字按位进行右移 正数右移高位补 ...

  7. Python正则匹配之有名分组

    参考:http://www.cnblogs.com/huxi/archive/2010/07/04/1771073.html # re.match import re m = re.match(r'( ...

  8. 伪触发 input file 的click事件

    前端在做 input file 美化的时候,通常 把 input 定位position 到 已美化的按钮最上方 opacity: 0 HTML5时代,已有更方便的方法,点击美化按钮直接触发选择文件事件 ...

  9. 一个CLR20r3 错误解决。

    好久没写过winform程序了,用devexpress写了个小工具,连一个本地的数据库,感觉不会出什么异常,连接时就没加捕获,调通之后就没管,因为特殊需求,需要把程序放到腾讯云上运行,结果一运行就报错 ...

  10. NPOI导出Excel2007-xlsx

    今天在用npoi导出xls时会报错,经过在网上查找资料,找到一篇博客文章介绍的,原文地址https://www.cnblogs.com/spring_wang/p/3160020.html 1.今天再 ...