【ES6】JS的Set和Map数据结构
- 一、Set
- 1、基本用法
- 2、4种操作方法
- 3、4种遍历方法
- 4、Set的应用
- 1）Set转化为数组
- 2）去除数组的重复元素
- 3）实现并集(Union)、交集(Intersect)、差集(Difference)
- 二、Map
- 1、基本用法
- 2、操作方法
- 3、4种遍历方法
- 查看更多ES6教学文章：
- 参考文献
引言：Java、C++早就有了Map、泛型等概念。ES6正式归纳了Set和Map数据结构。 |
一、Set
1、基本用法
ES6提供了新的数据结构Set。 它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数， 用来生成Set数据结构。
var S = new Set();
[2,3,5,4,5,2,2].map(x => s. add(x))
for (i of s) {console.log(i)}
//2 3 5 4
上面的代码通过add方法向Set 结构加入成员，结果表明Set结构不会添加重复的值。
Set函数可以接受一个数组(或类似数组的对象)作为参数，用于初始化。
var set = new Set([1, 2, 3, 4, 4])
[...set]
//[1,2,3,4]</code>
var items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5
function divs () {
return [...document. querySelectorAll('div')]
}
var set = new Set(divs())
set.size // 56
//类似于
divs(). forEach(div => set.add(div))
set.size // 56
向Set加入值时不会发生类型转换，所以5和"5"是两个不同的值。
2、4种操作方法
-
add(value):添加某个值，返回Set结构本身。 -
delete(value):删除某个值，返回一个布尔值，表示删除是否成功。 -
has(value):返回一个布尔值，表示参数是否为Set的成员。 -
clear():清除所有成员，没有返回值。
3、4种遍历方法
Set结构的实例有4个遍历方法，可用于遍历成员。
-
keys():返回一个键名的遍历器。 -
values():返回一个键值的遍历器。 -
entries():返回一个键值对的遍历器。 -
forEach(): 使用回调函数遍历每个成员。
【注：】由于Set结构没有键名，只有键值(或者说键名和键值是同一个值)，所以keys方法和values方法的行为完全一致。
4、Set的应用
1）Set转化为数组
由于扩展运算符( … )内部使用for…of循环，所以也可以用于Set结构。代码如下。
let set = new Set(['red', 'green', 'blue']);
let arr = [...set];
// ['red', 'green', 'blue']
2）去除数组的重复元素
方法一： 如下代码。
let arr=[3,5,2,2,5,5];
let unique = [...new Set(arr)];
//[3,5,2];
方法二： 如下代码。
let arr=new Set([3,5,2,2,5,5]);
let unique = Array.from(arr);
//[3,5,2];
3）实现并集(Union)、交集(Intersect)、差集(Difference)
let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);
//并集
let union = new Set([...a, ...b]);
//[1, 2, 3, 4]
//交集
let intersect = new Set([...a].filter(x => b.has(x)));
//[2,3]
//差集
let difference = new Set([..a].filter(x => !b.has(x)));
//[1]
二、Map
1、基本用法
JavaScript的对象(Object)本质上是键值对的集合(Hash结构)，但是只能用字符串作为键。这给它的使用带来了很大的限制。
var data = {};
var element = document.getElementById("myDiv");
data[element] = metadata;
data["[object HTMLDivElement]"] // metadata 上面的代码原意是将一个DOM节点作为对象data的键，但是由于对象只接受字符串作为键名，所以element被自动转为字符串[0bject HTMLDivElement]。
为了解决这个问题，ES6 提供了Map数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值( 包括对象)都可以当作键。也就是说，Object 结构提供了“字符串一值”的对应，Map结构提供了“值一值"的对应，是-种更完善的Hash结构实现。
如果你需要“键值对”的数据结构，Map比Object更合适。
var m= new Map();
var o ={p: "Hello World"};
m.set(o, "content")
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false
2、操作方法
size属性
size属性返回Map结构的成员总数。
let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size //2
set(key, value)
set方法设置key所对应的键值，然后返回整个Map结构。如果key已经有值，则键值会被更新，否则就新生成该键。
var 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' );
get(key)
get方法读取key对应的键值，如果找不到key,则返回undefined。
var m = new Map();
var hello = function() {console.log("hello");}
m.set(hello, "Hello ES6!") //键是函数
m.get(hello) // Hello ES6!
has(key)
has方法返回一个布尔值，表示某个键是否在Map数据结构中。
var 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
delete(key)
delete方法删除某个键，返回true。如果删除失败，则返回false。
var m = new Map();
m.set(undefined, "nah");
m.has(undefined)// true
m.delete(undefined)
m.has(undefined)// false
clear()
clear方法清除所有成员，没有返回值。
let map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2
map.clear()
map.size // 0
3、4种遍历方法
Map原生提供3个遍历器生成函数和1个遍历方法。
keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。
forEach():遍历Map的所有成员。
查看更多ES6教学文章：
1. 【ES6】let与const 详解2. 【ES6】变量的解构赋值
3. 【ES6】字符串的拓展
4. 【ES6】正则表达式的拓展
5. 【ES6】数值的拓展
6. 【ES6】数组的拓展
7. 【ES6】函数的拓展
8. 【ES6】对象的拓展
9. 【ES6】JS第7种数据类型：Symbol
10. 【ES6】Proxy对象
11. 【ES6】JS的Set和Map数据结构
12. 【ES6】Generator函数详解
13. 【ES6】Promise对象详解
14. 【ES6】异步操作和async函数
15. 【ES6】JS类的用法class
16. 【ES6】Module模块详解
17. 【ES6】ES6编程规范 编程风格
参考文献
阮一峰 《ES6标准入门（第2版）》