图片来自简书
Set
先来看下Set的知识结构图
图片来自简书
下面主要讲解下set的基本用法和遍历相关的知识点
Set基本用法
Set 本身是一个构造函数，用来生成 Set 数据结构。new Set()初始化
const set = new Set([1, 2, 3, 4, 4]);
[...set]
// [1, 2, 3, 4]
Set 实例的方法
- add(value)：添加某个值，返回Set结构本身。
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- has(value)：返回一个布尔值，表示该值是否为Set的成员。
- clear()：清除所有成员，没有返回值。
s.add(1).add(2).add(2);
// 注意2被加入了两次
s.size // 2
s.has(1) // true
s.has(3) // false
s.delete(2);
s.has(2) // false
去除数组重复成员的方法总结
- Set 函数初始化
[...new Set(array)] - Array.from方法可以将 Set 结构转为数组。
const items = new Set([1, 2, 3, 4, 5]); const array = Array.from(items);
Set遍历及其应用
- 四个遍历方法
- keys()：返回键名的遍历器
- values()：返回键值的遍历器
- entries()：返回键值对的遍历器
- forEach()：使用回调函数遍历每个成员
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"]
// forEach()
let set = new Set([1, 2, 3]);
set.forEach((value, key) => console.log(value * 2) )
还可以用for...of循环遍历 Set。
let set = new Set(['red', 'green', 'blue']);
for (let x of set) {
console.log(x);
}
// red
// green
// blue
- 遍历的应用
结合扩展运算符一起使用，去除数组的重复成员
let set = new Set(['red', 'green', 'blue']);
let arr = [...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));
// {2, 4, 6}
let set = new Set([1,2,3,4,5]);
set = new Set([...set].filter(x => (x % 2) == 0 ));
// {2, 4}
实现并集（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)));
WeakSet
它与 Set 有两个区别。
首先，WeakSet 的成员只能是对象，而不能是其他类型的值。
其次，WeakSet 中的对象都是弱引用，即垃圾回收机制不考虑 WeakSet 对该对象的引用
Map
先来看下Map的知识结构图
图片来自简书
下面主要介绍下Map的基本用法、遍历方法和与其他数据结构的相互转换
基本用法
定义
Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现，比Object更适合的“键值对”的数据结构。实例的属性和操作方法
- size属性 返回 Map 结构的成员总数。
- set(key, value)
- get(key) 找不到key，返回undefined
- has(key)
- delete(key 删除失败，返回false。
- clear() 清除所有成员，没有返回值
const map = new Map();
map.set('foo', 'a);
map.set('bar', 'b);
map.size // 2
map.get('foo') // a
map.clear()
map.size // 0
const m = new Map();
m.set(undefined, 'nah');
m.has(undefined) // true
m.delete(undefined)
m.has(undefined) // false
遍历方法
- keys()：返回键名的遍历器。
- values()：返回键值的遍历器。
- entries()：返回所有成员的遍历器。
- forEach()：遍历 Map 的所有成员。
Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）。
const map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
]);
[...map.keys()]
// [1, 2, 3]
[...map.values()]
// ['one', 'two', 'three']
[...map.entries()]
// [[1,'one'], [2, 'two'], [3, 'three']]
[...map]
// [[1,'one'], [2, 'two'], [3, 'three']]
map.forEach(function(value, key, map) {
console.log("Key: %s, Value: %s", key, value);
});
与其他数据结构的互相转换
- Map 转为数组
使用扩展运算符（...） - 数组 转为 Map
将数组传入 Map 构造函数，就可以转为 Map。
new Map([
[true, 7],
[{foo: 3}, ['abc']]
])
// Map {
// true => 7,
// Object {foo: 3} => ['abc']
// }
- Map 转为对象
如果所有 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)
// { yes: true, no: false }
- 对象转为 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})
// Map {"yes" => true, "no" => false}
- 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"]]]'
- JSON 转为 Map
function jsonToStrMap(jsonStr) {
return objToStrMap(JSON.parse(jsonStr));
}
jsonToStrMap('{"yes": true, "no": false}')
// Map {'yes' => true, 'no' => false}
function jsonToMap(jsonStr) {
return new Map(JSON.parse(jsonStr));
}
jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
// Map {true => 7, Object {foo: 3} => ['abc']}
WeakMap
WeakMap与Map的区别有两点。
首先，WeakMap只接受对象作为键名（null除外），不接受其他类型的值作为键名
其次，WeakMap的键名所指向的对象，不计入垃圾回收机制。
