es6 学习7 Set 和 Map 数据结构
Set 和 Map 数据结构
一、Set
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
这就提供了新的数组去重方法
function dedupe(array) {
return Array.from(new Set(array));
} dedupe([1, 1, 2, 3]) //[1, 2, 3]
1、 Set实例的属性和方法
1)属性:
- Set.prototype.constructor:构造函数,默认就是Set函数
- Set.prototype.size:返回Set实例的成员总数。
2)方法:
操作方法:
- add(value):添加某个值,返回 Set 结构本身。
- delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
- has(value):返回一个布尔值,表示该值是否为Set的成员。
- clear():清除所有成员,没有返回值
s.add(1).add(2).add(2).add(4); // {1, 2, 4}
// 注意2被加入了两次 s.size // s.has(1) // true
s.has(2) // true
s.has(3) // false
s.has(4) // true s.delete(2);
s.has(2) // false
s.clear()
s.has(1) //false
下面是一个对比,看看在判断是否包括一个键上面,Object
结构和Set
结构的写法不同。
// 对象的写法
const properties = {
'width': 1,
'height': 1
}; if (properties[someName]) {
// do something
} // Set的写法
const properties = new Set(); properties.add('width');
properties.add('height'); if (properties.has(someName)) {
// do something
}
遍历方法:
- keys():返回键名的遍历器
- values():返回键值的遍历器
- entries():返回键值对的遍历器
- forEach():使用回调函数遍历每个成员
(1)keys(),values(),entries()
keys方法、values方法、entries方法返回的都是遍历器对象。由于 Set 结构没有键名,只有键值(或者说键名和键值是同一个值),所以keys方法和values方法的行为完全一致。
let set = new Set(['red', 'green', 'blue']); for (let item of set.keys()) {
console.log(item);
}
// red
// green
// blue for (let item of set.values()) {
console.log(item);
}
// red
// green
// blue for (let item of set.entries()) {
console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
(2)forEach()
let set = new Set([1, 4, 9]);
set.forEach((value, key) => console.log(key + ' : ' + value))
// 1 : 1
// 4 : 4
// 9 : 9
上面代码说明,forEach
方法的参数就是一个处理函数。该函数的参数与数组的forEach
一致,依次为键值、键名、集合本身(上例省略了该参数)。这里需要注意,Set 结构的键名就是键值(两者是同一个值),因此第一个参数与第二个参数的值永远都是一样的。
(3)遍历的应用
数组的map和filter方法也可以间接用于 Set 了。
let set = new Set([1, 2, 3]);
set = new Set([...set].map(x => x * 2));
// 返回Set结构:{2, 4, 6} let set = new Set([1, 2, 3, 4, 5]);
set = new Set([...set].filter(x => (x % 2) == 0));
// 返回Set结构:{2, 4}
因此使用 Set 可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]); // 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4} // 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3} // 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
二、Map
JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。为了解决这个问题,ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
1、实例的属性和操作方法
1)属性:
size 属性:size
属性返回 Map 结构的成员总数。
const map = new Map();
map.set('foo', true);
map.set('bar', false); map.size //
2)方法:
(1)set(key, value)
set
方法设置键名key
对应的键值为value
,然后返回整个 Map 结构。如果key
已经有值,则键值会被更新,否则就新生成该键
const m = new Map(); m.set('edition', 6) // 键是字符串
m.set(262, 'standard') // 键是数值
m.set(undefined, 'nah') // 键是 undefined
set
方法返回的是当前的Map
对象,因此可以采用链式写法。
let map = new Map()
.set(1, 'a')
.set(2, 'b')
.set(3, 'c');
(2) get(key)
get
方法读取key
对应的键值,如果找不到key
,返回undefined
。
const m = new Map(); const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数 m.get(hello) // Hello ES6!
(3)has(key)
has
方法返回一个布尔值,表示某个键是否在当前 Map 对象之中。
const m = new Map(); m.set('edition', 6);
m.set(262, 'standard');
m.set(undefined, 'nah'); m.has('edition') // true
m.has('years') // false
m.has(262) // true
m.has(undefined) // true
(4)delete(key)
delete
方法删除某个键,返回true
。如果删除失败,返回false
。
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true m.delete(undefined)
m.has(undefined) // false
(5)clear()
clear
方法清除所有成员,没有返回值。
let map = new Map();
map.set('foo', true);
map.set('bar', false); map.size //
map.clear()
map.size //
3)遍历方法
- keys():返回键名的遍历器。
- values():返回键值的遍历器。
- entries():返回所有成员的遍历器。
- forEach():遍历
Map 的所有成员
需要特别注意的是,Map 的遍历顺序就是插入顺序。
const map = new Map([
['F', 'no'],
['T', 'yes'],
]); for (let key of map.keys()) {
console.log(key);
}
// "F"
// "T" for (let value of map.values()) {
console.log(value);
}
// "no"
// "yes" for (let item of map.entries()) {
console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes" // 或者
for (let [key, value] of map.entries()) {
console.log(key, value);
}
// "F" "no"
// "T" "yes" // 等同于使用map.entries()
for (let [key, value] of map) {
console.log(key, value);
}
// "F" "no"
// "T" "yes"
上面代码最后的那个例子,表示 Map 结构的默认遍历器接口(Symbol.iterator
属性),就是entries
方法。
map[Symbol.iterator] === map.entries
// true
Map 结构转为数组结构,比较快速的方法是使用扩展运算符(...
)。
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]); [...map.keys()]
// [1, 2, 3] [...map.values()]
// ['one', 'two', 'three'] [...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']] [...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
此外,Map 还有一个forEach
方法,与数组的forEach
方法类似,也可以实现遍历。
map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});
forEach
方法还可以接受第二个参数,用来绑定this
。
const reporter = {
report: function(key, value) {
console.log("Key: %s, Value: %s", key, value);
}
}; map.forEach(function(value, key, map) {
this.report(key, value);
}, reporter); //this
指向reporter
2、与其他数据结构的互相转换
1)Map 转 数组
const myMap = new Map()
.set(true, 7)
.set({foo: 3}, ['abc']); // 第一种比较方便的
[...myMap] // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
// 第二种
Array.from(myMap) // [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]
2)数组 转为 Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
3)Map 转为对象
如果所有 Map 的键都是字符串,它可以无损地转为对象;如果有非字符串的键名,那么这个键名会被转成字符串,再作为对象的键名。
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) {
obj[k] = v;
}
return obj;
} const myMap = new Map()
.set('yes', true)
.set('no', false);
strMapToObj(myMap)
// { yes: true, no: false }
4)对象转为 Map
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
} objToStrMap({yes: true, no: false})
// Map {"yes" => true, "no" => false}
5)Map 转为 JSON
Map 转为 JSON 要区分两种情况。
(1)Map 的键名都是字符串,这时可以选择转为对象 JSON。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
} let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'
(2)Map 的键名有非字符串,这时可以选择转为数组 JSON。(推荐)
function mapToArrayJson(map) {
return JSON.stringify([...map]);
} let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'
6)JSON 转为 Map
(1)所有键名都是字符串
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
} jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
(2)整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。(推荐)
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
} jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
es6 学习7 Set 和 Map 数据结构的更多相关文章
- es6学习笔记-set和map数据结构
ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. const s = new Set(); [2, 3 ...
- JavaScript(ES6)学习笔记-Set和Map数据结构(一)
一.Set 1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. , , , , ']); s; // ...
- ES6中的Set与Map数据结构
本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一 ...
- ES6中的Set、Map数据结构
Map.Set都是ES6新的数据结构,他们都是新的内置构造函数.也就是说typeof的结果,多了两个. 他们是什么: Set是不能重复的数组. Map是可以任何东西当做键的对象: ES6 提供 ...
- js-ES6学习笔记-Set和Map数据结构
1.ES6 提供了新的数据结构 Set.它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构. 2.Set 函数可以接受一个数组(或类似数组的对 ...
- es6笔记(5)Map数据结构
概要 字典是用来存储不重复key的Hash结构.不同于集合(Set)的一点,字典使用的是[key,value]的形式来存储数据. JavaScript的对象(Object:{})只能用字符串当做key ...
- es6(三set和map数据结构)
es6中提供了一个新的数据结构Set,他有点类似数组,但和数组不同的是,在里面你如果写入重复的值的话,他不会显示重复值. const s =new Set(); [2,3,4,5,6,6,6,7,8, ...
- ES6学习之Set和Map
一.Set 1.Set 定义:Set类似于数组,但成员的值都是唯一的,没有重复的值 let s = new Set([1,2,3,4,5,2,4]); //Set { 1, 2, 3, 4, 5 } ...
- ES6学习笔记(10)----Set和Map数据结构
参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ Set和Map数据结构 1.Set 基本用法 Set是一种新的数据结构,它的成员都是唯一 ...
随机推荐
- 深入剖析 iOS 性能优化
问题种类 时间复杂度 在集合里数据量小的情况下时间复杂度对于性能的影响看起来微乎其微.但如果某个开发的功能是一个公共功能,无法预料调用者传入数据的量时,这个复杂度的优化显得非常重要了.上图列出了各种情 ...
- CDR入门教程-CorelDRAW排版教程
CorelDRAW是一个绘制矢量图,排版的软件.今天给大家带来一片教程就是关于排版的.大家快来试试吧. CDR下载:http://pan.baidu.com/s/1cD4buQ 步骤一:新建一个A4文 ...
- java 公开内部类无法实例化 no enclosing instance 解决办法
因为B类不是A类的静态内部类,所以B累也只能像A类的成员一样通过new A()的实例访问,new(new A()).B(),这显然不是我们想要的方式,于是需要在B类的前边加上static,变成下边这样 ...
- [USACO 2009 Feb Gold] Fair Shuttle (贪心+优先队列)
题目大意:有N个站点的轻轨站,有一个容量为C的列车起点在1号站点,终点在N号站点,有K组牛群,每组数量为Mi(1≤Mi≤N),行程起点和终点分别为Si和Ei(1≤Si<Ei≤N).计算最多有多少 ...
- linux下为firfox安装flash player
1.去官网下载×.tar.gz包,如:flash_player_npapi_linux.x86_64.tar.gz 2.解压 tar -zxvf flash_player_npapi_linux.x8 ...
- (转)C++引用
前言:引用是C++一个很重要的特性,最近看了很多有关引用的资料和博客,故在此对引用的相关知识进行总结 一.什么是引用 引用,顾名思义是某一个变量或对象的别名,对引用的操作与对其所绑定的变量或对象的操作 ...
- springmvc 异常Interceptor
无论做什么项目,进行异常处理都是非常有必要的,而且你不能把一些只有程序员才能看懂的错误代码抛给用户去看,所以这时候进行统一的异常处理,展现一个比较友好的错误页面就显得很有必要了. springMVC提 ...
- HDU 2512
水题 #include <iostream> #include <cstdio> #include <algorithm> #define LL __int64 # ...
- magento megatron主题加入中文
magento的megatron默认不支持中文,全部我们须要在它的本地化目录中加入中文的cvs文件,加入方法例如以下: 1.切换至 app ▸ design ▸ frontend ▸ megatron ...
- Unsupported major.minor version 51.0问题的解决
在java编程的过程中,当用myeclipse软件打开别人写的代码时,遇到Unsupported major.minor version 51.0此类问题,实在是令人痛苦不堪.弄了整整一晚才搞清楚,我 ...