set与map

Set

基本用法

• ES6提供了新的数据结构Set，与数组类似，最大的特点是没有重复值，成员是唯一的
• Set可以直接当做构造函数使用

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
  console.log(i);
}
// 2 3 5 4

• Set构造函数可以接受一个数组作为构造函数

const arr=[1,2,3,4,4,4,2,3];
const set=new Set(arr);
for(let e of set){
  console.log(e);
}
//1 2 3 4

• 对于set结构加入新值得时候，set不会对值进行强制类型转换，所以5！=“5”，规则与===类似，只是Set结构认为NAN===NAN，另外两个对象也总是不相等的

Set的实例属性与方法

• Set有一个size属性用来返回元素的个数

const arr=[1,2,3,4,4,4,2,3];
const set=new Set(arr);
alert(set.size);
//4

• Set有四个操作方法add,delete,has,clear,这四个方法完全见文知意;

const arr=[1,2,3,4,4,4,2,3];
const set=new Set(arr);
set.add(5);
//增加元素5，返回新的Set结构
set.delete(1);
//删除元素1，返回true，返回删除成功；
set.has(2);
//查找元素2，返回true，表示有这个元素;
set.clear();
//清空Set，不返回值

• Array.from可以将Set结构转化为数组

const set=new Set([1,2,3,4,4,4,2,3]);
console.log(Array.from(set));
//[1,2,3,4];

• 因此Set结构可用于数组去重

const arr=[1,2,3,4,4,4,2,3];
console.log([...new Set(arr)]);

• Set也有四个遍历方法keys,values,entries,foreach

const arr=[1,2,3,4,4,4,2,3];
const set=new Set(arr);
console.log(set.keys());
//返回键名
console.log(set.values());
//返回键值
console.log(set.entries());
//返回键值对
//由于Set结构只有值，没有键，所以keys和values的返回值都是一样的，返回的都属于键值对对象

• foreach()方法与数组的使用方法完全一样

weakSet

含义

• weakSet是一种比较特殊的Set，首先它的元素只能是对象，其次它的内部元素都是弱引用，也就是说js的垃圾回收机制在垃圾回收时是不会考虑其中的对象的，比较危险，但从另一个角度来考虑，可以使用weakSet存储DOM节点进行操作，不用担心内存泄露，而且也是在实例中使用，所以不用考虑内存回收的危险。
• 该数据结构的用法与Set基本一样，但是没有size属性和foreach方法

---

map

基本含义

• javascript的对象本质上是键值对的集合（hash结构），但是object的局限在与它的键只可以是字符串，因此map结构出现了，它类似与object，但是它的键可以为任意值

const m = new Map();
const o = {p: 'Hello World'};
m.set(o, 'content')
m.get(o) // "content"
m.has(o) // true
m.delete(o) // true
m.has(o) // false

• Map构造函数接受数组作为参数，实际上执行的是

const items = [
  ['name', '张三'],
  ['title', 'Author']
];
const map = new Map();
items.forEach(
  ([key, value]) => map.set(key, value)
);

• 事实上任何一个具有iterator接口的，且每个元素都是双元素数组的结构都可以作为参数，也就是说Map和Set都可以作为产生新map的参数

const set = new Set([
  ['foo', 1],
  ['bar', 2]
]);
const m1 = new Map(set);
m1.get('foo') // 1
const m2 = new Map([['baz', 3]]);
const m3 = new Map(m2);
m3.get('baz') // 3

• 如果对一个键多次赋值，那么后面的值会覆盖前面的值
• 读取未知值返回undefined
• 值得注意的是只有对同一个值的引用，Map才将其看做相等的值

const map = new Map();
const k1 = ['a'];
const k2 = ['a'];
map
.set(k1, 111)
.set(k2, 222);
map.get(k1) // 111
map.get(k2) // 222

• 当键为简单数据类型的时候，只需严格相等Map便将其看做相等的，所以true不等于“true”,null不等于ubdefined,但是比较傻逼的是NAN等于NAN

实例的属性和方法

1. size

• 返回属性的数量

const map = new Map();
map.set('foo', true);
map.set('bar', false);
map.size // 2

2. set(key, value)

• set方法设置键名key对应的键值为value，然后返回整个 Map 结构。如果key已经有值，则键值会被更新，否则就新生成该键。

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

• set方法返回的是当前的map对象，因此可以采用链式写法

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

3. get(key)

• get方法读取key对应的键值，如果找不到key，返回undefined。

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

4. has(key)

• has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。

const m = new Map();

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

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

5. delete(key)

• delete方法删除某个键，返回true。如果删除失败，返回false。

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

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

6. clear()

• clear方法清除所有成员，没有返回值。

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

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

7. keys()

• 返回键名的遍历器。

8. values()

• 返回键值的遍历器。

9. entries()

• 返回所有成员的遍历器。

10. 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结构的默认遍历方法是entries;

与其他数据结构的相互转化

Map 转为数组

• 使用扩展运算符

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

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}

WeakMap

• WeakMap只接受对象作为键名，其他，参考WeakMap......