es6全家桶(四)—— Set, Map数据结构

图片来自简书

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

去除数组重复成员的方法总结

  1. Set 函数初始化
    [...new Set(array)]
  2. Array.from方法可以将 Set 结构转为数组。
    const items = new Set([1, 2, 3, 4, 5]); const array = Array.from(items);

Set遍历及其应用

  1. 四个遍历方法
  • 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
  1. 遍历的应用
    结合扩展运算符一起使用,去除数组的重复成员
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的基本用法、遍历方法和与其他数据结构的相互转换

基本用法

  1. 定义
    Object 结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现,比Object更适合的“键值对”的数据结构。

  2. 实例的属性和操作方法

  • 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的键名所指向的对象,不计入垃圾回收机制。

推荐阅读更多精彩内容