ES6-11中Set和Map数据结构的原理以及用法

102 阅读3分钟

Set

ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯

一的,集合实现了 iterator 接口,所以可以使用『扩展运算符』和『for…of…』进

行遍历,集合的属性和方法:

        1. size 返回集合的元素个数

        2. add 增加一个新元素,返回当前集合

        3. delete 删除元素,返回 boolean 值

        4. has 检测集合中是否包含某个元素,返回 boolean 值

        5. clear 清空集合,返回 undefined

//创建一个空集合
let s = new Set();

//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

Set 结构的实例有四个遍历方法,可以用于遍历成员。

  • Set.prototype.keys():返回键名的遍历器
  • Set.prototype.values():返回键值的遍历器
  • Set.prototype.entries():返回键值对的遍历器
  • Set.prototype.forEach():使用回调函数遍历每个成员

需要特别指出的是,Set的遍历顺序就是插入顺序。这个特性有时非常有用,比如使用 Set 保存一个回调函数列表,调用时就能保证按照添加顺序调用。

(1)keys()values()entries()

keys方法、values方法、entries方法返回的都是遍历器对象(详见《Iterator 对象》一章)。由于 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"]

省略values方法,直接用for...of循环遍历 Set。

let set = new Set(['red', 'green', 'blue']);

for (let x of set) {
  console.log(x);
}
// red
// green
// blue

(2)forEach()

Set 结构的实例与数组一样,也拥有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 结构的键名就是键值(两者是同一个值),因此第一个参数与第二个参数的值永远都是一样的。另外,forEach方法还可以有第二个参数,表示绑定处理函数内部的this对象。

Map

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”

的范围不限于字符串,各种类型的值(包括对象)都可以当作键。Map 也实现了

iterator 接口,所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属

性和方法:

        1. size 返回 Map 的元素个数

        2. set 增加一个新元素,返回当前 Map

        3. get 返回键名对象的键值

        4. has 检测 Map 中是否包含某个元素,返回 boolean 值

        5. clear 清空集合,返回 undefined

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
['name','刘德华'],
['slogon','刘德华是我喜欢的']
]);

//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 88));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());