1、Set
1.1概念:ES6提供了新的数据结构Set,它类似数组,但是成员的值都是唯一的。
eg:
const s = new Set(); [2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); for (let i of s) { console.log(i); }
上面代码,通过add方法向Set结构假如成员,输出为:2,3,5,4
Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化
// 例一
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
// 例二
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]); items.size // 5
// 例三
function divs () { return [...document.querySelectorAll('div')]; }
const set = new Set(divs()); set.size // 56
// 类似于
divs().forEach(div => set.add(div)); set.size // 56
上面代码,例一和二都是数组作为参数,例三是接受类似数组的对象作为参数。
去除数组重复成员的方法
// 去除数组的重复成员 [...new Set(array)]
向set里加入值的时候,不会发生类型转化,所以5和“5”是两个不同的值,Set内部判断两个值是否不同,使用的算法叫做“Same-value equality” 类似于精确相等运算符(===),而区别是,NaN等于自身,而精确相等运算符认为NaN不等于自身。此外两个对象总是不相等。
1.2Set实例的属性和方法
Set 结构的实例有以下属性。
Set.prototype.constructor:构造函数,默认就是Set函数。
Set.prototype.size:返回Set实例的成员总数。
Set 实例的方法分为两大类:操作方法(用于操作数据)和遍历方法(用于遍历成员)。下面先介绍四个操作方法。
add(value):添加某个值,返回Set结构本身。
delete(value):删除某个值,返回一个布尔值,表示删除是否成功。
has(value):返回一个布尔值,表示该值是否为Set的成员。
clear():清除所有成员,没有返回值。
下面是一个对比,判断是否包括在一个键上面,Object结构和Set结构的写法不同。
对象的写法
const obj = {
'width':1,
'height':1
}if(obj[someName]){
//....
}
Set的写法
const obj = new Set()
obj.add('width');
obj.add('height');
if(obj.has(someName)){//....}
Array.from方法可以将Set结构转为数组
const items = new Set([1,2,3,4,5]);
const array = Array.from(items);
这也就提供了去除数组重复成员的另一种方法。
function dedupe(array){ return Array.from(new Set(array)); } dedupe([1,1,2,3]) //[1,2,3]
1.3遍历操作
Set结构的实例有死歌遍历方法,可以用于遍历成员。
Set的遍历顺序就是插入顺序
.keys():返回键名的遍历器
.values():返回键值的遍历器
.entries():返回键值对的遍历器
.forEach():使用回调函数遍历每个成员
遍历
let set = new Set(['red','green','blue']);
for(let x of set){ console.log(x); }
//red //green //blue
forEach()方法,用于对每个成员执行某种操作,没有返回值
let set = new Set([1, 2, 3]); set.forEach((value, key) => console.log(value * 2) ) // 2 // 4 // 6
遍历的应用
扩展运算符(...)内部使用 for...of循环,所以也可以用于Set结构
let set = new Set(['red', 'green', 'blue']); let arr = [...set]; // ['red', 'green', 'blue']
扩展运算符和 Set 结构相结合,就可以去除数组的重复成员。
let arr = [3, 5, 2, 2, 5, 5]; let unique = [...new Set(arr)]; // [3, 5, 2]
而且数组的map和filter 方法也可以用于Set了
let set = new Set([1, 2, 3]); set = new Set([...set].map(x => x * 2)); // 返回Set结构:{2, 4, 6}
let set = new Set([1, 2, 3, 4, 5]); set = new Set([...set].filter(x => (x % 2) == 0)); // 返回Set结构:{2, 4}
综上Set可以很容易地实现并集(Union)、交集(Intersect)和差集(Difference)。
let a = new Set([1, 2, 3]); let b = new Set([4, 3, 2]);
// 并集 let union = new Set([...a, ...b]); // Set {1, 2, 3, 4}
// 交集 let intersect = new Set([...a].filter(x => b.has(x))); // set {2, 3}
// 差集 let difference = new Set([...a].filter(x => !b.has(x))); // Set {1}
如果像在遍历操作中,同步改变原来的Set结构,目前没有直接的方法,但是有两种变通方法。一种是利用原Set结构映射出一个新的结构,然后赋值给原来的Set结构;另一种是利用Array.from方法。
// 方法一 let set = new Set([1, 2, 3]); set = new Set([...set].map(val => val * 2)); // set的值是2, 4, 6
// 方法二 let set = new Set([1, 2, 3]); set = new Set(Array.from(set, val => val * 2)); // set的值是2, 4, 6
2、WeakSet
2.1概念
WeakSet结构与Set类似,也是不重复的值的集合,但是,它与Set有两个区别。首先,WeakSet的成员只能是对象,而不能是其他类型的值,其次,WeakSet中的对象都是弱引用,即垃圾回收机制不考虑 WeakSet 对该对象的引用
垃圾回收机制依赖引用技术
WeakSet是一个构造函数,可以使用new命令,创建WeakSet数据结构,
const set = new WeakSet()
const a = [[1,2],[3,4]]
const ws = new WeakSet(a)
\这是可行的
const b = [3, 4];
const ws = new WeakSet(b);\报错
3.2
WeakSet 结构有以下三个方法。
WeakSet.prototype.add(value):向 WeakSet 实例添加一个新成员。
WeakSet.prototype.delete(value):清除 WeakSet 实例的指定成员。
WeakSet.prototype.has(value):返回一个布尔值,表示某个值是否在
3.3
WeakSet 没有size属性,没有办法遍历它的成员。因此forEach的方法也用不了。
WeakSet 的一个用处,是储存 DOM 节点,而不用担心这些节点从文档移除时,会引发内存泄漏。
WeakSet 例子:
const foos = new WeakSet()
class Foo{ constructor(){ foos.add(this) } method(){ if(!foos.has(this)){ throw new TypeError('Foo.prototype.method 只能在Foo的实例上调用'); } } }
上面代码保证了Foo的实例方法,只能在Foo的实例上调用。这里使用WeakSet的好处是,foos对实例的引用,不会被记入内存回收机制,所以删除实例的时候,不用考虑foos,也不会出现内存泄露。
3、Map
3.1概念
Object 结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。
3.2方法
map在增加成员的时候,用set 例如:
const m = new Map();
m.set(0,'content');
m.get(0);
m.delete(0)
m.has(0)
map同样接受一个数组作为参数,该数组的成员是一个个表示键值对的数组。
事实上,不仅仅是数组,任何具有Iterator接口的数据结构都可以当做Map构造函数的参数,这就是说,Set和Map都可以用来生成新的Map。
const set = new Set([ ['foo', 1], ['bar', 2] ]); const m1 = new Map(set); m1.get('foo') // 1
上面代码中,我们分别使用 Set 对象和 Map 对象,当作Map构造函数的参数,结果都生成了新的 Map 对象
3.3实例的属性和操作方法
Map结构的实例有一下属性和操作方法
size
set(key,value)
get(key),
has(key)
delete(key)
clear()
3.4遍历方法(Map的遍历顺序就是插入的顺序)
Map结构提供三个遍历起生成函数和一个遍历方法。
keys():返回键名的遍历器。
values():返回键值的遍历器。
entries():返回所有成员的遍历器。
forEach():遍历 Map 的所有成员。
for(let key of map.keys()){ console.log(key); }
for(let [key,value] of map){ console.log(key,value) }
for(let item of map.entries()){ console.log(item[0],item[1]); }
3.5、Map结构转为数组结构,比较快速的方法是使用扩展运算符(...)
const map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]);
[...map.keys()]
[...map.values()]
[...map.entries()]
[...map]
结合数组的map方法、filter方法,可以实现Map的遍历和过滤(Map本身没有map和filter方法)
const map0 = new Map()
.set(1, 'a') .set(2, 'b') .set(3, 'c');
const map1 = new Map( [...map0].filter(([k, v]) => k < 3) );
// 产生 Map 结构 {1 => 'a', 2 => 'b'}
const map2 = new Map( [...map0].map(([k, v]) => [k * 2, '_' + v]) ); // 产生 Map 结构 {2 => '_a', 4 => '_b', 6 => '_c'}
3.6、与其他数据结构的互相转换
3.6.1 Map转为数组
使用扩展运算符,|| Array.form
3.6.2 数组 转为 Map
将数组传入Map构造函数,就可以转为Map
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
3.6.3 Map转为对象
function strMapToObj(strMap) {
let obj = Object.create(null);
for (let [k,v] of strMap) { obj[k] = v; } return obj; }
const myMap = new Map() .set('yes', true) .set('no', false); strMapToObj(myMap)
3.6.4 对象转为Map
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
objToStrMap({yes: true, no: false})
3.6.5 Map转为JSON
Map 转为 JSON 要区分两种情况。一种情况是,Map 的键名都是字符串,这时可以选择转为对象 JSON。
function strMapToJson(strMap) {
return JSON.stringify(strMapToObj(strMap));
}
let myMap = new Map().set('yes', true).set('no', false);
strMapToJson(myMap)
// '{"yes":true,"no":false}'
另一种情况是,Map 的键名有非字符串,这时可以选择转为数组 JSON。·
function mapToArrayJson(map) {
return JSON.stringify([...map]);
}
let myMap = new Map().set(true, 7).set({foo: 3}, ['abc']);
mapToArrayJson(myMap)
// '[[true,7],[{"foo":3},["abc"]]]'
3.6.5 JSON转为Map
JSON 转为 Map,正常情况下,所有键名都是字符串。
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
但是,有一种特殊情况,整个 JSON 就是一个数组,且每个数组成员本身,又是一个有两个成员的数组。这时,它可以一一对应地转为Map。这往往是数组转为 JSON 的逆操作。
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
4 WeakMap
4.1概念
WeakMap结构与Map结构类似,也是用于生成键值对的。
4.2区别
首先,WeakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名
其次,WeakMap的键名所指向的对象,不计入垃圾回收机制
4.3 WeakMap语法
WeakMap 与 Map 在 API 上的区别主要是两个,一是没有遍历操作(即没有key()、values()和entries()方法),也没有size属性。因为没有办法列出所有键名,这个键名是否存在完全不可预测,跟垃圾回收机制是否运行相关。二是无法清空,即不支持clear方法。因此,WeakMap只有四个方法可用:get()、set()、has()、delete()。
以上所有的知识点和例子,均来自于阮一峰老师的书籍[ECMAScript 6 入门]