js Set和Map集合的基本用法

一、Set

基本用法

Set类似于数组，但是成员的值都是唯一的，没有重复的值（常用于数组去重）。
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 通过add()方法向 Set 结构加入成员，结果表明 Set 结构不会添加重复的值

Set函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。

// 例一 (数组去重)
const set1 = new Set([1, 2, 3, 4, 4]);
[...set1]
// [1, 2, 3, 4]

// 例二 (数组去重后的长度)
const items = new Set([1, 2, 3, 4, 5, 5, 5, 5]);
items.size // 5

// 例三 (数组长度)
const set2 = new Set(document.querySelectorAll('div'));
set2.size // 56

// 类似于
const set3 = new Set();
document.querySelectorAll('div').forEach(div => set3.add(div));
set3.size // 56

// 在 Set中 ，两个NaN是相等的，类似于精确相等运算符（===）
let set4 = new Set();
let a = NaN;
let b = NaN;
set4.add(a);
set4.add(b);
console.log(set4)//Set(1) {NaN}

//在 Set中，两个对象总是不相等的
```javascript
let set5 = new Set();

set5.add({});
console.log(set5.size) // 1

set5.add({});
console.log(set5.size)// 2

数组去重、字符串去重

[...new Set([1, 2, 3, 4, 5, 5, 5, 5])];
// [1, 2, 3, 4]
[...new Set('ababbc')].join('');
// "abc"

Set 实例的属性和方法

• Set 结构的实例有以下属性
  1. Set.prototype.constructor：构造函数，默认就是Set函数。
  2. Set.prototype.size：返回Set实例的成员总数。
• Set 实例的方法分为两大类：

  1. 操作方法（用于操作数据）add() , delete() , has() , clear()

     let set = new Set();
     set.add(1);//添加某个值，返回 Set 结构本身。
     set.delete(1);//删除某个值，返回一个布尔值，表示删除是否成功。
     set.has(1);//返回一个布尔值，表示该值是否为Set的成员。
     set.clear();//清除所有成员，没有返回值。
     

  2. 遍历方法（用于遍历成员）keys()，values()，entries()，forEach()

     let set = new Set(['red', 'green', 'blue']);
     //1.set.keys()
     for (let item of set.keys()) {
       console.log(item);
     }
     // red
     // green
     // blue
     
     //2.set.values()
     for (let item of set.values()) {
       console.log(item);
     }
     // red
     // green
     // blue
     
     //3.set.entries()
     for (let item of set.entries()) {
       console.log(item);
     }
     // ["red", "red"]
     // ["green", "green"]
     // ["blue", "blue"]
     //由于 Set 结构没有键名，只有键值（或者说键名和键值是同一个值），所以keys方法和values方法的行为完全一致
     
     //4.set.forEach()
     set.forEach((value, key) => {
       console.log(key + ' : ' + value)
     })
     // red : red
     // green : green
     // blue : blue
     
     //扩展运算符（...）内部使用for...of循环，所以也可以用于 Set 结构。
     let arr=['aaa'];
     arr=[...arr,...set]
     console.log(arr);
     //['aaa', 'red', 'green', 'blue']
     

二、Map

基本用法

实例的属性和操作方法

    //实例化
    let map=new Map();

    //通过set方法存入键和值
    map.set('aa',11);
    //set方法返回的是当前的Map对象，因此可以采用链式写法。
    map.set('bb',22).set('cc',33)

    //size属性返回 Map 结构的成员总数。
    map.size//3

    //通过get方法读取key对应的值，如果找不到key，返回undefined。
    map.get('aa')//11
    map.get('dd')//undefined

    //通过has方法判断某个键是否在当前 Map 对象之中
    map.has('aa') // true

    //通过delete方法删除某个键，返回true。如果删除失败，返回false。
    map.delete('aa') // true
    map.has('aa') // false

    //clear方法清除所有成员，没有返回值。
    map.size // 2
    map.clear()
    map.size // 0

遍历方法

• Map 结构原生提供三个遍历器生成函数和一个遍历方法
  1. keys()：返回键名的遍历器。
  2. values()：返回键值的遍历器。
  3. entries()：返回所有成员的遍历器。
  4. 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 [key, value] of map.entries()) {//返回所有成员
	  console.log(key, value);
	}
	// "F" "no"
	// "T" "yes"
	
	// 或者
	for (let item of map.entries()) {
	  console.log(item[0], item[1]);
	}
	// "F" "no"
	// "T" "yes"
	
	// 等同于使用map.entries()
	for (let [key, value] of map) {
	  console.log(key, value);
	}
	// "F" "no"
	// "T" "yes"

	map.forEach(function(value, key, map) {//返回所有成员以及map本身
	  console.log(value, key, map);
	});
	//no F Map(2) {'F' => 'no', 'T' => 'yes'}
	//yes T Map(2) {'F' => 'no', 'T' => 'yes'}

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

• Map 转为数组

  前面已经提过，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

  对象转为 Map 可以通过Object.entries()。

  let obj = {"a":1, "b":2};
  let map = new Map(Object.entries(obj));
  此外，也可以自己实现一个转换函数。
  
  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

  JSON 转为 Map，正常情况下，所有键名都是字符串。

  function jsonToStrMap(jsonStr) {
    return objToStrMap(JSON.parse(jsonStr));
  }
  
  jsonToStrMap('{"yes": true, "no": false}')
  // Map {'yes' => true, 'no' => false}
  

  但是，有一种特殊情况，整个 JSON 就是一个数组，且每个数组成员本身，又是一个有两个成员的数组。这时，它可以一一对应地转为 Map。这往往是 Map 转为数组 JSON 的逆操作。

  function jsonToMap(jsonStr) {
    return new Map(JSON.parse(jsonStr));
  }
  
  jsonToMap('[[true,7],[{"foo":3},["abc"]]]')
  // Map {true => 7, Object {foo: 3} => ['abc']}