Set

类似于数组，但是成员的值都是唯一的，没有重复的；
Set本身是一个构造函数，用来生成Set数据结构；
不能区分 +0,-0;
认为 NaN 不等于 NaN;
不能区分对象，认为两个对象总是不相等的；
不能区分数组，认为两个数组总是不相等的；

Set的基础和数组去重

let arr = [
  2,
  3,
  4,
  5,
  1,
  '1',
  1,
  undefined,
  undefined,
  'undefined',
  null,
  NaN,
  NaN,
  +0,
  -0,
  {},
  {},
  [],
  [],
]
function unique(arr) {
  return Array.from(new Set(arr))
}
let newArr = unique(arr)
let newArr1 = [...new Set(arr)]
console.log(newArr) // [1, "1", 2, 3, 4, 5, undefined, "undefined", null, NaN, 0, {}, {}, [], []]
console.log(newArr1) // [1, "1", 2, 3, 4, 5, undefined, "undefined", null, NaN, 0, {}, {}, [], []]
// 不能区分 +0,-0;认为NaN不等于NaN;不能区分对象，认为两个对象总是不相等的。不能区分数组，认为两个数组总是不相等的。
console.log(new Set([+0, -0])) //Set(1) {0}

const set = new Set([1, 2, 3, 4])
console.log(set) // Set(4) {1, 2, 3, 4}
console.log(set.size) // 4
console.log(...set) // 1 2 3 4

Set的属性和方法

console.dir(Set)
// ƒ Set()
// arguments: (...)
// caller: (...)
// length: 0
// name: "Set"
// prototype: Set
//   add: ƒ add()
//   clear: ƒ clear()
//   constructor: ƒ Set()
//   delete: ƒ delete()
//   entries: ƒ entries()
//   forEach: ƒ forEach()
//   has: ƒ has()
//   keys: ƒ values()
//   size: (...)
//   values: ƒ values()
//   Symbol(Symbol.iterator): ƒ values()
//   Symbol(Symbol.toStringTag): "Set"
//   get size: ƒ size()
//   __proto__: Object
// Symbol(Symbol.species): (...)
// get Symbol(Symbol.species): ƒ [Symbol.species]()
// __proto__: ƒ ()
// [[Scopes]]: Scopes[0]

Set的实例属性

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

Set的操作方法

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

const S = new Set()
S.add(1).add(2).add(2)
console.log(S) // Set(2) {1, 2}
console.log(S.size) // 2
console.log(S.has(1)) // true
console.log(S.has(2)) // true
console.log(S.has(3)) // false

S.delete(2)
console.log(S.has(2)) //false
console.log(S.size) // 1

S.clear()
console.log(S.size) // 0

// 判断是否包括一个键
const properties = new Set()
properties.add('width')
properties.add('height')
if (properties.has('width')) {
  // do something
}

// Array.from()可以将Set结构转换成数组

const items = new Set([1, 2, 3, 4, 5])
const array = Array.from(items)
console.log(items, array) // Set(5) {1, 2, 3, 4, 5} [1, 2, 3, 4, 5]

Set的遍历操作（用于遍历成员）

• keys(): 返回键名
• values(): 返回键值
• entries(): 返回键值对
• forEach(): 使用回调函数遍历每个成员

let set1 = new Set(['red', 'green', 'blue']).add('yellow')
for (let item of set1.keys()) {
  console.log(item)
  // red
  // green
  // blue
  // yellow
}
for (let i of set1.values()) {
  console.log(i)
  // red
  // green
  // blue
  // yellow
}
for (let i of set1) {
  console.log(i)
  // red
  // green
  // blue
  // yellow
}
for (let i of set1.entries()) {
  console.log(i)
  // ["red", "red"]
  // ["green", "green"]
  // ["blue", "blue"]
  // ["yellow", "yellow"]
}

let set2 = new Set([1, 2, 3])
set2.forEach((value) => console.log(value * 2))
// 2
// 4
// 6

...运算符遍历

const setN = new Set([1, 2, 3])
let newSetN = new Set([...setN].map((x) => x * 2))
console.log(newSetN) // Set(3) {2, 4, 6}

const setM = new Set([1, 2, 3, 4, 5])
let newSetM = new Set([...setM].filter((x) => x % 2 === 0))
console.log(newSetM) // Set(2) {2, 4}

const a = new Set([1, 2, 3])
const b = new Set([4, 2, 3])
const c = new Set([...a, ...b])
console.log(c) // Set(4) {1, 2, 3, 4}
const d = new Set([...a].filter((x) => b.has(x)))
console.log(d) // Set(2) {2, 3}
const e = new Set([...a].filter((x) => !b.has(x)))
console.log(e) // Set(1) {1}

WeakSet

语法：

new WeakSet([iterable])
WeakSet.prototype.add(value)
WeakSet.prototype.has(value)
WeakSet.prototype.delete(value)

和Set的区别：

• 第一，WeakSet的成员只能是对象，而不能是其他类型的值；
• 第二，WeakSet中对象都是弱引用，即垃圾回收机制不考虑WeakSet对该对象的引用，也就是说，如果其他对象都不再引用该对象，那么垃圾回收机制会回收该对象所占用的内存，不考虑该对象是否还存在于WeakSet之中；
• 第三，WeakSet不能对其元素进行迭代，并没有那么多使用情形；
• 第四，没有 size 属性。

使用：

let set = new WeakSet()
const class_1 = {},
  class_2 = {}
set.add(class_1)
set.add(class_2)
console.log(set) // WeakSet {Object {}, Object {}}
console.log(set.has(class_1)) // true
console.log(set.has(class_2)) // true

Map

JavaScript 的对象本质上是键值对的集合（Hash 结构）,但是只能用字符串作为键；
Map类似于对象，也是键值对集合，各种类型的值（包括对象）都能当做键；
+0,-0Map视为一个键；
NaN,NaN Map视为一个键；

const m = new Map()
const o = { p: 'hello world' }
m.set(o, 'content')
console.log(m.size) // 1
console.dir(m) // Map(1)
console.log(m.get(o)) // 'content'
console.log(m.has(o)) // true
m.delete(o)
console.log(m.has(o)) // false

创建Map

const mapOne = new Map([
  [1, 'one'],
  [2, 'two'],
  [3, 'three'],
])
const mapTwo = new Map().set(1, 'one').set(2, 'two').set(3, 'three')
console.log(mapOne, mapTwo) // Map(3) {1 => "one", 2 => "two", 3 => "three"} Map(3) {1 => "one", 2 => "two", 3 => "three"}

Map 的基础用法

const map = new Map([
  ['name', '张三'],
  ['title', 'author'],
])
console.log(map) // Map(2) {"name" => "张三", "title" => "author"}
console.log(map.size) // 2
console.log(map.has('name')) // true
console.log(map.get('name')) // '张三'
console.log(map.has('title')) // true
console.log(map.get('title')) // 'author'

const items = [
  ['name', '张三'],
  ['title', 'author'],
]
const mapItems = new Map()
items.forEach(([key, value]) => mapItems.set(key, value))
console.log(mapItems) // Map(2) {"name" => "张三", "title" => "author"}

各类 Map 的键

• NaN

console.log(NaN === NaN) // false
console.log(Object.is(NaN, NaN)) // true
const mapNaN = new Map().set(NaN, 'NaN123')
console.log(mapNaN.get(NaN)) // 'NaN123'

• +0,-0

console.log(+0 === -0) // true
console.log(Object.is(+0, -0)) // true
const map00 = new Map().set(+0, '000')
console.log(map00.get(-0)) // '000'

• {}

console.log(new Map().set({}, 1).set({}, 2).size) // 2

• []

console.log(new Map().set([], 1).set([], 2).size) // 2

• true,false,null,undefined,'true'

const mapAll = new Map()
mapAll.set(true, true).set('true', 'true').set(undefined, 1).set(null, 2)
console.log(
  mapAll.get(true),
  mapAll.get('true'),
  mapAll.get(undefined),
  mapAll.get(null)
) // true 'true' 1 2

注意：不存在的属性键返回 undefined

console.log(new Map().get('abcsdff')) // undefined

注意：不仅仅是数组，任何具有 Iterator 接口且每个成员都是一个双数组的数据结构都可以当作 Map 构造函数的参数。

const set = new Set([
  ['foo', 1],
  ['bar', 2],
])
const m1 = new Map(set)
console.log(m1.get('foo')) // 1

注意：对同一个键赋值，后面的值会覆盖前面的值

const mapNew = new Map()
mapNew.set(1, 'aaa').set(1, 'bbb')
console.log(mapNew.get(1)) // 'bbb'
console.log(mapNew.get('11dasda')) // undefined

注意：只有对同一对象的引用，Map 结构才将其视为同一个键。

const mapA = new Map()
mapA.set(['a'], 555)
console.log(mapA.get(['a'])) // undefined

let aa = ['a']
mapA.set(aa, 555)
console.log(mapA.get(aa)) // 555

注意：同样的值的两个实例在 Map 结构中被视为两个键，简单类型值除外（数字，字符串，布尔值）

const mapSame = new Map()
const k1 = ['a']
const k2 = ['a']
mapSame.set(k1, 111).set(k2, 222)
console.log(mapSame.get(k1), mapSame.get(k2)) // 111 222

const k3 = { a: 1 }
const k4 = { a: 1 }
mapSame.set(k3, 123).set(k4, 234)
console.log(mapSame.get(k3), mapSame.get(k4)) // 123 234

const k5 = 1
const k6 = 1
mapSame.set(k5, 456).set(k6, 789)
console.log(mapSame.get(k5), mapSame.get(k6)) // 789 789

Map的属性、操作方法、遍历方法

size：返回 Map 结构的成员总数；
set(key,value):设置 key 所对应的键值，然后返回整个 Map 结构；如果 key 已经优质，则键值会被更新，否则就新生成改键；
get(key):读取 key 所对应的键值，如果找不到 key，则返回 undefined；
has(key):返回一个布尔值，表示某个键是否在 Map 数据结构中；
delete(key):删除某个键，返回 true，如果失败，则返回 false；
clear(): 清空所有成员，没有返回值；

const map = new Map([
  [false, 'no'],
  [true, 'yes'],
  [undefined, 1],
  [null, 2],
  [NaN, 3],
  [+0, 4],
  [{}, 5],
  [[], 6],
])
console.log(map)
// Map(8)
//   [[Entries]]
//   0: {false => "no"}
//   1: {true => "yes"}
//   2: {undefined => 1}
//   3: {null => 2}
//   4: {NaN => 3}
//   5: {0 => 4}
//   6: {Object => 5}
//   7: {Array(0) => 6}
//   size: 8
//   __proto__: Map
console.log(map.size) // 8
map.set(NaN, 33).set(-0, 44).set({}, 55).set([], 66)
console.log(map)
// Map(10)
//   [[Entries]]
//   0: {false => "no"}
//   1: {true => "yes"}
//   2: {undefined => 1}
//   3: {null => 2}
//   4: {NaN => 33}
//   5: {0 => 44}
//   6: {Object => 5}
//   7: {Array(0) => 6}
//   8: {Object => 55}
//   9: {Array(0) => 66}
//   size: 10
//   __proto__: Map
console.log(map.size) //10
console.log(map.get(false)) // 'no'
console.log(map.get(true)) // 'yes'
console.log(map.get(null)) // 2
console.log(map.get(undefined)) // 1
console.log(map.get(0)) // 44
console.log(map.get({})) // undefined
console.log(map.get([])) // undefined
console.log(map.get('abcdef')) // undefined

console.log(map.has(false)) //true
console.log(map.has(true)) //true
console.log(map.has(0)) //true
console.log(map.has(NaN)) //true
console.log(map.has({})) //false
console.log(map.has([])) //false
console.log(map.has('abcdef')) //false

map.set(undefined, 11).set(null, 22).set(true, 'yesyes').set(false, 'nono')
console.log(map.get(undefined)) // true
console.log(map.get(null)) // 22
console.log(map.get(true)) // 'yesyes'
console.log(map.get(false)) // 'nono'
map.delete(undefined)
map.delete(null)
map.delete(true)
console.log(map.get(undefined)) // undefined
console.log(map.get(null)) // undefined
console.log(map.get(true)) // undefined
console.log(map.get(false)) // 'nono'

console.log(map.size) // 7
map.clear()
console.log(map.size) // 0

keys():返回键名；
values():返回键值；
entries():返回所有成员；
forEach():返回 Map 所有成员；

const map = new Map().set(1, 'one').set(2, 'two').set(3, 'three')

for (const key of map.keys()) {
  console.log(key)
  // 1
  // 2
  // 3
}

for (const value of map.values()) {
  console.log(value)
  // 'one'
  // 'two'
  // 'three'
}

for (const [key, value] of map.entries()) {
  console.log(key, value)
  // 1 'one'
  // 2 'two'
  // 3 'three'
}

for (const [key, value] of map) {
  console.log(key, value)
  // 1 'one'
  // 2 'two'
  // 3 'three'
}

console.log([...map.keys()]) // [1,2,3]
console.log([...map.values()]) // ['one','two','three']
console.log([...map.entries()]) // [[1,'one'],[2,'two'],[3,'three']]
console.log([...map]) // [[1,'one'],[2,'two'],[3,'three']]

map.forEach((value, key, map) => {
  console.log(key, value)
  // 1 'one'
  // 2 'two'
  // 3 'three'
})

// forEach方法还能接收第二个参数，用于绑定this
const reporter = {
  report: (key, value) => {
    console.log(key, value)
    // 1 'one'
    // 2 'two'
    // 3 'three'
  },
}
map.forEach(function (value, key, map) {
  this.report(key, value)
}, reporter)

const map1 = new Map([...map].filter(([k, v]) => k < 3))
console.log(map1) // Map(2) {1 => "one", 2 => "two"}

const map2 = new Map([...map].map(([k, v]) => [k * 2, '_' + v]))
console.log(map2) // Map(3) {2 => "_one", 4 => "_two", 6 => "_three"}

与其他数据结构互相转换

• Map和数组互转

const myMap = new Map().set(true, 7).set({ foo: 3 }, ['abc'])
let arrMap = [...myMap]
console.log(arrMap) // [[true,7],[{foo:3},['abc']]]
console.log(new Map(arrMap)) // Map(2) {true => 7, {foo:3} => Array(1)}

• Map和对象互转(=>obj 需要Map的所有键都是字符串)

function MaptoObj(strMap) {
  let obj = Object.create(null)
  for (const [k, v] of strMap) {
    obj[k] = v
  }
  return obj
}
function ObjtoMap(obj) {
  let strMap = new Map()
  for (const k of Object.keys(obj)) {
    strMap.set(k, obj[k])
  }
  return strMap
}
const strMap = new Map([
  ['yes', true],
  ['no', false],
])
const endObj = MaptoObj(strMap)
console.log(endObj) // {yes: true, no: false}
console.log(ObjtoMap(endObj)) // Map(2) {"yes" => true, "no" => false}

• Map和 JSON 互转(=>JSON:Map键名都是字符串，可以转为对象 JSON；还有非字符串，可以转为数组 JSON。=>Map:对象 JSON；数组 JSON。)

// map转对象JSON
function MaptoObjJSON(strMap) {
  return JSON.stringify(MaptoObj(strMap))
}
function MaptoObj(strMap) {
  let obj = Object.create(null)
  for (const [k, v] of strMap) {
    obj[k] = v
  }
  return obj
}
const myMap = new Map().set('yes', true).set('no', false)
console.log(MaptoObjJSON(myMap)) // '{"yes":true,"no":false}'

// map转数组JSON
function MaptoArrJSON(strMap) {
  return JSON.stringify([...strMap])
}
const myMap1 = new Map([
  [true, 7],
  [{ foo: 3 }, ['abc']],
])
console.log(MaptoArrJSON(myMap1)) // '[[true,7],[{"foo":3},["abc"]]]'

// 对象JSON转Map
function strJSONtoMap(strJson) {
  return ObjtoMap(JSON.parse(strJson))
}
function ObjtoMap(obj) {
  let strMap = new Map()
  for (const k of Object.keys(obj)) {
    strMap.set(k, obj[k])
  }
  return strMap
}
console.log(strJSONtoMap('{"yes":true,"no":false}')) // Map(2) {"yes" => true, "no" => false}

// 数组JSON转Map
function ArrJSONtoMap(arrJson) {
  return new Map(JSON.parse(arrJson))
}
console.log(ArrJSONtoMap('[[true,7],[{"foo":3},["abc"]]]')) // Map(2) {true => 7, {…} => Array(1)}

WeakMap

和 Map 的区别：

没有遍历操作；
无法清空，不支持 clear 方法；
key 是对象，值可以是任何值；

const wm = new WeakMap()

wm.set('abc', 123) // TypeError
wm.set({}, 123) // OK