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. BootStrap基礎知識

    BootStrap基礎知識 1. .lead //突出 .text-left //文字居左 .text-right //文字居右 .text-center //文字居中 .text-justify / ...

  2. JQuery中关于浏览器兼容性的问题

      前  言 LIUWE JQuery是一个特别强大的javascript代码库,,它的操作DOM的能力是相当强大的,JQuery可以说是支持各大主流浏览器,但是随着时代的不断发展,浏览器是在不断的更 ...

  3. JS(二)

    上周给大家介绍了一下JS基础中一点东西,今天给大家介绍一下JS基础中一个重要部分,循环和函数. 04-JS中的循环结构 一.[循环结构的步骤] 1.首先要先声明循环变量. 2.判断循环条件 3.执行循 ...

  4. idea启动tomcat报错:Error during artifact deployment. See server log for details.

    出现这种情况的原因老夫猜想是改变了artifact然而tomcat的配置中的artifact没有重新配就会出现这种报错 打开tomcat配置 删除原来的artifact 新添加artifact 保存 ...

  5. 数据的分类-JavaScript数据类型

    JavaScript数据类型 1.数据类型是什么? 我们接触的绝大多数程序语言来说,把数据都进行了分类,包括数字.字符.逻辑真假:int,long,string,boolean....等等:我们都知道 ...

  6. C# XML序列化

    /// <summary> /// XML序列化为指定对象 /// Author:taiyonghai /// Time:2016-08-22 /// </summary> / ...

  7. plsql中文乱码问题方案解决

    1.查看服务器端编码 a.select   userenv('language')  from  dual; b.我实际查到的结果为:AMERICAN_AMERICA.ZHS16GBK 2.执行语句 ...

  8. 多线程(RunLoop)

    1.RunLoop的概念及作用 2.RunLoop的使用 3.RunLoop的相关类 4.RunLoop的工作原理 5.小结 6.思考 什么是RunLoop? 从字面意思上是一直循环跑,事实上就是一个 ...

  9. 【特效】hover向上翻转效果

    前段时间做了很多有关css3动画的项目.虽然当时都较圆满的完成了,但事后还是要总结一下的,趁着近期工作不忙,系统的学习了一些动画理论,重点看了transform3D变换,学习了translate平移. ...

  10. 每天十分钟系列:JS数据操作之神奇的map()

    Array.prototype.map() map()方法可以创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果. demo1 上面的例子,在控制台中打印的结果是: 1 2 3 ...