引言: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教学文章:
参考文献
阮一峰 《ES6标准入门(第2版)》