ES6学习之set和map数据结构

Set

基本用法

  ES6提供了新的数据结构Set。它相似数组，可是成员都是惟一的，不容许重复。其自己是一个构造函数，用来生成Set数据结构。

const set = new Set([1, 2, 3, 4, 4]);
const sets = new Set(document.querySelectorAll('div'));

复制代码

  Set函数能够接受一个数组或者具备iterable接口的其余数据结构做为参数，用来初始化。

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
复制代码

  上面代码也展现了一种去除数组重复成员的方法。

[...new Set('ababbc')].join('')
复制代码

  上面的方法也适用于字符串去除重复的字符。==也可扩展为字符串去除空格的方法==

[...new Set(' a ba bb c')].join('').substr(1)
复制代码

  向Set加入值的时候，不会发生类型转换。因此，5和'5'是两个不相同的值。==另外，两个对象老是不相等的。==

Set实例的属性和方法

Set实例有如下属性：

• Set.prototype.constructor：构造函数，默认就是Set函数。
• Set.prototype.size：返回Set实例的成员总数。

Set实例的方法分为两大类：操做方法（操做数据）和遍历方法（遍历成员）。

操做方法：

• add(value)：添加参数，返回添加以后的数据；
• delete(value)：删除参数，返回是否删除成功的布尔值；
• has(value)：返回判断是否包含该成员的布尔值；
• clear(value)：清除全部参数，没有返回值；

遍历方法

  在阮一峰老师的《ECMAScript 6 入门》中提到了keys()、values()、entries()、forEach()四种方法。我的在工做中用到的并很少，更多的用到了for...of 遍历方法。

  以扩展运算符做为中间桥梁，数组的map方法和filter方法也能够间接的用于Set。

const divS = new Set(document.querySelectorAll('.explain-item'));
let sets = [...divS].map(x => x.innerHTML = x.innerHTML + 'map拼接参数');
复制代码

  使用map方法快速的遍历页面中的DOM元素，并修改其值。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
复制代码

  使用Set配合filter方法和扩展运算符能够很容易的实现并集、交集和差集。

Map

  Map是一组键值对的结构，具备相对快的查找速度。其相似于对象，可是'键'的范围不限于字符串，各类类型的值均可以均可以当作键。初始化Map须要一个二维数组或者直接初始化一个空Map。

const $map = new Map();

const $num = 1;
const $str = '1';
const $arr = [1, 2, 3, 4];
const $null = null;
const $undefined = undefined;
const $obj = {a: 1, b: 2}

$map.set($num, 10)
    .set($str, '10')
    .set($arr, [4, 3, 2, 1])
    .set($null, null)
    .set($undefined, undefined)
    .set($obj, {c: 3, d: 4});

复制代码

  上面代码展现了Map不只能够用基础数据类型当作键，甚至能够将数据和对象当作键。上面代码使用set方法向Map添加数据。map总共有下面几种操做数据的方法。

• set(key, value)：采用键值对的形式向map添加数据，若是已经有该key值，则更新；不然会添加。返回当前的Map对象，所以能够采用链式写法；
• get(key)：读取对应key的键值，若是没有则会返回undefined；
• delete(key)：删除对应key的键值，返回是否成功的布尔值；
• has(key)：返回是否包含某个key的布尔值；
• clear()：用于清除全部成员，没有返回值。
• size属性：返回map数据的成员总数。(布尔值)

遍历

  我的感受遍历map比较合适的方法是for...of，既能遍历key，又能遍历value。

for (let key of $map.keys()) {
  console.log(key);
}

for (let value of $map.values()) {
  console.log(value);
}

for (let [key, value] of $map) {
  console.log(key, value);
}
复制代码

  扩展运算符[...]能够很方便将map转换为数组，结合数组的map方法和filter方法，能够实现Map自己的遍历和过滤。（Map自己没有map和filter方法）。

[...$map.keys()]

[...$map.values()]

[...$map]
复制代码