一、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();//清除所有成员，没有返回值。
  1. 遍历方法（用于遍历成员）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']}