SE5的时候我们经常用数组或者类数组对象来操作数据,而对于一些使用惯了java之类语言的集合的开发人员来说,总有少了点什么的感觉,SE6提供Set和Map这两个集合。不仅从根本上为一些问题提供了解决方案(如数据不重复),还大大提升了性能。

要想理解Set和Map,就要从它的根本问题说起,在进行详细的API概览之前,我觉得有必要先说明两点:

  • 遍历Set和Map的顺序就是元素插入的顺序。这是与其它语言最不一样的地方,之所以这样定是因为负责实现ES6集合模块的作者经过实验验证,在javaScript中确定顺序遍历比不确定遍历效率要高。
  • Set和Map没有hash码。在其他语言,都能够自行实现一个哈希函数并暴露出系统默认的哈希函数,但在javaScript委员会选择了不暴露 。
关于第二点可能有些难理解,我们通过一个例子来说明:
var a = {name:"Jhon"};
var b = {name:"Jhon"};
var set = new Set();
set.add(a).add(b);
console.log(set.size); //2
//这两个对象应该按相同处理,毕竟它们有完全一样的属性。但在JavaScript中,它们是各自独立、互不相同的。

读万卷书不如操作一下,下面我就会对操作集合的这些API进行逐一的尝试验证,并且你会发现官方说明可能和浏览器实现是有差异的。

Set集合,没有重复元素的集合

var a = {name:"Jhon"};
var b = {name:"Jhon"};
var set = new Set(); // 创建一个新的,空的Set
set.add(a).add(6); //添加两个元素,add返回集合自身,可以链式调用
console.log(set[0]); //undefined,不支持索引遍历
console.log(set.size); //打印元素个数 2
set.forEach(function(value){ //遍历Set
console.log(value); //Object { name: "Jhon" },6
});
if(set.has(a)){ //判断是否存在某个元素
console.log("a"); //a
}
if(set.has(b)){ //false
console.log("b");
}
if(set.has({name:"Jhon"})){ //false
console.log("other");
}
var c = [1,2,2,3,4];
var setc = new Set(c); //new Set(iterable) :从任何可遍历数据中提取元素,构造出一个新的集合。
console.log(setc.size); //4,元素去重
console.log(setc.delete(4));//true,官方说delete会返回集合自身,但是在最新版火狐中如果元素存在,则返回true,反之返回false,链式调用会报出错
console.log(setc.size); //3
setc.clear(); //清空Set
console.log(setc.size); //0

//set.keys() 、 set.values() 和 set.entries() 返回各种迭代器,它们是为了兼容 Map 而提供的,所以我们待会儿再来看。

Map集合,由若干键-值对组成

var map = new Map(); //创建一个新的,空的Map
map.set("one",1); //增加列表项
map.set("two",2);
console.log(map.size); //2,获取元素个数
if(map.has("one")){ //true,判断元素存在
console.log("one");
}
console.log(map.get("one")); //1,根据key获取元素
map.forEach(function(value, key, map){ //遍历map
console.log(key + ":" + value); //one:1,two:2
});
for(var key of map.keys()){ //返回key的迭代器
console.log(key); //one,two
}
for(var value of map.values()){ //返回值的迭代器
console.log(value); //1,2
}
for(var [key,value] of map.entries()){ //返回项的迭代器
console.log(value); //1,2
}
console.log(map.delete("one")); //true,根据key删除项
map.clear(); //清空map
console.log(map.size); //0 var a = [["one",1],["two",2]];
var map1 = new Map(a); //new Map(pairs),通过数组或者已存在的map创建Map
map1.forEach(function(value, key, map){
console.log(key + ":" + value); //one:1,two:2
});

弱引用集合WeakSet和WeakMap

Map和Set都为内部的每个键或值保持了强引用,也就是说,如果一个对象被移除了,回收机制无法取回它占用的内存 ,除非在Map或者Set中删除它。

WeakSet并不对其中对象保持强引用。当WeakSet中的一个对象被回收时,它会简单地被从WeakSet中移除。WeakMap也类似地不为它的键保持强引用。如果一个键仍被使用,相应的值也就仍被使用 。
下面是弱引用集合的一些限制:
  • WeakMap只支持new、has、get、set 和delete。
  • WeakSet只支持new、has、add和delete 。
  • WeakSet的值和WeakMap的键必须是对象。
  • 都不可迭代,除非专门查询或给出你感兴趣的键,否则不能获得一个弱集合中的项 。
以上就是ES6集合的操作以及注意事项。



SE6新特性之集合Set、Map、WeakSet和WeakMap详解的更多相关文章

  1. Java 8新特性探究(八)精简的JRE详解

    http://www.importnew.com/14926.html     首页 所有文章 资讯 Web 架构 基础技术 书籍 教程 Java小组 工具资源 - 导航条 - 首页 所有文章 资讯 ...

  2. [转帖]Java 8新特性探究(八)精简的JRE详解

    Java 8新特性探究(八)精简的JRE详解 https://my.oschina.net/benhaile/blog/211804 精简版的api   撸了今年阿里.网易和美团的面试,我有一个重要发 ...

  3. Java8 新特性之集合操作Stream

    Java8 新特性之集合操作Stream Stream简介 Java 8引入了全新的Stream API.这里的Stream和I/O流不同,它更像具有Iterable的集合类,但行为和集合类又有所不同 ...

  4. [Java8教程]Java8新特性进阶集合

    Java8新特性进阶集合 基于 AOP 抽离方法的重复代码 Java8:当 Lambda 遇上受检异常 Java8:对字符串连接的改进 Java8:Java8 中 Map 接口的新方法 Java8:当 ...

  5. Android中实现java与PHP服务器(基于新浪云免费云平台)http通信详解

    Android中实现java与PHP服务器(基于新浪云免费云平台)http通信详解 (本文转自: http://blog.csdn.net/yinhaide/article/details/44756 ...

  6. 基于集合成工控机Ubuntu系统安装分区详解

    基于集合成工控机Ubuntu系统安装分区详解 硬件描述:双核的CPU,128G的固态硬盘 软件描述:使用Ubuntu12.04系统,内核3.8.0-29版本,QT4.8.1版本 1.新建分区表 /de ...

  7. Python操作redis学习系列之(集合)set,redis set详解 (六)

    # -*- coding: utf-8 -*- import redis r = redis.Redis(host=") 1. Sadd 命令将一个或多个成员元素加入到集合中,已经存在于集合 ...

  8. java集合HashMap、HashTable、HashSet详解

    一.Set和Map关系 Set代表集合元素无序,集合元素不可重复的集合,Map代表一种由多个key-value组成的集合,map集合是set集合的扩展只是名称不同,对应如下 二.HashMap的工作原 ...

  9. 2-4、nginx特性及基础概念-nginx web服务配置详解

    Nginx Nginx:engine X 调用了libevent:高性能的网络库 epoll():基于事件驱动event的网络库文件 Nginx的特性: 模块化设计.较好扩展性(不支持模块动态装卸载, ...

随机推荐

  1. Windows的文件权限 研究笔记

    最近公司的一台设备中了病毒,杀了又出现,总是破坏机器上面运行的程序. 想着研究下文件权限,把文件设为只读,让病毒破坏不了即可. 于是开始了实验1: 首先建立一个txt文件,查看权限: 可以看到User ...

  2. Flask-WTF 创建表单P2

    表单安全 无需任何配置,FlaskForm将提供具有CSRF(Cross-site request forgery,也被称为one-click attack 或者session riding,通常缩写 ...

  3. touch.js——常见应用操作

    touch.js--常见应用操作 基本事件: touchstart   //手指刚接触屏幕时触发 touchmove    //手指在屏幕上移动时触发 touchend     //手指从屏幕上移开时 ...

  4. 查找Oracle数据库中的重复记录

    本文介绍了几种快速查找ORACLE数据库中的重复记录的方法. 下面以表table_name为例,介绍三种不同的方法来确定库表中重复的记录 方法1:利用分组函数查找表中的重复行:按照某个字段分组,找出行 ...

  5. sqoop使用的问题

    找不到表 17/05/02 18:15:47 ERROR tool.ImportTool: Imported Failed: There is no column found in the targe ...

  6. UI自动化测试(三)对页面中定位到的元素对象做相应操作

    前两天分别讲述了UI自动化测试基础以及对页面元素该如何进行定位,这一篇自然就是对定位到的页面元素对象进行相应操作啦. 阅读目录 1.常用操作元素对象的方法 2.鼠标事件操作 3.键盘事件操作 4.We ...

  7. Mysql连接报错:1130-host ... is not allowed to connect to this MySql server如何处理

    这个问题是因为在数据库服务器中的mysql数据库中的user的表中没有权限(也可以说没有用户),下面将记录我遇到问题的过程及解决的方法. 在搭建完LNMP环境后用Navicate连接出错 遇到这个问题 ...

  8. GCD hdu2588

    GCD Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...

  9. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  10. php过滤textarea 中的换行符问题

    之前我写的替换代码是这样的 $content = str_replace('\r\n', '', $_POST['content']); 为了确保window和Linux的换行符都能去掉,改成这样的: ...