【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标准入门（第2版）》

征途黯然.

发布了57 篇原创文章 · 获赞 43 · 访问量 1万+

私信关注