ES6 - Note6:Set与Map
Set和Map是ES6中新增的数据结构,Set是集合,无序唯一,Map类似于对象,也是"key-value"形式,但是key不局限于字符串。
1.Set的用法
Set是构造函数,可以使用new初始化一个Set实例,如下所示
var set = new Set();
set.add(2);
set.add(2);
set.add(3);
set.add('hello');
console.log(set,set.size);
//也可以使用数组或类数组作为参数进行初始化
var s1 = new Set([2,3,4,2,3,10]);
console.log(s1,s1.size);
Set [ 2, 3, "hello" ] 3
Set [ 2, 3, 4, 10 ] 4
Set集合具有唯一性,因此不管是向Set中添加重复的元素还是使用数组作为参数,都会自动剔除重复的元素(内部使用的是等值算法),包括NaN,(+0,-0)。因此数组去重的功能可以借助这个特性来做,如下所示
var arr_unique = arr => [...new Set(arr)];//这里使用Array.from方法一样,Array.from(new Set(arr))
console.log(arr_unique([3,3,4,5,6,6,NaN,NaN,+0,-0]));
Array [ 3, 4, 5, 6, NaN, 0 ]
但是两个对象总是不相等,因此它们的内存地址不同。
Set的实例方法和属性
属性有size,constructor,size记录Set实例的元素总数,constructor指向Set构造函数,即Set函数,如下所示
var s = new Set([1,2,3]);
console.log(s.size);
console.log(Object.is(s.constructor,Set));
3
true
方法可以分为两类:操作方法和遍历方法。操作方法有add,delete,has,clear,用法如下所示
var s2 = new Set();
s2.add(1);//add添加元素
s2.add(2);
s2.add('hello');
console.log(s2.size);
s2.delete(2);//delete删除指定元素
console.log(s2.size,s2);
console.log(s2.has(2));//has判断指定元素是否存在
s2.clear();//clear清空所有元素
console.log(s2.size,s2);
3
2 Set [ 1, "hello" ]
false
0 Set [ ]
遍历方法有keys,values,entries,forEach,用法如下所示
var s3 = new Set([2,'hello']);
var keys = s3.keys(),
values = s3.values(),
entries = s3.entries();
//由于Set没有键名,只有键值,故keys和values是一样的效果
for(let x of keys){
console.log(x);
}
for(let x of values){
console.log(x);
}
for(let x of entries){
console.log(x);
}
//Set的默认迭代器就是values,因此可以对Set直接使用for..of遍历
console.log(s3[Symbol.iterator] === s3.values);
for(let x of s3){
console.log(x);
}
2
hello
2
hello
Array [ 2, 2 ]
Array [ "hello", "hello" ]
true
2
hello
2.WeakSet
WeakSet与Set类似,只不过前者只存放对象,且是弱引用。WeakSet实例不可遍历,没有size属性。用法如下
var ws = new WeakSet();
var obj = {};
var foo = {}; ws.add(window);
ws.add(obj); console.log(ws.has(window));
console.log(ws.has(obj)); ws.delete(window);
console.log(ws.has(window)); true
true
false
3.Map
Map类似Object,也是"key-value"的集合,但是Map的键值不限于字符串,如下所示
var map = new Map();
var obj = {};
map.set(obj,"hello");
console.log(map.get(obj));
hello
Map也接收一个数组作为参数,数组的成员将变成Map的成员,数组的元素必须是类似key-valye的形式,如下所示
var arr1 = [2,3,4];
var m1 = new Map(arr1);
TypeError: iterable for Map should have array-like objects
//arr1数组的元素不是key-value形式的,故报错
var arr2 = [['name','xiaoming'],['age',20]];
var m2 = new Map(arr2);
console.log(m2.size);
console.log(m2.get("name"),m2.get("age"));
2
xiaoming 20
对同一个键值进行多次的赋值,较后的赋值会覆盖以前的值,且读取一个不存在的键,会返回undefined,如下所示
var arr2 = [['name','xiaoming'],['age',20]];
var m2 = new Map(arr2);
console.log(m2.size);
console.log(m2.get("name"),m2.get("age"));
m2.set('name','zhangsan');
console.log(m2.get('name'));
console.log(m2.get('dsdsdsds'));
2
xiaoming 20
zhangsan
undefined
如果键值不是基本数据类型,而是引用类型的话,对同一对象的引用才会被认为是同一键值(NaN与NaN,+0与-0被视为相同的键),如下所示
var myMap = new Map();
var o = {};
myMap.set(o,"hello");
console.log(myMap.get(o));
myMap.set({x:1},"world");
console.log(myMap.get({x:1}));
myMap.set(NaN,"NaN");
myMap.get(NaN); hello
undefined
"NaN"
Map实例的属性和方法
属性有size,constructor:size记录Map键值对数量,constructor指向Map
方法也分为两大类:操作方法和遍历方法,操作方法有set,get,has,delete,clear等,用法如下所示
var m = new Map();
m.set('name','lisi');
m.set('age',20);
console.log(m.get('name'));
console.log(m.has('name'));
m.delete('name');
console.log(m.has('name'));
m.clear();
console.log(m.has('age'));
lisi
true
false
false
遍历方法有keys,values,entries,forEach等,用法如下所示
var m = new Map();
m.set('name','lisi');
m.set('age',20);
for(let key of m.keys()){
console.log(key);
}
for(let value of m.values()){
console.log(value);
}
for(let [key,value] of m.entries()){
console.log(key+':'+value);
}
console.log(Map.prototype[Symbol.iterator] === Map.prototype.entries);//Map的默认遍历器是entries
for(let [key,value] of m){
console.log(key+':'+value);
}
m.forEach( (value,key) => console.log(key+':'+value));
name
age
lisi
20
name:lisi
age:20
true
name:lisi
age:20
name:lisi
age:20
利用扩展运算符可以快速将Map转换成数组,因此可以利用数组的特性为Map实例添加一些方法,如map,filter等,如下所示
var m = new Map();
m.set('name','lisi');
m.set('age',20);
Map.prototype.filter = function(operatefun){
return new Map([...this].filter(operatefun));
};
console.log(m.filter(([key,value])=>key!='age')); Map.prototype.map = function(operatefun){
return new Map([...this].map(operatefun));
};
console.log(m.map(([key,value]) =>[key+'_new',value+'_new']));
Map { name: "lisi" }
Map { name_new: "lisi_new", age_new: "20_new" }
4.WeakMap
WeakMap类似于Map,但是只能使用对象作为键值名,其用法如下所示
var weakMap = new WeakMap();
var obj = {x:1};
weakMap.set('name','xiaoming');
TypeError: "name" is not a non-null object
------------------------------------------------------
var weakMap = new WeakMap();
var obj = {x:1};
weakMap.set(obj,'hello');
weakMap.get(obj);
"hello"
WeakMap的更多用法这里就不赘述了,感兴趣的同学可以自行查看相关文档。
ES6 - Note6:Set与Map的更多相关文章
- 前端笔记之React(六)ES6的Set和Map&immutable和Ramda和lodash&redux-thunk
一.ES6的Set.Map数据结构 Map.Set都是ES6新的数据结构,都是新的内置构造函数,也就是说typeof的结果,多了两个: Set 是不能重复的数组 Map 是可以任何东西当做键的对象 E ...
- es6之set和map
1.set ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值,set本身就是构造函数,所以可以通过new的方式来创建对象 // 例一 可以做数组去重用 var set ...
- 深入理解ES6之—set与map
Set是无重复值的有序列表.Set会自动移除重复的值,因此你可以使用它来过滤数组中重复的值并返回结果. Map是有序的键值对,其中的键允许是任何类型. Set和Map是es6新增的两个数据集合. Se ...
- ES6新增的数据类型Map和Set。
Javascript的默认对象表示方式 {} ,即一组键值对. 但是Javascript的对象有个小问题,就是键必须是字符串.但实际上Number或者其他数据类型作为键也是非常合理的. 为了解决这个问 ...
- ES6中Set 和 Map用法
JS中Set与Map用法 一.Set 1.基本用法 ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. ...
- es6入门set和map
ES6提供了新的数据结构Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. var set = new Set([1, ...
- ES6,新增数据结构Map的用法
Javascript的Object本身就是键值对的数据结构,但实际上属性和值构成的是”字符串-值“对,属性只能是字符串,如果传个对象字面量作为属性名,那么会默认把对象转换成字符串,结果这个属性名就变成 ...
- ES6学习笔记之map、set与数组、对象的对比
ES6 ES5中的数据结构,主要是用Array和Object.在ES6中主要新增了Set和Map数据结构.到目前为止,常用的数据结构有四种Array.Object.Set.Map.下面话不多说了,来一 ...
- ES6系列_12之map数据结构
1.map数据结构出现的原因? JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键.这给它的使用带来了很大的限制.为了能实现将对象作为键 ...
随机推荐
- bug: 在缓存行高时,总是记录错误.
一,现象: 1.在 cell 中添加了一个 label, 并对 label 设置了 attributeText, 结果滑动的过程中,cell 的高度总是不对,多次出现下一个 cell 覆盖上一个 ce ...
- STM32_RTC君
五一假期已过,大家是否还像五一五二五三那样快乐呢??答案就交给你们自己寻找了哈..说到五一..就从五一开始的那一刻起..就开始计时着..到五一假期结束..呵呵..在这里,智商和情商比我高的人估计又猜到 ...
- centos7 apache提供文件下载
1 apache安装 # yum -yinstall httpd //安装httpd会自动安装以下的依赖包: apr apr-util httpd-tools mailcap # rpm -qi ht ...
- BCD码和十六进制,十进制转换
参考文档: http://wenku.baidu.com/link?url=CfK2Wl7sCEmpzEabnbHSbcwf2t4yoSH6_n8sUIRw54piWaRB7hZ6RkaStWEkbC ...
- HDU2433 BFS最短路
Travel Time Limit: 10000/2000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Sub ...
- phpexcel读取excel的xls xlsx csv格式
我之前写过一篇PHP读取csv文件的内容 上代码index.php <?php /** * * @author XC * */ class Excel { public $currentShee ...
- Java的书写格式,标识符及命名规则,注释
Java的书写格式,标识符及命名规则,注释 1.Java语言的书写格式(约定成俗) 1) 大括号要对齐(左大括号与句尾对其,后面大括号与句头对齐),并且成对写 2) 左大括号前面有空格 3) 遇到左大 ...
- 【转】ubuntu下最好用的输入法fcitx-sunpinyin
http://www.freetstar.com/index.php/ubuntu-most-use-friendly-fcitx-sunpinyin 今天难得折腾一会儿输入法,对于系统美化方面的 ...
- Android图片资源
title: 2016-5-5未命名文件 tags: UI适配,图片资源 grammar_cjkRuby: true --- 概述: 本文整理了Android开发中,图片资源的提供方式和使用方式.包括 ...
- ASP.NET MVC 多语言方案
前言: 好多年没写文章了,工作很忙,天天加班, 每天都相信不用多久,就会升职加薪,当上总经理,出任CEO,迎娶白富美,走上人生巅峰,想想还有点小激动~~~~ 直到后来发生了邮箱事件,我竟然忘了给邮箱密 ...