ES6笔记-Set和Map数据结构

依据阮一峰ES6教程摘取的可能会用到的特性

Set数据结构

        类似于数组，但成员值都是唯一的，通过new set()创建

属性

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

操作方法

• add(value)：添加某个值，返回 Set 结构本身。
• delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
• has(value)：返回一个布尔值，表示该值是否为Set的成员。
• clear()：清除所有成员，没有返回值。

let s = new Set()
s.add(1).add(2).add(2);
// 注意2被加入了两次

s.size // 2

s.has(1) // true
s.has(2) // true
s.has(3) // false

s.delete(2);
s.has(2) // false

遍历方法

        Set的遍历顺序就是插入顺序
        Set结构没有键名，所以keys()和values()方法相同

• keys()：返回键名的遍历器
• values()：返回键值的遍历器
• entries()：返回键值对的遍历器
• forEach()：使用回调函数遍历每个成员，也可以有第二个参数用来指定this对象

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"]

set = new Set([1,4,9]);
set.forEach((value,key) => console.log(`${key}:${value}`))
//1:1
//4:4
//9:9

遍历应用

        数组去重

let arr = [3, 5, 2, 2, 5, 5];
let unique = [...new Set(arr)];
// [3, 5, 2]

        间接使用map,filter方法

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}

        实现并集，交集，差集

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}

WeakSet

        类似Set，但成员只能是对象
        弱应用，无内存泄漏风险
        无遍历属性，但有add,delete,has方法

Map数据结构

        ES5的对象只能用字符串当键，Map结构可以用各种类型的值（包括对象）当键，Map比Object更合适
        map的键实际上是跟内存地址绑定，和值无关

const map = new Map([
  ['name', '张三'],
  ['title', 'Author']
]);

map.size // 2
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"

属性

    size属性返回 Map 结构的成员总数

操作方法

    set(key,value) 返回当前map对象，可以用链式写法

const m = new Map();

m.set('edition', 6)        // 键是字符串
m.set(262, 'standard')     // 键是数值
m.set(undefined, 'nah')    // 键是 undefined

let map = new Map()
  .set(1, 'a')
  .set(2, 'b')
  .set(3, 'c');

    get(key) 得到key对应的键值

const m = new Map();

const hello = function() {console.log('hello');};
m.set(hello, 'Hello ES6!') // 键是函数

m.get(hello)  // Hello ES6!

    has(key) 某个键是否在Map对象中

const m = new Map();

m.set('edition', 6)
 .set(262, 'standard')
 .set(undefined, 'nah');

m.has('edition')     // true
m.has('years')       // false
m.has(262)           // true
m.has(undefined)     // true

    delete(key) 删除某个键，成功就返回true，失败false

const m = new Map();
m.set(undefined, 'nah');
m.has(undefined)     // true

m.delete(undefined)
m.has(undefined)       // false

    clear() 清除所有成员，无返回值

let map = new Map();
map.set('foo', true);
map.set('bar', false);

map.size // 2
map.clear()
map.size // 0

遍历方法、

        遍历顺序就是插入顺序

• keys()：返回键名的遍历器。
• values()：返回键值的遍历器。
• entries()：返回所有成员的遍历器。
• forEach()：遍历 Map 的所有成员。

const map = new Map([
  ['F', 'no'],
  ['T',  'yes'],
]);

for (let key of map.keys()) {
  console.log(key);
}
// "F"
// "T"

for (let value of map.values()) {
  console.log(value);
}
// "no"
// "yes"

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

应用

    结合数组map,filter方法实现Map的遍历和过滤

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'}

       forEach方法

const reporter = {
  report: function(key, value) {
    console.log("Key: %s, Value: %s", key, value);
  }
};

map.forEach(function(value, key, map) {
  this.report(key, value);
}, reporter);

数据结构间的互相转换

    Map转为数组

const myMap = new Map()
  .set(true, 7)
  .set({foo: 3}, ['abc']);
[...myMap]
// [ [ true, 7 ], [ { foo: 3 }, [ 'abc' ] ] ]

    数组转为Map

new Map([
  [true, 7],
  [{foo: 3}, ['abc']]
])

    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}

WeakMap

    类似Map，但键只能是对象
    WeakMap的键名所指向的对象不计入垃圾回收机制（无内存泄漏）

    没有遍历操作，但有set,get,has,delete方法

    应用

        我们将这个状态作为键值放在 WeakMap 里，对应的键名就是myElement。一旦这个 DOM 节点删除，该状态就会自动消失，不存在内存泄漏风险。

let myElement = document.getElementById('logo');
let myWeakmap = new WeakMap();

myWeakmap.set(myElement, {timesClicked: 0});

myElement.addEventListener('click', function() {
  let logoData = myWeakmap.get(myElement);
  logoData.timesClicked++;
}, false);